test(action-group): add unit, accessibility, and VRT coverage by rise-erpelding · Pull Request #6589 · adobe/spectrum-web-components

rise-erpelding · 2026-08-06T18:21:33Z

Description

Adds Phase 6 test coverage for the 2nd-gen swc-action-group migration:

Unit/behavior tests (action-group.test.ts): defaults, ARIA attributes, roving tabindex, disabled propagation, mouse/keyboard interactions.
Accessibility tests (action-group.a11y.spec.ts): ARIA snapshots, keyboard navigation (Tab in/out, arrow keys, Home/End), aXe WCAG validation, and a new ARIA-snapshot assertion for the toolbar-wrapper composition pattern.
VRT coverage (action-group.vrt.ts, action-group-custom-properties.vrt.ts): size/density/quiet permutations, justified, disabled, focus-ring z-index, static colors, forced-colors, and custom-property overrides.
A small ToolbarComposition story, added to back the new toolbar-composition a11y assertion (the ARIA structure it checks has no visual signature, so it's intentionally not covered by VRT).
Action-button VRT fix (action-button-custom-properties.vrt.ts): action-group's compact-mode corner-radius cascade added four new per-corner custom properties to swc-action-button (--swc-action-button-border-{start-start,start-end,end-start,end-end}-radius), but action-button's own custom-property VRT was never updated to cover them — its coverage assertion was failing. Added reference/override cases for all four; verified each overrides exactly one corner independently.

Also updates the migration plan's testing checklist to reflect what's covered here, including a note on why toolbar-wrapper composition is verified via ARIA snapshot rather than VRT.

Motivation and context

swc-action-group's implementation and stories landed on swc-2212/migrate-action-group without dedicated tests. This closes that gap ahead of the documentation pass (swc-2218/action-group-docs) and final migration review. The action-button fix was found while verifying this PR's own VRT coverage against the current custom-elements manifest.

Related issue(s)

fixes SWC-2217
part of Epic SWC-2212

Screenshots (if appropriate)

N/A — test-only change; visual coverage is captured as Chromatic VRT snapshots.

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published. — N/A, test-only; nothing publishable changes.
I have included updated documentation if my change required it. — N/A, Storybook/MDX docs are covered by the separate swc-2218/action-group-docs branch.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Unit/behavior suite passes
1. Run yarn test for the 2nd-gen swc package.
2. Confirm the action-group.test.ts suite passes with no skipped assertions.
VRT stories render correctly
1. Run Storybook locally and open Action Group / Action Group VRT.
2. Check Permutations, ForcedColors, and CustomProperties for missing rows or unstyled groups.
3. Confirm Chromatic snapshots for this PR match expectations before accepting baselines.
Toolbar composition a11y assertion passes
1. Run the 2nd-gen Playwright a11y suite (test-2ndgen-a11y).
2. Confirm action-group.a11y.spec.ts passes, including the new toolbar-wrapper-composition ARIA snapshot test.
Action-button custom-property coverage fixed
1. Run Storybook locally and open Action Button / Action Button VRT → CustomProperties.
2. Confirm four new rows exist for the per-corner border-radius properties, each showing exactly one corner rounded differently from its reference.
3. Run yarn test — confirm action-button-custom-properties.vrt.ts passes (this assertion was failing before this PR).

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Accessibility testing checklist

Keyboard (required — document steps below)
1. In Storybook, open Action Group / Docs → Overview.
2. Press Tab to enter the group (one stop), then ArrowRight / ArrowLeft to move among action-buttons; press Tab again.
3. Expect exactly one visible focus ring at a time, arrow keys move roving tabindex="0" correctly, and the second Tab leaves the group instead of moving to the next button.
Screen reader (required — document steps below)
1. With a screen reader active, navigate to the toolbar-wrapper-composition example (components-action-group--toolbar-composition).
2. Move focus through the outer wrapper and into each named group and its buttons.
3. Expect the outer landmark announced as "toolbar, Document actions", each inner cluster announced as "group, Edit actions" / "group, View actions", and each button announced with its label and role.

changeset-bot · 2026-08-06T18:21:44Z

⚠️ No Changeset found

Latest commit: 5b8862a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

rise-erpelding · 2026-08-06T21:07:12Z

Compact action groups need to be able to modify the action button corner radii, this adds VRT testing for those

rise-erpelding · 2026-08-06T21:20:33Z

+const staticColorsContent = () =>
+  ACTION_GROUP_STATIC_COLORS.map((staticColor) =>
+    staticColorBackground(
+      row([renderGroup({ staticColor })], `Static ${staticColor}`),
+      staticColor
+    )
+  );


Is it necessary to test static colors here? We're already testing them in action button, it doesn't seem likely that anything about action group would change those test results. Debated taking it out but figured I'd gather opinions first.

Agree to take out - if it's not implemented/managed by this component directly, then it can be removed (or added to the other, if needed).

^ maybe a note to add to the skill to improve it/prevent this redundancy?

cdransf

One small question! Looks great! ✨

github-actions · 2026-08-07T14:33:54Z

📚 Branch Preview Links

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6589

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

coveralls · 2026-08-07T14:38:02Z

Coverage Report for CI Build 31215990171

Warning

No base build found for commit ee17f35 on swc-2212/migrate-action-group.
Coverage changes can't be calculated without a base build.
If a base build is processing, this comment will update automatically when it completes.

Coverage: 96.249%

Details

Patch coverage: No coverable lines changed in this PR.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

Requires a base build to compare against. How to fix this →

Coverage Stats


Relevant Lines:	39351
Covered Lines:	38076
Line Coverage:	96.76%
Relevant Branches:	6471
Covered Branches:	6027
Branch Coverage:	93.14%
Branches in Coverage %:	Yes
Coverage Strength:	459.35 hits per line

💛 - Coveralls

5t3ph

Looking good, just a couple small suggestions!

5t3ph · 2026-08-07T18:07:15Z

+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+


What do you think of adding tests for one, two, and four buttons just to make sure the corner rounding comes through as expected? Can be one size for all.

5t3ph · 2026-08-07T18:17:15Z

+  render: () => html`
+    <div
+      role="toolbar"
+      aria-label="Document actions"


Use of aria-orientation becomes important when role="toolbar" is applied. Maybe a note that when you do the a11y docs that you include a vertical example to show applying aria-orientation="vertical" since the default for toolbar is horizontal?

rise-erpelding · 2026-08-07T21:00:49Z

+/* @global-exclude: fills a shadow-DOM host stretched by an ancestor flex layout (e.g. vertical swc-action-group); plain elements via global classes already stretch natively */
+/* stylelint-disable-next-line no-duplicate-selectors -- re-opens .swc-ActionButton so the @global-exclude fence (see vite-global-elements-css) can strip just this declaration from the generated global stylesheet without excluding the rest of the class's rules */
+.swc-ActionButton {
+  inline-size: 100%;
+}
+
+/* @global-exclude-end */
+


@5t3ph I started looking at Chromatic and realized that while <swc-action-button> isn't affected by applying inline-size: 100% (for vertical action group alignment), the global action button is. I'm excluding this style, and I committed the changes to the global stylesheet. I'm not 100% that's how this is supposed to be handled though so would appreciate some eyes on this piece.

rise-erpelding added the gen2 These issues or PRs map to our 2nd generation work to modernizing infrastructure. label Aug 6, 2026

rise-erpelding force-pushed the swc-2217/action-group-tests branch from 0cc1e2c to 613bade Compare August 6, 2026 18:53

rise-erpelding commented Aug 6, 2026

View reviewed changes

rise-erpelding force-pushed the swc-2217/action-group-tests branch from 9a284f0 to 0737283 Compare August 6, 2026 22:00

rise-erpelding marked this pull request as ready for review August 6, 2026 22:01

rise-erpelding requested a review from a team as a code owner August 6, 2026 22:01

rise-erpelding added Component:Action group Status:Ready for review PR ready for review or re-review. labels Aug 6, 2026

cdransf approved these changes Aug 6, 2026

View reviewed changes

Comment thread 2nd-gen/packages/swc/components/action-group/test/vrt/action-group.vrt.ts

Rise Erpelding added 6 commits August 7, 2026 09:14

test: vitest

d9e2411

test: a11y tests

3e477a8

test: vrts

a82c2d1

docs: update migration plan

e40e4c5

test(actionbutton): fix action button vrts to reflect new custom props

80d5522

fix: only show focus on middle child once

5dcf4a4

rise-erpelding force-pushed the swc-2217/action-group-tests branch from 70685fe to 5dcf4a4 Compare August 7, 2026 16:14

5t3ph added the run_vrt Triggers the Chromatic VRT run for 2nd-gen label Aug 7, 2026

fix: remove static colors from test coverage

e9ceb69

5t3ph reviewed Aug 7, 2026

View reviewed changes

5t3ph self-assigned this Aug 7, 2026

Rise Erpelding added 2 commits August 7, 2026 12:30

fix: exclude inline-size 100 from global styles

79daec7

fix: address feedback

5b8862a

rise-erpelding commented Aug 7, 2026

View reviewed changes

Navigation Menu

Uh oh!

test(action-group): add unit, accessibility, and VRT coverage - #6589

test(action-group): add unit, accessibility, and VRT coverage#6589
rise-erpelding wants to merge 9 commits into
swc-2212/migrate-action-groupfrom
swc-2217/action-group-tests

rise-erpelding commented Aug 6, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Aug 6, 2026 •

edited

Loading

Uh oh!

rise-erpelding Aug 6, 2026

Uh oh!

rise-erpelding Aug 6, 2026

Uh oh!

5t3ph Aug 7, 2026

Uh oh!

5t3ph Aug 7, 2026

Uh oh!

cdransf left a comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

coveralls commented Aug 7, 2026 •

edited

Loading

Uh oh!

5t3ph left a comment

Uh oh!

5t3ph Aug 7, 2026

Uh oh!

5t3ph Aug 7, 2026

Uh oh!

Uh oh!

rise-erpelding Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

rise-erpelding commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Accessibility testing checklist

Uh oh!

changeset-bot Bot commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

rise-erpelding Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 7, 2026

📚 Branch Preview Links

Uh oh!

coveralls commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 31215990171

Coverage: 96.249%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

5t3ph left a comment

Choose a reason for hiding this comment

Uh oh!

5t3ph Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rise-erpelding Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rise-erpelding commented Aug 6, 2026 •

edited

Loading

changeset-bot Bot commented Aug 6, 2026 •

edited

Loading

coveralls commented Aug 7, 2026 •

edited

Loading