Skip to content

chore(accordion): accordion API & a11y (part 2)#6329

Draft
rise-erpelding wants to merge 25 commits into
swc-1854/accordion-migrationfrom
swc-1857-1858-1859--part-two
Draft

chore(accordion): accordion API & a11y (part 2)#6329
rise-erpelding wants to merge 25 commits into
swc-1854/accordion-migrationfrom
swc-1857-1858-1859--part-two

Conversation

@rise-erpelding
Copy link
Copy Markdown
Collaborator

Description

Completes the accordion migration by adding automated coverage and 1st-gen migration tooling. Depends on and targets #6300

In this PR (part 2 of 2):

  • Storybook play tests (accordion.test.ts): ARIA contract, toggle / cancel, exclusive open, allow-multiple, disabled item, host disabled, Space keyboard, heading level propagation
  • Accessibility story in accordion.stories.ts: documents WAI-ARIA Accordion features and best practices
  • 1st-gen deprecation warnings (dev mode): sp-accordion-item label attribute, per-item level when it disagrees with parent, sp-accordion.focus(); with deprecation.test.ts coverage
  • 1st-gen dev-mode.test.ts updated to allow deprecation-level warnings from default stories
  • Changeset: @adobe/spectrum-wc minor (2nd-gen accordion), @spectrum-web-components/accordion patch (1st-gen deprecations)

Motivation and context

Play tests verify the ARIA contract and interaction model from part 1 in a repeatable way. Deprecation warnings give 1st-gen consumers early notice of breaking API changes in Spectrum 2 before the tags are removed.

Related issue(s)

  • fixes SWC-1857
  • fixes SWC-1858
  • fixes SWC-1859

Screenshots (if appropriate)


Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed the Accessibility Practices for this feature: WAI-ARIA Accordion pattern
  • I have added automated tests to cover my changes — Storybook play tests + 1st-gen deprecation tests
  • I have included a well-written changeset.
  • Documentation updated: Storybook accessibility story.

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

2nd-gen play tests

  • Storybook: Components > Accordion > Tests — all play stories pass (green)
  • OverviewTest, AriaContractTest, ToggleTest, ToggleEventTest pass
  • DisabledItemTest, DisabledOpenItemTest pass
  • HostDisabledTest, HostDisabledOpenItemTest pass
  • SpaceKeyTest passes
  • ExclusiveOpenTest, AllowMultipleTest pass
  • HeadingLevelTest passes

1st-gen deprecation warnings

  • With dev mode on, sp-accordion-item label="…" logs deprecation warning
  • With dev mode on, item level that disagrees with parent logs deprecation
  • With dev mode on, sp-accordion.focus() logs deprecation warning
  • Default 1st-gen stories do not log non-deprecation warnings (dev-mode.test.ts passes)
  • yarn test:focus accordion in 1st-gen passes

Accessibility story

  • Storybook: Components > Accordion > Accessibility — story renders without console errors
  • Storybook a11y addon reports no violations on the accessibility story

Device review

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

Accessibility testing checklist

Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).

  • Keyboard: All play test keyboard steps pass in browser
  • Screen reader: Accessibility story verified with VoiceOver — heading level announced, expanded/collapsed announced, disabled state and actions slot behavior correct

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

🦋 Changeset detected

Latest commit: f3767f7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@adobe/spectrum-wc Minor
@spectrum-web-components/accordion Patch
@spectrum-web-components/bundle Patch
documentation Patch
@spectrum-web-components/action-bar Patch
@spectrum-web-components/action-button Patch
@spectrum-web-components/action-group Patch
@spectrum-web-components/action-menu Patch
@spectrum-web-components/alert-banner Patch
@spectrum-web-components/alert-dialog Patch
@spectrum-web-components/asset Patch
@spectrum-web-components/avatar Patch
@spectrum-web-components/badge Patch
@spectrum-web-components/breadcrumbs Patch
@spectrum-web-components/button-group Patch
@spectrum-web-components/button Patch
@spectrum-web-components/card Patch
@spectrum-web-components/checkbox Patch
@spectrum-web-components/clear-button Patch
@spectrum-web-components/close-button Patch
@spectrum-web-components/coachmark Patch
@spectrum-web-components/color-area Patch
@spectrum-web-components/color-field Patch
@spectrum-web-components/color-handle Patch
@spectrum-web-components/color-loupe Patch
@spectrum-web-components/color-slider Patch
@spectrum-web-components/color-wheel Patch
@spectrum-web-components/combobox Patch
@spectrum-web-components/contextual-help Patch
@spectrum-web-components/dialog Patch
@spectrum-web-components/divider Patch
@spectrum-web-components/dropzone Patch
@spectrum-web-components/field-group Patch
@spectrum-web-components/field-label Patch
@spectrum-web-components/help-text Patch
@spectrum-web-components/icon Patch
@spectrum-web-components/icons-ui Patch
@spectrum-web-components/icons-workflow Patch
@spectrum-web-components/icons Patch
@spectrum-web-components/iconset Patch
@spectrum-web-components/illustrated-message Patch
@spectrum-web-components/infield-button Patch
@spectrum-web-components/link Patch
@spectrum-web-components/menu Patch
@spectrum-web-components/meter Patch
@spectrum-web-components/modal Patch
@spectrum-web-components/number-field Patch
@spectrum-web-components/overlay Patch
@spectrum-web-components/picker-button Patch
@spectrum-web-components/picker Patch
@spectrum-web-components/popover Patch
@spectrum-web-components/progress-bar Patch
@spectrum-web-components/progress-circle Patch
@spectrum-web-components/radio Patch
@spectrum-web-components/search Patch
@spectrum-web-components/sidenav Patch
@spectrum-web-components/slider Patch
@spectrum-web-components/split-view Patch
@spectrum-web-components/status-light Patch
@spectrum-web-components/swatch Patch
@spectrum-web-components/switch Patch
@spectrum-web-components/table Patch
@spectrum-web-components/tabs Patch
@spectrum-web-components/tags Patch
@spectrum-web-components/textfield Patch
@spectrum-web-components/thumbnail Patch
@spectrum-web-components/toast Patch
@spectrum-web-components/tooltip Patch
@spectrum-web-components/top-nav Patch
@spectrum-web-components/tray Patch
@spectrum-web-components/underlay Patch
@spectrum-web-components/custom-vars-viewer Patch
@spectrum-web-components/story-decorator Patch
@spectrum-web-components/vrt-compare Patch
@spectrum-web-components/base Patch
@spectrum-web-components/grid Patch
@spectrum-web-components/opacity-checkerboard Patch
@spectrum-web-components/reactive-controllers Patch
@spectrum-web-components/shared Patch
@spectrum-web-components/styles Patch
@spectrum-web-components/theme Patch
@spectrum-web-components/truncated Patch
@spectrum-web-components/eslint-plugin Patch
@spectrum-web-components/stylelint-header-plugin Patch

Not sure what this means? Click here to learn what changesets are.

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

@github-actions
Copy link
Copy Markdown
Contributor

📚 Branch Preview Links

🔍 First Generation 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-6329

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.

Base automatically changed from swc-1857-1858-1859 to swc-1854/accordion-migration May 21, 2026 20:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant