Accessibility: Content in BottomSheet is hidden from screen readers - Githubissues

manufont / react-swipeable-bottom-sheet

A swipeable material's bottom sheet implementation, using react-swipeable-views

MIT License

131 stars 36 forks source link

Accessibility: Content in BottomSheet is hidden from screen readers #24

Open fymmot opened 3 years ago

fymmot commented 3 years ago

There is an accessibility problem with the current implementation affecting visually impaired screen reader users.

When the bottom sheet is expanded, the attribute aria-hidden=true is set on the container element. This effectively hides everything from the screen reader, making it inaccessible.

How to reproduce

Go to the Fullscreen example (https://manufont.github.io/react-swipeable-bottom-sheet/fullscreen.html )
Start a screen reader, e.g. VoiceOver
Navigate to the "Open" button and activate it

Expected behavior

The bottom sheet is expanded and the screen reader will start reading its content.

Actual behavior

The bottom sheet is expanded
The screen reader cannot find any content.