Repository navigation
fix(Accordion): announce header content in the expected order - #1769
MurilloLeoni wants to merge 6 commits into
Conversation
Preview deploymentStep 2/3 — Important A reviewer must approve the workflow run before it can access deploy secrets. |
|
Is this change updated in specs? |
|
|
||
| const assetText = getAssetText(props.asset); | ||
|
|
||
| const computedAriaLabel = ariaLabel ?? [props.title, assetText].filter(Boolean).join(' '); |
There was a problem hiding this comment.
By removing the calculated label, we also stop displaying the asset’s alt/aria-label, because its container in HeaderContent has the aria-hidden attribute. Is it intended that it should now always be purely decorative? If it contains relevant information, we fix the way the subtitle is read but lose that information.
There was a problem hiding this comment.
Thanks for the review! Yes, this is intentional. According to the accessibility spec, the asset on the left is decorative and should be ignored by screen readers. The button’s default accessible name is derived from its header text in the specified order: title, subtitle, detail, and right-side slot. Custom aria-label and aria-labelledby values are still supported.
I agree that a test for the button’s accessible name would help prevent regressions. I’ll add one covering the header text and its expected order.
|
Shall we add a test with a title, subtitle, detail and content in the ‘right’ column, checking the full accessible name and its order using |
Hi! |
This branch has not been deployed
4 participants
This PR updates the
Accordioncomponent so screen readers announce the full header text when navigating to an accordion button, following the specified reading order.Changes
aria-labelthat limited the button’s accessible name to the title and asset text.Related