Modal close button is inaccessible
See original GitHub issueš Bug report
Current behavior
When using a screen reader, focusing on the close button just says āUnlabelled imageā which gives no indication that it is a button, or what the button would do when interacted with.
Steps to reproduce the bug
- Enable VoiceOver or some similar screen reader
- On http://doist.github.io/reactist/?path=/story/components-modal--modal-header-only-story
- Click the button to open a modal
- Click the modal header, and press tab to focus on the close button
- VoiceOver announces that you are on an āUnlabeled imageā
Expected behavior
The user should be informed that they are focused on a close button.
Possible solutions
- Either use a
button
element for the close button, or addaria-role="button"
- Allow the Close label to be configured, or provide a default value (might not work for i18n)
Environment
@doist/reactist
version:9.2.0-beta.16
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Bootstrap close modal not working - Stack Overflow
The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of...
Read more >Add screen reader text for modal close button #1469 - GitHub
Currently screen readers read the close button of the modal as "times" or "button" which is inaccessible for visually impaired people.
Read more >Stop building inaccessible Modals (and how to fix them)
I found many inaccessible dialogs/modals across codebases. Mainly because the UI element ... <button id="close-btn">close</button> </dialog>
Read more >Search Modal Close button not working - BigCommerce Support
Hi guys, i am experiencing this issue and i cannot find a fix. Can anyone help with a search box close button not...
Read more >Modals | Accessibility Guidelines
Pressing the Close Modal button at the bottom of the modal will close the modal and bring you back to where you were...
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 Free
Top 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
The new modal does fix the issue. It is not yet merged, but you can close this if you want. It will be merged to beta by early next week at most.
Most probably, our modal is largely inaccessible, not only the close button. If thereās no other issue about it, Iād say we keep this issue as the one about making our modal accessible. Iām not sure if Iāll get to it this month, but both Craig and Frankie may be working in the design system components in future cycles, and this could be planned to be part of those efforts.
Weāll probably end up bringing the modal we use in Todoist, replace the Reactist one with that implementation, while also bringing the implementation closer to the design system components (e.g. using
Box
,Stack
, etc. for layout, using the design system css variables, etc.)