react-swipeable-bottom-sheet icon indicating copy to clipboard operation
react-swipeable-bottom-sheet copied to clipboard

Accessibility: Content in BottomSheet is hidden from screen readers

Open fymmot opened this issue 3 years ago • 0 comments

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.

image

fymmot avatar Jul 07 '21 10:07 fymmot