Modal close button is inaccessible

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

[gnapse]

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.

[gnapse]

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