[a11y] QExpansionItem - use of 'aria-expanded' and 'aria-label'
See original GitHub issueWhat happened?
The expansion item currently does not provide an aria-expanded
indicating the state of the item. Also we should be able to add an aria-label
attribute to everything with a tabindex of 0 within that component so we can signal to screen readers what will happen when using that button/link.
What did you expect to happen?
Expansion item should be accessible
Reproduction URL
https://codepen.io/Mett-codepens/pen/wvjKjpx
How to reproduce?
Use the element inspector inside the codepen to see the issue. The element that toggles the expansion item should have an aria-expanded
property.
Flavour
UMD
Areas
Components (quasar)
Platforms/Browsers
Firefox, Chrome, Safari, Microsoft Edge, iOS, Android, Electron
Quasar info output
No response
Relevant log output
No response
Additional context
No response
Issue Analytics
- State:
- Created a year ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
aria-expanded - Accessibility - MDN Web Docs - Mozilla
The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child...
Read more >Using the WAI-ARIA aria-expanded state to mark expandable ...
The objective of this technique is to use the aria-expanded state to indicate whether regions of the content are collapsible, and to expose...
Read more >"aria-expanded" ARIA Label for Accessibility - Holistic SEO
The aria-expanded is an attribute that sets on an element to indicate if control is expanded or collapsed, and whether list elements are ......
Read more >Expansion Item - Quasar Framework
The QExpansionItem component allows the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that...
Read more >WAI-ARIA: aria-expanded (State) - DigitalA11Y
Used in Roles; Inherits into Roles; Value ... If the element with the aria-expanded attribute controls the expansion of another grouping ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
About
aria-expanded
I don’t know how we missed it 😦 Aboutaria-label
- it’s a little bit more complicated - have to think about it Thanks for reportingEnhancements will be available in Quasar v2.8.4 and 1.20.2