FormidableLabs / eslint-plugin-react-native-a11y

React Native specific accessibility linting rules.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add support for new web-inspired a11y props

leggomuhgreggo opened this issue · comments

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Code Sandbox link

No response

Bug report

Problem

The new web-inspired RN a11y props are not recognized by eslint-plugin-react-native-a11y rules.

Causes duplicate props to be added, with --fix

  25:5  error  Missing a11y props. Expected one of: accessibilityRole OR BOTH accessibilityLabel + accessibilityHint OR BOTH accessibilityActions + onAccessibilityAction  react-native-a11y/has-valid-accessibility-descriptors

image

Context

React Native 0.71 introduced "Web-inspired props for accessibility, styles, and events" [post]

Accessibility

We introduced ARIA props as alias to existing React Native accessibility props.

These props now exist on all core components of React Native:aria-label, aria-labelledby,aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow, and aria-valuetext.

We also introduced equivalent web behavior for: aria-hidden, aria-live, role, and tabIndex.

See this issue for more details.

Here's some info on the updates in react-native-web:
necolas/react-native-web#1112
https://github.com/necolas/react-native-web/releases/tag/0.19.0

Duplicate of #151