You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
By MDN definitionaria-hidden element should remove given view and it's children from Accessibility APIs.
However, this prop only works partially:
Element
iOS
Android
View
✅
✅
Text
❌
❌
TextInput (non-editable)
❌
❌
Pressable
✅
✅
Image
✅
❌
Note: according to MDN, one should not use aria-hidden on focusable elements, hence we have non-editable TextInput above which is not focusable.
Tested case
<Viewaccessiblearia-hiddenaria-label="This should be hidden"><Text>View with aria-hidden</Text></View><Textaria-hiddenaria-label="This should be hidden">Textwitharia-hidden</Text><TextInputaria-hiddenplaceholder="TextInput with aria-hidden"aria-label="This should be hidden"/><Pressablearia-hiddenonPress={()=>console.log('Pressed')}aria-label="This should be hidden"><Text>Pressable with aria-hidden</Text></Pressable><Imagearia-hiddenaria-label="This should be hidden"source={{uri: 'https://reactnative.dev/img/homepage/dissection-dark.png',width: 100,height: 100}}/>
Description
By MDN definition
aria-hiddenelement should remove given view and it's children from Accessibility APIs.However, this prop only works partially:
ViewTextTextInput(non-editable)PressableImageNote: according to MDN, one should not use
aria-hiddenon focusable elements, hence we have non-editableTextInputabove which is not focusable.Tested case
In most cases this can be fixed by:
accessible={false}and/oraccessibilityElementsHiddenimportantForAccessibility="no-hide-descendants"Steps to reproduce
React Native Version
0.81.0
Affected Platforms
Runtime - Android, Runtime - iOS
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
https://github.com/mdjastrzebski/rn-repro-aria-hidden
Screenshots and Videos
iOS
AriaHidden.iOS.mp4
Android
AriaHidden.Android.mp4