react-native-aria-description

Cross-platform aria-description.

Maps aria-description to accessibilityHint on native and on web polyfills with aria-describedby to link to a hidden <p> containing the description.

If you pass aria-describedby on web as a prop it won't override it.

Installing

To install react-native-aria-description:

npm install react-native-aria-description

Using

Wrap your component with withAriaDescription:

import {View, Text, Button} from 'react-native'
+import {withAriaDescription} from 'react-native-aria-description'
+
+const CustomButton = withAriaDescription(Button, {web: {useEffect: true}})

export default function App() {
  return (
    <View>
      <Text>Open up App.tsx to start working on your app!</Text>
-      <Button
+      <CustomButton
        title="Press me"
-        accessibilityHint="Pressing this button will print a statement in the console."
+        aria-description="Pressing this button will print a statement in the console."
        onPress={() => console.log('button has been pressed')}
      />
    </View>
  )
}

{web: {useEffect: true}} is required on components that don't propagate the props into the web element.

If you want the web element to use aria-description instead of the aria-describedby polyfill then call with false: withAriaDescription(Button, {web: {replaceWithDescribedBy: false}}).