Merge branch 'main' of github.com:adobe/spectrum-web-components into …

…nikkimk/fix-menu-a11y
adobe · Jan 30, 2025 · 291231f · 291231f
2 parents d4f7f93 + 4fd414b
commit 291231f
Show file tree

Hide file tree

Showing 218 changed files with 3,061 additions and 1,466 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 93ad92a2fc031db0277fee635434955e438e94a9
+        default: 55b312b59925c0a6e24b7947114dcdb8cf61a9d2
     wireit_cache_name:
         type: string
         default: wireit
@@ -229,8 +229,17 @@ jobs:
         steps:
             - downstream
             - run:
-                  name: Generate Beta Docs
-                  command: yarn docs:preview
+                  name: Generate Custom Elements Manifest
+                  command: yarn docs:analyze
+            - run:
+                  name: Move CEM to Storybook directory
+                  command: cp projects/documentation/custom-elements.json storybook/
+            - run:
+                  name: Build documentation
+                  command: yarn docs:build
+            - run:
+                  name: Build Storybook
+                  command: yarn storybook:build
             - run: echo '/*    /index.html   200' > projects/documentation/dist/_redirects
             - run: |
                   branch=$(git symbolic-ref --short HEAD)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -19,8 +19,20 @@ jobs:
             - name: Setup Job and Install Dependencies
               uses: ./.github/actions/setup-job
 
-            - name: Generate Docs
-              run: yarn docs:ci
+            - name: Generate Custom Elements Manifest
+              run: yarn docs:analyze
+
+            - name: Move CEM to Storybook directory
+              run: cp projects/documentation/custom-elements.json storybook/
+
+            - name: Build documentation
+              run: yarn docs:production
+
+            - name: Build Storybook
+              run: yarn storybook:build
+
+            - name: Add redirects to documentation
+              run: echo '/*    /index.html   200' > projects/documentation/dist/_redirects
 
             - name: Deploy to GitHub Pages
               run: |

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @adobe/spectrum-web-components
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+-   **overlay:** make :focus-visible consistent when using overlay type modal ([#4912](https://github.com/adobe/spectrum-web-components/issues/4912)) ([7a5f786](https://github.com/adobe/spectrum-web-components/commit/7a5f786819ff200f5ae2648e2e2c4db3729050a2)), closes [#5021](https://github.com/adobe/spectrum-web-components/issues/5021)
+
+### Features
+
+-   add an optional chromatic vrt action ([7d2f840](https://github.com/adobe/spectrum-web-components/commit/7d2f8401cb05c5e23872424f132a1a8edd95b666))
+-   **opacity-checkerboard:** bump CSS version ([#5040](https://github.com/adobe/spectrum-web-components/issues/5040)) ([e3bf6d3](https://github.com/adobe/spectrum-web-components/commit/e3bf6d3c20c8dab6674ad8b1793082372901d155))
+-   **picker:** add forcePopover property ([#5041](https://github.com/adobe/spectrum-web-components/issues/5041)) ([3651e57](https://github.com/adobe/spectrum-web-components/commit/3651e57a90a05e551e6ee650e8ccc73aa05d3e7c))
+-   **sp-button-group:** sp-button-group react to size updates ([#5037](https://github.com/adobe/spectrum-web-components/issues/5037)) ([63bc618](https://github.com/adobe/spectrum-web-components/commit/63bc618c18e9d8e39155cc7544814564673893a7))
+-   **thumbnail:** bump thumbnail to use foundations release ([7490324](https://github.com/adobe/spectrum-web-components/commit/74903245d8dd8e3d39653a7f5296fa91e4562877))
+-   use globals to enable VRT modes in chromatic ([5b674b4](https://github.com/adobe/spectrum-web-components/commit/5b674b46841155762a6e5f9ebd566a0110279384))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 ### Bug Fixes

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-    "version": "1.0.3",
+    "version": "1.1.1",
     "granularPathspec": false,
     "npmClient": "yarn",
     "command": {

diff --git a/linters/eslint/CHANGELOG.md b/linters/eslint/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/eslint-plugin
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/eslint-plugin
+
 ## [1.0.1](https://github.com/adobe/spectrum-web-components/compare/v1.0.0...v1.0.1) (2024-11-11)
 
 **Note:** Version bump only for package @spectrum-web-components/eslint-plugin

diff --git a/linters/eslint/package.json b/linters/eslint/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/eslint-plugin",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "private": true,
     "main": "index.js"
 }
diff --git a/linters/stylelint-header/CHANGELOG.md b/linters/stylelint-header/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package stylelint-header
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+**Note:** Version bump only for package stylelint-header
+
 ## [1.0.1](https://github.com/adobe/spectrum-web-components/compare/v1.0.0...v1.0.1) (2024-11-11)
 
 **Note:** Version bump only for package stylelint-header

diff --git a/linters/stylelint-header/package.json b/linters/stylelint-header/package.json
@@ -1,6 +1,6 @@
 {
     "name": "stylelint-header",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "private": true,
     "license": "Apache-2.0",
     "author": "Adobe",

diff --git a/packages/accordion/CHANGELOG.md b/packages/accordion/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/accordion
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 **Note:** Version bump only for package @spectrum-web-components/accordion

diff --git a/packages/accordion/package.json b/packages/accordion/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/accordion",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -68,11 +68,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^1.0.1",
-        "@spectrum-web-components/icon": "^1.0.3",
-        "@spectrum-web-components/icons-ui": "^1.0.3",
-        "@spectrum-web-components/reactive-controllers": "^1.0.3",
-        "@spectrum-web-components/shared": "^1.0.1"
+        "@spectrum-web-components/base": "^1.1.1",
+        "@spectrum-web-components/icon": "^1.1.1",
+        "@spectrum-web-components/icons-ui": "^1.1.1",
+        "@spectrum-web-components/reactive-controllers": "^1.1.1",
+        "@spectrum-web-components/shared": "^1.1.1"
     },
     "devDependencies": {
         "@spectrum-css/accordion": "6.0.0-s2-foundations.16"

diff --git a/packages/action-bar/CHANGELOG.md b/packages/action-bar/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/action-bar
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 **Note:** Version bump only for package @spectrum-web-components/action-bar

diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/action-bar",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -58,11 +58,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/action-group": "^1.0.3",
-        "@spectrum-web-components/base": "^1.0.1",
-        "@spectrum-web-components/button": "^1.0.3",
-        "@spectrum-web-components/field-label": "^1.0.3",
-        "@spectrum-web-components/popover": "^1.0.3"
+        "@spectrum-web-components/action-group": "^1.1.1",
+        "@spectrum-web-components/base": "^1.1.1",
+        "@spectrum-web-components/button": "^1.1.1",
+        "@spectrum-web-components/field-label": "^1.1.1",
+        "@spectrum-web-components/popover": "^1.1.1"
     },
     "devDependencies": {
         "@spectrum-css/actionbar": "9.0.0-s2-foundations.16"

diff --git a/packages/action-button/CHANGELOG.md b/packages/action-button/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/action-button
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 ### Bug Fixes

diff --git a/packages/action-button/package.json b/packages/action-button/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/action-button",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -58,11 +58,11 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^1.0.1",
-        "@spectrum-web-components/button": "^1.0.3",
-        "@spectrum-web-components/icon": "^1.0.3",
-        "@spectrum-web-components/icons-ui": "^1.0.3",
-        "@spectrum-web-components/shared": "^1.0.1"
+        "@spectrum-web-components/base": "^1.1.1",
+        "@spectrum-web-components/button": "^1.1.1",
+        "@spectrum-web-components/icon": "^1.1.1",
+        "@spectrum-web-components/icons-ui": "^1.1.1",
+        "@spectrum-web-components/shared": "^1.1.1"
     },
     "devDependencies": {
         "@spectrum-css/actionbutton": "7.0.0-s2-foundations.22"

diff --git a/packages/action-group/CHANGELOG.md b/packages/action-group/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/action-group
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 **Note:** Version bump only for package @spectrum-web-components/action-group

diff --git a/packages/action-group/package.json b/packages/action-group/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/action-group",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "publishConfig": {
         "access": "public"
     },
@@ -59,10 +59,10 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.2",
-        "@spectrum-web-components/action-button": "^1.0.3",
-        "@spectrum-web-components/base": "^1.0.1",
-        "@spectrum-web-components/icons-workflow": "^1.0.3",
-        "@spectrum-web-components/reactive-controllers": "^1.0.3"
+        "@spectrum-web-components/action-button": "^1.1.1",
+        "@spectrum-web-components/base": "^1.1.1",
+        "@spectrum-web-components/icons-workflow": "^1.1.1",
+        "@spectrum-web-components/reactive-controllers": "^1.1.1"
     },
     "devDependencies": {
         "@spectrum-css/actiongroup": "6.0.0-s2-foundations.15"

diff --git a/packages/action-menu/CHANGELOG.md b/packages/action-menu/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
+
+**Note:** Version bump only for package @spectrum-web-components/action-menu
+
+# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
+
+### Bug Fixes
+
+-   lock prerelease versions for Spectrum CSS ([#5014](https://github.com/adobe/spectrum-web-components/issues/5014)) ([8aa7734](https://github.com/adobe/spectrum-web-components/commit/8aa77342f169b75ecbd1c07a2a1050860b182822))
+-   **overlay:** make :focus-visible consistent when using overlay type modal ([#4912](https://github.com/adobe/spectrum-web-components/issues/4912)) ([7a5f786](https://github.com/adobe/spectrum-web-components/commit/7a5f786819ff200f5ae2648e2e2c4db3729050a2)), closes [#5021](https://github.com/adobe/spectrum-web-components/issues/5021)
+
+### Features
+
+-   add an optional chromatic vrt action ([7d2f840](https://github.com/adobe/spectrum-web-components/commit/7d2f8401cb05c5e23872424f132a1a8edd95b666))
+-   **picker:** add forcePopover property ([#5041](https://github.com/adobe/spectrum-web-components/issues/5041)) ([3651e57](https://github.com/adobe/spectrum-web-components/commit/3651e57a90a05e551e6ee650e8ccc73aa05d3e7c))
+
 ## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
 
 **Note:** Version bump only for package @spectrum-web-components/action-menu

diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md
@@ -189,7 +189,7 @@ In order to deliver an `<sp-action-menu>` without an icon, use the `label-only`
 
 ### No visible label
 
-The visible label that is be provided via the default `<slot>` interface can be ommitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` continued to be accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<button>` element that toggles the menu list.
+The visible label that is be provided via the default `<slot>` interface can be omitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` continued to be accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<button>` element that toggles the menu list.
 
 <!-- prettier-ignore -->
 ```html
@@ -249,7 +249,7 @@ A custom icon can be supplied via the `icon` slot in order to replace the defaul
 </sp-action-menu>
 ```
 
-### Selection.
+### Selection
 
 When `selects` is set to `single`, the `<sp-action-menu>` element will maintain one selected item after an initial selection is made.
 
@@ -272,13 +272,33 @@ When `selects` is set to `single`, the `<sp-action-menu>` element will maintain
 </sp-action-menu>
 ```
 
-## Accessibility
+## Force Popover on Mobile Devices
 
-An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
+On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-action-menu` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `forcePopover` to the `sp-action-menu`.
+
+Usage Guidance:
+
+-   Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
+-   Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
+
+To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
+
+```html
+<sp-action-menu forcePopover>
+    <span slot="label">Action Menu</span>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select Inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and Mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save Selection</sp-menu-item>
+    <sp-menu-item disabled>Make Work Path</sp-menu-item>
+</sp-action-menu>
+```
 
 ## Adding tootip in action menu
 
-Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.
+Tooltip in action menu can be attached via adding `<sp-tooltip>` and can be customized by using various parameters (e.g. placement, content, etc) as needed.
 
 ```html
 <sp-action-menu>
@@ -291,3 +311,7 @@ Tooltip in action menu can be attached via adding <sp-tooltip> and can be custom
     <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
 </sp-action-menu>
 ```
+
+## Accessibility
+
+An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.