eslint-plugin-react-native-a11y icon indicating copy to clipboard operation
eslint-plugin-react-native-a11y copied to clipboard

Add support for new web-inspired a11y props

Open leggomuhgreggo opened this issue 1 year ago • 0 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Code of Conduct

  • [X] 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: https://github.com/necolas/react-native-web/issues/1112 https://github.com/necolas/react-native-web/releases/tag/0.19.0

leggomuhgreggo avatar Mar 07 '24 05:03 leggomuhgreggo