react / react/react-strict-dom

[a11y] `role` prop not fully supported on React Native

Open
#422 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
3.6k
Forks
206
PR merge metrics
No merged PRs in 30d

Description

Describe the issue

React Native requires accessible={true} prop to be set on View elements to announce role prop. However, the accessible prop is not exposed by RSD.

The only way in where role works correctly in RN with RSD is:

  1. Text elements behave as if accessible={true} by default
  2. When using Pressable, it sets accessible={true} on the renderer View element. Using onPress handler with RSD triggers using Pressable instead of plain View.

These two cases are frequent enough that they avoid the problem in most cases, but unfortunately, not all.

A simple solution would be to have the role prop (perhaps excluding none/presentation) set accessible to true. However, that creates an issue in the iOS environment, which generally does not support nested accessibility elements. If there are two nested Views with accessible prop, only one is recognized (the ancestor one).

Expected behavior

There should be a way of controlling accessible prop. Perhaps a reasonable default would be to set it to true when role is not none/presentation. However, given the iOS issue described above, there should be a way to disable the status of accessibility element (on a parent), as it might prevent children from receiving a11y focus.

Steps to reproduce
  1. Render <html.div role="heading"> element, without onClick handler.
  2. Compare with the case when you set onClick handler, with renders accessible prop through Pressable component
  3. Use a screen reader to navigate to the button
  4. Role is not being announced

https://github.com/user-attachments/assets/be386fe5-3a61-46fb-bd3c-00659801e6df

Notice the header role announced on elements with accessible prop, and not announced otherwise.

Test case

https://github.com/mdjastrzebski/rsd-role-repro

Additional comments

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked rsd-role-repro and compare the View and Pressable cases described in the issue, focusing on the role and accessible props. Verify behavior with a screen reader on iOS, including nested View elements; done means role announcements work for non-pressable elements while parent controls can prevent problematic nested accessibility elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
accessibility, mobile-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.