Skip to content

Drop Collapse trigger .collapsed state and rely on aria-expanded - #42771

Open
mdo wants to merge 1 commit into
v6-devfrom
mdo/drop-collapsed-class
Open

Drop Collapse trigger .collapsed state and rely on aria-expanded#42771
mdo wants to merge 1 commit into
v6-devfrom
mdo/drop-collapsed-class

Conversation

@mdo

@mdo mdo commented Jul 28, 2026

Copy link
Copy Markdown
Member

Rebase of #42740 onto the current v6-dev, where the JavaScript source has moved to TypeScript.

  • Collapse no longer toggles a .collapsed class on trigger elements. aria-expanded is the only state signal.
  • Renamed _addAriaAndCollapsedClass to _setAriaExpanded in js/src/collapse.ts and dropped the CLASS_NAME_COLLAPSED constant.
  • Dropped the .collapsed assertions from js/tests/unit/collapse.spec.js and renamed the three test titles that described the class.
  • Removed class="collapsed" from the collapse visual test and from the cheatsheet and sidebars examples.
  • Switched cheatsheet.js from a .collapsed class check to an aria-expanded check.
  • Documented the change in the collapse Accessibility section and the v6 migration guide.

The sidebars example already styled its chevron with .btn-toggle[aria-expanded="true"], so no CSS changes were needed. Its #home-collapse button previously carried both .collapsed and aria-expanded="true"; that contradiction is now gone.

Supersedes #42740

The `.collapsed` class duplicated the state that `aria-expanded` already
carries. Two signals for one thing can drift apart in custom selectors
and scripts. Collapse now sets `aria-expanded` only, so
`_addAriaAndCollapsedClass` becomes `_setAriaExpanded`.

Update the collapse docs, the migration guide, and the cheatsheet and
sidebars examples to key trigger state off `aria-expanded`. The sidebars
example already styled its chevron with `.btn-toggle[aria-expanded]`, so
its markup loses a class that contradicted the attribute.

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants