Skip to content

Latest commit

 

History

History
100 lines (73 loc) · 3.17 KB

has-valid-accessibility-ignores-invert-colors.md

File metadata and controls

100 lines (73 loc) · 3.17 KB
Raw

has-valid-accessibility-ignores-invert-colors

The accessibilityIgnoresInvertColors property can be used to tell iOS whether or not to invert colors on a view (including all of its subviews) when the Invert Colors accessibility feature is enabled.

This feature can be enabled on iOS via: Settings -> General -> Accessibility -> Display Accommodations -> Invert Colors -> [Smart Invert or Classic Invert]. Note that the Smart Invert feature will avoid inverting the colors of images and other media without need for accessibilityIgnoresInvertColors, but Classic Invert will still invert colors on media without accessibilityIgnoresInvertColors.

accessibilityIgnoresInvertColors is usually used on elements like <Image /> -- however in some cases it may be used on a parent wrapper.

For example, both of the following snippets are valid (and will achieve the same result in practice).

<View>
  <Image accessibilityIgnoresInvertColors={true} />
</View>
<View accessibilityIgnoresInvertColors={true}>
  <Image />
</View>

Values may be one of the following (boolean)

  • true: colors of everything in this view will not be inverted when color inversion is enabled
  • false: the default value (unless the view is nested inside a view with accessibilityIgnoresInvertColors={true}). Colors in everything contained in this view may be inverted

References

  1. React Native accessibility documentation
  2. accessibilityIgnoresInvertColors Apple developer docs

Rule details

By default, the rule will only check <Image />.

If you would like to check additional components which might require accessibilityIgnoresInvertColors, you can pass an options object which contains invertableComponents in your ESLint config.

invertableComponents should be an Array of component names as strings.

"react-native-a11y/has-valid-accessibility-ignores-invert-colors": [
  "error",
  {
    "invertableComponents": [
      "FastImage",
      "MyCustomComponent",
      ...
    ]
  }
]
{/* invalid, rule will error */}
<FastImage />

<View>
  <FastImage />
</View>

{/* valid */}
<FastImage accessibilityIgnoresInvertColors />

<View accessibilityIgnoresInvertColors>
  <FastImage />
</View>

These extra invertableComponents will also be checked in addition to <Image />.

Succeed

<View accessibilityIgnoresInvertColors={true}>
  <Image
    style={{width: 50, height: 50}}
    source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
  />
</View>

<View accessibilityIgnoresInvertColors></View>

<View accessibilityIgnoresInvertColors={false}></View>

<ScrollView accessibilityIgnoresInvertColors={false}></ScrollView>

Fail

<View accessibilityIgnoresInvertColors="true">
  <Image
    style={{width: 50, height: 50}}
    source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
  />
</View>

<View accessibilityIgnoresInvertColors={{value: true}}></View>

<View accessibilityIgnoresInvertColors={0}></View>