7 posts tagged with "Accessibility"

Every core component accepts role and the aria-* props in its types, but in React Native 0.88 several components drop some of them without a warning, while the accessibility* form of the same prop works.

On iOS, <ActivityIndicator accessibilityLabel="Loading orders" /> is exposed to VoiceOver with the label "In progress", the default label of the native indicator. The label goes to a wrapper view that is not an accessibility element. Android uses the label.

Switch, ScrollView and ActivityIndicator accept all View props in their types and docs, but in React Native 0.88 they pass aria-*, id and tabIndex to the native side unconverted, where nothing reads them. <Switch aria-label="Wi-Fi" /> has no name; accessibilityLabel works.

Text accepts aria-live in its types, but in React Native 0.88 it does not convert it to accessibilityLiveRegion, as View does. A counter in <Text aria-live="polite"> is never announced by TalkBack; the same counter with accessibilityLiveRegion="polite" is announced on every change.

Touchable* build their native view from a fixed list of props, and in React Native 0.88 role is on none of the lists. <TouchableOpacity role="button"> has no role; accessibilityRole="button" works. TouchableWithoutFeedback also drops aria-label, and TouchableHighlight drops aria-checked and the other aria-* state props.

The View docs list aria-modal as an iOS prop that takes precedence over accessibilityViewIsModal. In React Native 0.88 View does not pass it to the native view: with aria-modal VoiceOver still reaches the background of a custom dialog, with accessibilityViewIsModal it does not.

A View with aria-live or accessibilityLiveRegion and no style (or only layout styles) is removed from the native tree by view flattening in React Native 0.88, so the live region does not exist and TalkBack announces nothing. collapsable={false} keeps the view and the live region works.