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.

Accessibility improvements

See original GitHub issue

It seems like the aria-hidden attribute cannot be overwritten. It would be great if consumers could either overwrite aria-hidden to undefined or if this component would be updated with some accessibility improvements.

Code example

Example taken from: https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

<p class="button">
    <button id="button1" class="buttonControl" aria-controls="t1" aria-expanded="false"><span>Show</span> Topic 1</button>
</p>

<div id="t1" class="topic" role="region" tabindex="-1" >
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

Additional context If you’d like a pull request, I can open one with either approach:

  1. Allow aria-hidden to be overwritten.
  2. Remove aria-hidden and add aria-expanded and aria-controls attributes.

Consumers should probably be able to control role and tabIndex but the accessibility attributes seem to make sense here given the simplicity and intended use of the component.

Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
tylertadejcommented, Aug 1, 2020

Awesome. Thank you for the quick implementation!

1reaction
Stankocommented, Aug 1, 2020

Published in 2.0.23 🎉 https://github.com/Stanko/react-animate-height/commit/d6e10162805da90cc1a0fde3163f7309cb822600

Let me know if anything else should be added.

Read more comments on GitHub >

github_iconTop Results From Across the Web

10 web accessibility improvements you can make right now
10 web accessibility improvements you can make right now · Caption your website's images (easy) · Use header tags to organize documents (easy)....
Read more >
2022 ADA Accessibility Improvements - City of Sioux Falls
Work will include ADA accessible curb ramps, landings, and fillet sections, ADA accessible sidewalks with corresponding approach and driveway ...
Read more >
How do I make my site more accessible? - Elementor
Accessibility Improvements is a stable experiment and is active by default on new websites. The Accessibility Improvement experiment aims to improve ...
Read more >
Accessibility Improvements | Facilities and Operations
Information related to our Operations department that was on facilities.columbia.edu - including maintenance services, lower campus lawn status, building ...
Read more >
WordPress 6.0 Accessibility Improvements
Accessibility improvements to the query pagination block, including adding an aria label and putting block attributes within a element.
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