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.

ButtonWithPanel: add aria-expanded for a better accessibility

See original GitHub issue

The 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:closed
  • Created 3 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
CipherGirlcommented, Oct 2, 2020

Hey @CipherGirl, thanks for your message! As explained on Matrix we’d like to leave this bug for newcomers 😃

@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.

0reactions
canovacommented, Oct 5, 2020

@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.

Read more comments on GitHub >

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

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