question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[a11y] QExpansionItem - use of 'aria-expanded' and 'aria-label'

See original GitHub issue

What 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:closed
  • Created a year ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
pdanpdancommented, Sep 7, 2022

About aria-expanded I don’t know how we missed it 😦 About aria-label - it’s a little bit more complicated - have to think about it Thanks for reporting

0reactions
rstoenescucommented, Sep 21, 2022

Enhancements will be available in Quasar v2.8.4 and 1.20.2

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found