Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: Adding pass-through for accessibility props. #21

Merged
merged 2 commits into from
Sep 9, 2023

Conversation

meatnordrink
Copy link
Contributor

@meatnordrink meatnordrink commented Jul 18, 2023

Swiping presents accessibility challenges. One of these challenges is that screen reader users may not be aware that content is swipeable, as the visual indication (Dots, in this case), is invisible to them.

This PR adds the React Nativeaccessible and accessibilityLabel props for pass-through to the <View> container within the <Dots> element. This allows devs to make the dots accessible by screen reader, and to add an accessible label indicating that there is swipeable content on the page.

Note that putting these properites on the pager view itself generally doesn't work, for the following reasons:

  1. It's semantically incorrect. Pager views don't, by themselves, tell sighted users that there is swipeable content. Generally there are other visual indicators (arrow buttons or dots). To maintain parity between the sighted and assistive experience, visual indicators for sighted users should also be what communicates to users of assistive technology that there is swipeable content.
  2. VoiceOver, on iOS, will treat any element that has accessible={true} as a single element, and not read or allow a screen reader to access any content inside. So placing an accessible prop and accessibilityLabel on the pager view itself results in loss of access to the content within the pager for users of assistive technology.

Adding an accessible label to the <Dots> element is a superior solution. And while it can already be done by adding a wrapper <View> around the <Dots> package, that results in an unnecessary <View> in the page hierarchy. This PR allows adding accessibility props without adding an additional <View>.

`accessible`, `accessibilityLabel` for `View` container.
@yasaricli
Copy link
Owner

Thanks @meatnordrink, I will check it out and get back to you as soon as possible.

@yasaricli yasaricli merged commit cd0c353 into yasaricli:master Sep 9, 2023
@yasaricli yasaricli self-assigned this Sep 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants