https://github.com/sjwall/react-native-aria-description

Higher-Order Component to map aria-description to accessibilityHint, with web compatibility
https://github.com/sjwall/react-native-aria-description

aria aria-describedby aria-description react-native

Last synced: 5 months ago
JSON representation

Higher-Order Component to map aria-description to accessibilityHint, with web compatibility

• Host: GitHub
• URL: https://github.com/sjwall/react-native-aria-description
• Owner: sjwall
• License: mit
• Created: 2025-01-22T11:55:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-24T15:56:00.000Z (over 1 year ago)
• Last Synced: 2025-09-14T05:01:36.446Z (11 months ago)
• Topics: aria, aria-describedby, aria-description, react-native
• Language: TypeScript
• Homepage:
• Size: 211 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-aria-description



  Cross-platform aria-description.



[![npm version](https://badge.fury.io/js/react-native-aria-description.svg)][npm]

[![npm downloads](https://img.shields.io/npm/dw/react-native-aria-description?logo=npm&label=NPM%20downloads&cacheSeconds=3600)][npm]

[![GitHub license](https://img.shields.io/github/license/sjwall/react-native-aria-description)][license]

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)][pr]

Maps [aria-description](https://w3c.github.io/aria/#aria-description) to [accessibilityHint](https://reactnative.dev/docs/accessibility#accessibilityhint) on native and on web polyfills with [aria-describedby](https://w3c.github.io/aria/#aria-describedby) to link to a hidden `
` 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:

```bash

npm install react-native-aria-description

```

## Using

Wrap your component with `withAriaDescription`:

```diff

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 (

    

      Open up App.tsx to start working on your app!

-       console.log('button has been pressed')}

      />

    

  )

}

```

`{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}})`.

[license]: https://github.com/sjwall/react-native-aria-description/blob/main/LICENSE

[npm]: https://www.npmjs.com/package/react-native-aria-description

[pr]: http://makeapullrequest.com