ButtonWithPanel: add aria-expanded for a better accessibility
See original GitHub issueThe goal of this bug is to add the attribute aria-expanded
to our ButtonWithPanel
implementation. You can read more about this attribute on the W3C page or Marco Zehe’s blog post.
In this issue we’ll focus on aria-expanded
only and not deal with aria-controls
.
This should happen in https://github.com/firefox-devtools/profiler/blob/2232f077181f4ccd1c21821a8da9a94e9c53c267/src/components/shared/ButtonWithPanel/index.js#L138-L145
The attribute aria-expanded
should be false
when the panel is closed and true
when the panel is open. Probably adding aria-expanded={String(open)}
should just work.
Please take care that tests are updated (probably some snapshots will need to be updated).
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Using the WAI-ARIA aria-expanded state to mark expandable ...
A button hides or exposes a paragraph of text on the page. The state of the paragraph is represented by the attribute aria-expanded...
Read more >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 >Marking elements expandable using aria-expanded - ADG
Marking elements expandable using aria-expanded. ARIA provides an attribute which allows to describe the expandability status of an element.
Read more >Accessibility: Add aria-expanded and aria-controls into panel ...
For panels that has expand/collapse buttons aria-expanded and aria-controls attributes are required.
Read more >Accordions | Accessibility Guidelines
The key to making accordions accessible is to toggle some ARIA properties and states on user click or focus events (e.g. toggle aria-hidden...
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
@julienw Sure, I actually saw the updated contributing.md about converting good first issues to outreachy later. It was inconvenient of me commenting in this issue. I’m sorry. I’m looking forward to contribute on other issues.
@thejozhou sorry, but it looks like the issue is resolved already. Would you mind taking another “outreachy onboarding” issue?
@maulik1729 please do not claim an issue in the future if someone else has recently claimed it already.