react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

feat(accessibility): add inert to forwardedProps

Open theonetheycallneo opened this issue 8 months ago • 1 comments

One thing we found working on the accessibility of our components is that simply putting aria-hidden on a parent element on web is problematic. If you have certain elements inside of this component like text inputs, the browser will log errors if you put aria-hidden on a parent element without it also being on all the individual children.

You have to put the inert attribute on the parent to actually hide the entire tree of children from the screen reader properly.

Inert reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

This will help trap and disable underneath components with other libraries like navigation: https://github.com/react-navigation/react-navigation/pull/12541

theonetheycallneo avatar Apr 15 '25 17:04 theonetheycallneo

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 15e7505d6ff3eb574e2343fb29d3b9e3b1388610:

Sandbox Source
react-native-web-examples Configuration

codesandbox-ci[bot] avatar Apr 15 '25 17:04 codesandbox-ci[bot]

react-navigation cut over to properly use aria labels: https://github.com/react-navigation/react-navigation/pull/11848

this should be good to merge now

theonetheycallneo avatar Jul 11 '25 13:07 theonetheycallneo

@necolas please merge this, it's hugely helpful for accessibility.

trcoffman avatar Jul 11 '25 15:07 trcoffman

@necolas could you please take a look at this?

trcoffman avatar Sep 10 '25 20:09 trcoffman