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: 0737283

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.

cdransf

One small question! Looks great! ✨

cdransf · 2026-08-06T23:00:49Z

+}: {
+  canvasElement: HTMLElement;
+}) => {
+  canvasElement.querySelector<HTMLElement>('[data-vrt-focus-target]')?.focus();


Do we need something like this if Permutations on 238 renders the same permutation content twice? (Each with its own [data-vrt-focus-target].)

Suggested change

canvasElement.querySelector<HTMLElement>('[data-vrt-focus-target]')?.focus();

const focusMiddleChild = ({ canvasElement }: { canvasElement: HTMLElement }) => {

canvasElement

.querySelectorAll<HTMLElement>('[data-vrt-focus-target]')

.forEach((el) => el.focus());

};

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 added 5 commits August 6, 2026 15:00

test: vitest

f4c1ed3

test: a11y tests

0779a22

test: vrts

5ae56e5

docs: update migration plan

1a77d55

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

0737283

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

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 5 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!

cdransf left a comment

Uh oh!

cdransf Aug 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  canvasElement.querySelector<HTMLElement>('[data-vrt-focus-target]')?.focus();
+  const focusMiddleChild = ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  canvasElement
+    .querySelectorAll<HTMLElement>('[data-vrt-focus-target]')
+    .forEach((el) => el.focus());
+};

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!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

cdransf Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rise-erpelding commented Aug 6, 2026 •

edited

Loading

changeset-bot Bot commented Aug 6, 2026 •

edited

Loading