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.

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

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 add aria-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:closed
  • Created 2 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
gnapsecommented, Aug 26, 2021

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.

1reaction
gnapsecommented, Aug 19, 2021

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

Read more comments on GitHub >

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

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