react / react/react-strict-dom
[a11y] `role` prop not fully supported on React Native
Nobody has claimed this yet.
- 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:
Textelements behave as ifaccessible={true}by default- When using
Pressable, it setsaccessible={true}on the rendererViewelement. UsingonPresshandler with RSD triggers usingPressableinstead of plainView.
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
- Render
<html.div role="heading">element, withoutonClickhandler. - Compare with the case when you set
onClickhandler, with rendersaccessibleprop throughPressablecomponent - Use a screen reader to navigate to the button
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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