search

seb-oss / green

Green is an open-source design system built by SEB.
https://storybook.seb.io/
Apache License 2.0
33 stars 47 forks source link

Modal: Aria hidden, aria-describe & focus #710

Open daneriseb opened 1 year ago

daneriseb commented 1 year ago

This was reported after accessibility testing of our MFE:

There are some things that need to be done to improve the experience of using a screen reader for modals.

Upon clicking the modal-activating button, all the main content should get an aria-hidden='true' attribute so that a screen reader will no longer read any of the content. Give the modal an ARIA aria-describedby attribute which will be linked to the id of some visually hidden text which describes the modal’s function, and how to exit it. The modal needs to be focused in such a way that TAB only highlights inputs within the modal. The header of the modal needs to be first in tab order.

daneriseb commented 1 year ago

I found a good demo of accessible (React) modals: https://github.com/davidtheclark/react-aria-modal