Skip to content

fix(accordion): mark an expanded item that cannot collapse as aria-disabled - #3494

Open
jsabutis wants to merge 1 commit into
chakra-ui:mainfrom
jsabutis:fix/accordion-locked-aria-disabled
Open

jsabutis wants to merge 1 commit into
chakra-ui:mainfrom
jsabutis:fix/accordion-locked-aria-disabled

Conversation

@jsabutis

Copy link
Copy Markdown
Contributor

Closes #3493

Description

In a single, non-collapsible accordion, the expanded item's trigger cannot collapse it, but it did not set aria-disabled. The WAI-ARIA accordion pattern asks for aria-disabled="true" in that case.

Current behavior

The expanded trigger announces as an active button, and activating it does nothing.

New behavior

  • The trigger gets aria-disabled="true" while its item is expanded and the accordion is neither collapsible nor multiple.
  • Disabled items are unchanged and keep only the native disabled attribute.
  • Added e2e tests for the locked and collapsible cases. The locked test fails on main and passes with the fix.
  • The existing "clicking the same trigger again" test now uses a forced click, since Playwright treats aria-disabled elements as not clickable.
  • Added a patch changeset for @zag-js/accordion.

Is this a breaking change (Yes/No):

No

Additional Information

data-disabled is not set on the locked trigger, so styles keyed on it are unaffected. Styles keyed on [aria-disabled] would now match the open trigger.

Accordion e2e tests pass on React (12 of 12). Typecheck, eslint and prettier pass on the changed files.

…sabled

In a single accordion that is not collapsible, activating the trigger
of the expanded item does nothing. The trigger still announced itself
as an active, expanded button, so screen reader users had no signal
that it could not be collapsed. The WAI-ARIA accordion pattern asks for
aria-disabled="true" on that trigger.

Set aria-disabled on the trigger when the item is expanded and the
accordion is neither collapsible nor multiple. Disabled items keep the
native disabled attribute only. The existing test that clicks the open
trigger again now uses a forced click, since Playwright treats
aria-disabled elements as not clickable.

Fixes chakra-ui#3493

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
zag-nextjs Ready Ready Preview Oct 19, 2026 9:35pm UTC
zag-solid Ready Ready Preview Oct 19, 2026 9:35pm UTC
zag-svelte Ready Ready Preview Oct 19, 2026 9:35pm UTC
zag-vue Ready Ready Preview Oct 19, 2026 9:35pm UTC
1 Skipped Deployment
Project Deployment Actions Updated
zag-website Ignored Ignored Preview Oct 19, 2026 9:35pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Oct 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e5488b6

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

This PR includes changesets to release 85 packages
Name Type
@zag-js/accordion Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/docs Patch
@zag-js/preact Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/svelte Patch
@zag-js/vanilla Patch
@zag-js/vue Patch
@zag-js/angle-slider Patch
@zag-js/async-list Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/cascade-select Patch
@zag-js/checkbox Patch
@zag-js/clipboard Patch
@zag-js/collapsible Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-input Patch
@zag-js/date-picker Patch
@zag-js/dialog Patch
@zag-js/drawer Patch
@zag-js/editable Patch
@zag-js/file-upload Patch
@zag-js/floating-panel Patch
@zag-js/hover-card Patch
@zag-js/image-cropper Patch
@zag-js/listbox Patch
@zag-js/marquee Patch
@zag-js/menu Patch
@zag-js/navigation-menu Patch
@zag-js/number-input Patch
@zag-js/pagination Patch
@zag-js/password-input Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/progress Patch
@zag-js/qr-code Patch
@zag-js/radio-group Patch
@zag-js/rating-group Patch
@zag-js/scroll-area Patch
@zag-js/select Patch
@zag-js/signature-pad Patch
@zag-js/slider Patch
@zag-js/splitter Patch
@zag-js/steps Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/timer Patch
@zag-js/toast Patch
@zag-js/toc Patch
@zag-js/toggle-group Patch
@zag-js/toggle Patch
@zag-js/tooltip Patch
@zag-js/tour Patch
@zag-js/tree-view Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-query Patch
@zag-js/file-utils Patch
@zag-js/focus-trap Patch
@zag-js/focus-visible Patch
@zag-js/highlight-word Patch
@zag-js/hotkeys Patch
@zag-js/i18n-utils Patch
@zag-js/interact-outside Patch
@zag-js/json-tree-utils Patch
@zag-js/live-region Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/scroll-snap Patch
@zag-js/stringify-state 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

This branch was successfully deployed

4 active deployments
Preview – zag-solid — e5488b67 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-nextjs — e5488b67 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-vue — e5488b67 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-svelte — e5488b67 Deployed Oct 19, 2026 by vercel[bot]
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.

Accordion: an expanded item that cannot collapse is missing aria-disabled

1 participant