Skip to content

Conversation

essjay05
Copy link
Contributor

Adds a visually hidden span as a child of the accordion header/button which has a generated id for the associated accordion content panel to reference if/when the accordion header/button is disabled. This should allow screen readers to have an active reference for aria-labelledby to reference.

Fixes b/438312273

@essjay05 essjay05 added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Aug 28, 2025
Copy link

github-actions bot commented Aug 28, 2025

Deployed dev-app for fa572e5 to: https://ng-dev-previews-comp--pr-angular-components-31804-dev-ewlwd9xn.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

…ove screen reader accessibility

Adds a visually hidden span as a child of the accordion header/button
which has a generated id for the associated accordion content panel to
reference if/when the accordion header/button is disabled. This should
allow screen readers to have an active reference for aria-labelledby to
reference.

Fixes b/438312273
…ccordion trigger parent element

Updates previous change to move the visually hidden span from being a
child of the accordion trigger button, to being a child of the parent
wrapping the accordion trigger. This prevents it from being hidden by
aria-disabled or disabled attributes when being a child of the trigger.
@essjay05 essjay05 force-pushed the add-proper-description-for-disabled-region branch from 7901e82 to 21ceb3c Compare August 29, 2025 16:24
…den span

Updates previous fix to add tabindex -1 to make the visually hidden
span not focusable.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dev-app preview When applied, previews of the dev-app are deployed to Firebase
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant