chore(accordion): full fidelity feature update by miwha-adobe · Pull Request #6319 · adobe/spectrum-web-components

miwha-adobe · 2026-05-18T21:26:41Z

Description

Completes full-fidelity rendering, styling, and Storybook documentation for <swc-accordion> and <swc-accordion-item>.

Changes:

accordion-item.css — new file with all Spectrum 2 token-driven item styles: header layout, chevron, panel, sizes (s/m/l/xl), and forced-colors support
accordion.css — density overrides (compact/spacious) and quiet variant (transparent dividers, rounded header corners) cascaded to child items via custom properties
AccordionItem.ts — fix incorrect CSS import (accordion.css → accordion-item.css)
accordion.stories.ts — Storybook stories: Anatomy, Options (sizes, density, quiet, allow-multiple, heading level), States (disabled, item-disabled), Behaviors (toggle event, exclusive open), and Accessibility.

Note: Storybook stories are for testing for full fidelity review. Storybook docs will be further refined in following tickets.

Motivation and context

Phase 5 (styling) of the accordion 2nd-gen migration. This PR adds the visual layer and Storybook coverage on top.

Related issue(s)

SWC-1860

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed 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.
I have included updated documentation if my change required it.

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

Co-authored-by: Nikki Massaro <massaro@adobe.com>

changeset-bot · 2026-05-18T21:26:45Z

⚠️ No Changeset found

Latest commit: b3f64f3

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

…0-full-fidelity

github-actions · 2026-05-18T21:37:04Z

📚 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-6319

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.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…0-full-fidelity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

5t3ph · 2026-05-27T19:20:38Z

+  outline-offset: calc(token("accordion-focus-indicator-gap") * -1);
+}
+
+@media (hover: hover) {


Sidenote: I know this comes from the CSS repo but we haven't consistently applied it. Maybe we need a tiny spike to figure out if it's still worth doing, and if so, update our docs accordingly so it gets applied. Or, conversely, mark it as an anti-pattern if not.

Would we prefer that it stay out for now, and we add it back if needed? I don't see it in other 2nd-gen components.

Yeah, let's remove for now

5t3ph · 2026-05-27T19:49:23Z

+};
+
+// ────────────────────────────────
+//    ACCESSIBILITY STORIES


This is fine, just maybe check in both the a11y and documentation phases if there need to be any updates

5t3ph · 2026-05-27T20:32:12Z

+  --_swc-accordion-item-border-color: transparent;
+  --_swc-accordion-item-header-corner-radius: var(--_swc-accordion-corner-radius);


This is a unique scenario where the quiet attribute isn't passed on to the children, hence the custom property overrides. So I'm a bit torn on if these should be allowed to be fully exposed. They are currently technically exposed for non-quiet variants, unless you remove the .swc-Accordion scoping.

I think to reduce ambiguity against our guidelines, since they need to be exposed for purposes of this override, we should remove the private syntax and the scoping in this selector so that they can be fully exposed and therefore documented in our API. I don't want to get into a scenario of getting a mix of private and non-private syntax-using listed via @cssprops, as that muddies the usage guidelines.

Ok, this is how I have it addressed right now:

--swc-accordion-item-border-color and --swc-accordion-item-header-corner-radius now have exposed syntax and I changed the selector to :host([quiet]) ::slotted(swc-accordion-item) because it matched the density selectors

Keeping track of what all the corner-radius custom props were for was making me a feel a bit crazy, so I changed --swc-accordion-item-corner-radius to --swc-accordion-item-focus-indicator-corner-radius because all that I see it doing is changing the border radius for the focus indicator, but if that doesn't seem right, let me know

I find it fully irritating that I'm declaring the same corner radius tokens for each t-shirt size in accordion-item.css and accordion.css (once for focus outline and once for the hover), I'm not seeing a way around it but if you know of one, I'm happy to make the change!

I think your solution is elegant, nice work!

5t3ph

Super close! Good job figuring out how to smooth out the custom property hand-off 🙌

5t3ph · 2026-05-29T19:24:14Z

+  outline-offset: calc(token("accordion-focus-indicator-gap") * -1);
+}
+
+@media (hover: hover) {


Yeah, let's remove for now

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

5t3ph

Great work, team!

* docs(accordion): refine planning docs (#6269) Co-authored-by: Nikki Massaro <massaro@adobe.com> * chore: scaffold core package * chore: scaffold swc package * chore: add Chevron300Icon for xl accordion * chore: set up storybook story * chore: commit preview.ts updates * feat: implement AccordionItem API and render template * feat: implement Accordion API and propagation * feat: implement open and toggle logic * feat: wire up dynamic heading levels * feat: implement disabled item functionality * fix: handle space keyboard behavior (SWC-1487) * refactor: address missing migration-setup items * refactor: rename methods, align file names * refactor: typing, heading rendering, sizing * refactor: move toggle() into base, smooth a11y behavior * refactor: use assignedItems() helper * test: add a11y tests * docs: add a11y docs * fix: freeze accordion open state when disabled * feat: 1st-gen deprecation warnings/tests * docs: jsdoc comments * chore(accordion): full fidelity feature update * chore: changeset * fix: revert 1st-gen refactor work * chore(accordion): defer tests, deprecations, and changeset to part two Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(accordion): refine planning docs (#6269) Co-authored-by: Nikki Massaro <massaro@adobe.com> * chore: scaffold core package * chore: scaffold swc package * chore: add Chevron300Icon for xl accordion * chore: set up storybook story * chore: commit preview.ts updates * feat: implement AccordionItem API and render template * feat: implement Accordion API and propagation * feat: implement open and toggle logic * feat: wire up dynamic heading levels * feat: implement disabled item functionality * fix: handle space keyboard behavior (SWC-1487) * refactor: address missing migration-setup items * refactor: rename methods, align file names * refactor: typing, heading rendering, sizing * refactor: move toggle() into base, smooth a11y behavior * refactor: use assignedItems() helper * test: add a11y tests * docs: add a11y docs * fix: freeze accordion open state when disabled * feat: 1st-gen deprecation warnings/tests * docs: jsdoc comments * chore: changeset * fix: revert 1st-gen refactor work * chore(accordion): defer tests, deprecations, and changeset to part two Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(accordion): update css font * fix: class selectors * feat: set up accordion file structure, API, and a11y (#6300) * chore: scaffold core package * chore: scaffold swc package * chore: add Chevron300Icon for xl accordion * chore: set up storybook story * chore: commit preview.ts updates * feat: implement AccordionItem API and render template * feat: implement Accordion API and propagation * feat: implement open and toggle logic * feat: wire up dynamic heading levels * feat: implement disabled item functionality * fix: handle space keyboard behavior (SWC-1487) * refactor: address missing migration-setup items * refactor: rename methods, align file names * refactor: typing, heading rendering, sizing * refactor: move toggle() into base, smooth a11y behavior * refactor: use assignedItems() helper * test: add a11y tests * docs: add a11y docs * fix: freeze accordion open state when disabled * feat: 1st-gen deprecation warnings/tests * docs: jsdoc comments * chore: changeset * fix: revert 1st-gen refactor work * chore(accordion): defer tests, deprecations, and changeset to part two Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: class selectors * refactor: use ObserveSlotPresence instead of bespoke method * refactor: remove stop propagation on actions container * refactor: add open/close events --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(accordion): address PR review feedback on CSS and stories Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(accordion): restore row wrapper and register swc-button in stories * fix(accordion): change ceiling amount to spacing-300 * fix(accordion): fix token names for header and content sections * fix: move private custom properties from accordion-item :host * fix: adjust .swc-AccordionItem-header custom properties * fix: adjust content inline padding custom properties * chore: update preview.ts and migration plan * feat: spacing on direct actions * docs: improve ai skill * fix: use <p>s in stories and account for their margin * docs: add cssprops to jsdocs * chore: rename custom props for accordion item * feat: handle panel animation * fix: use better selectors * docs: docs updates * fix: handle quiet and corner radius tokens * chore: update migration plan * fix: feedback fixes --------- Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: Nikki Massaro <massaro@adobe.com> Co-authored-by: Rise Erpelding <rise@heysparkbox.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

rise-erpelding and others added 23 commits May 14, 2026 15:30

docs(accordion): refine planning docs (#6269)

432f56c

Co-authored-by: Nikki Massaro <massaro@adobe.com>

chore: scaffold core package

09cd821

chore: scaffold swc package

bba2e18

chore: add Chevron300Icon for xl accordion

87bdc5e

chore: set up storybook story

570c138

chore: commit preview.ts updates

6e71c8d

feat: implement AccordionItem API and render template

bc7bf87

feat: implement Accordion API and propagation

f94b6ce

feat: implement open and toggle logic

3a4454b

feat: wire up dynamic heading levels

16dc689

feat: implement disabled item functionality

9b7ebc4

fix: handle space keyboard behavior (SWC-1487)

e2ce2a7

refactor: address missing migration-setup items

24dd4bf

refactor: rename methods, align file names

5d4c209

refactor: typing, heading rendering, sizing

56ad095

refactor: move toggle() into base, smooth a11y behavior

fee852f

refactor: use assignedItems() helper

e8ed70d

test: add a11y tests

f2d5056

docs: add a11y docs

12da5fc

fix: freeze accordion open state when disabled

65b949b

feat: 1st-gen deprecation warnings/tests

c8033e6

docs: jsdoc comments

737bd62

chore(accordion): full fidelity feature update

1975d7e

Merge remote-tracking branch 'origin/swc-1857-1858-1859' into swc-186…

f0a99ee

…0-full-fidelity

rise-erpelding and others added 4 commits May 18, 2026 20:27

chore: changeset

c6495a5

fix: revert 1st-gen refactor work

329b428

chore(accordion): defer tests, deprecations, and changeset to part two

c6341e3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/swc-1857-1858-1859' into swc-186…

4b9fc09

…0-full-fidelity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: adjust .swc-AccordionItem-header custom properties

75b114e

rise-erpelding added Status:Addressing feedback PR owner is addressing review comments and will change label back to "Ready for review" when ready. 2nd gen These issues or PRs map to our 2nd generation work to modernizing infrastructure. labels May 26, 2026

rise-erpelding self-assigned this May 26, 2026

rise-erpelding added the Component:Accordion label May 26, 2026

rise-erpelding added 8 commits May 27, 2026 08:59

fix: adjust content inline padding custom properties

141d203

chore: update preview.ts and migration plan

920ec0c

feat: spacing on direct actions

99506f9

docs: improve ai skill

cd6b6c1

fix: use <p>s in stories and account for their margin

ad9eeb3

docs: add cssprops to jsdocs

2a2a19f

chore: rename custom props for accordion item

7e2e0c4

feat: handle panel animation

ae2ccb9

5t3ph reviewed May 27, 2026

View reviewed changes

5t3ph self-assigned this May 28, 2026

rise-erpelding added 4 commits May 28, 2026 10:37

fix: use better selectors

fb3d42f

docs: docs updates

b9e63b3

fix: handle quiet and corner radius tokens

9a53700

chore: update migration plan

ea68fc7

rise-erpelding requested a review from 5t3ph May 28, 2026 20:53

rise-erpelding added Status:Ready for re-review PR has had its feedback addressed and is once again ready for review. and removed Status:Addressing feedback PR owner is addressing review comments and will change label back to "Ready for review" when ready. labels May 28, 2026

rise-erpelding force-pushed the swc-1854/accordion-migration branch from f741213 to 4b0e1eb Compare May 29, 2026 19:17

5t3ph reviewed May 29, 2026

View reviewed changes

rise-erpelding and others added 2 commits May 29, 2026 14:38

chore(accordion): merge swc-1854/accordion-migration into full-fidelity

d46f00c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: feedback fixes

b3f64f3

5t3ph approved these changes May 29, 2026

View reviewed changes

rise-erpelding merged commit b6d8ccb into swc-1854/accordion-migration May 29, 2026
25 checks passed

rise-erpelding deleted the swc-1860-full-fidelity branch May 29, 2026 20:20

		--_swc-accordion-item-border-color: transparent;
		--_swc-accordion-item-header-corner-radius: var(--_swc-accordion-corner-radius);

Conversation

miwha-adobe commented May 18, 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

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

Uh oh!

Uh oh!

5t3ph May 27, 2026

Choose a reason for hiding this comment

Uh oh!

rise-erpelding May 28, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph May 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

5t3ph May 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

5t3ph May 27, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

5t3ph May 29, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

5t3ph May 29, 2026

Choose a reason for hiding this comment

Uh oh!

5t3ph left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

miwha-adobe commented May 18, 2026 •

edited

Loading

changeset-bot Bot commented May 18, 2026 •

edited

Loading

github-actions Bot commented May 18, 2026 •

edited

Loading

rise-erpelding May 28, 2026 •

edited

Loading