Skip to content

fix class attr warning for SnackPlayer and on multiple pages #4721

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cortinico merged 1 commit into from
Aug 14, 2025
Merged

fix class attr warning for SnackPlayer and on multiple pages #4721

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
40 changes: 20 additions & 20 deletions docs/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ To use, set the `accessibilityLabel` property to a custom string on your View, T

In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

### `accessibilityLabelledBy` <div class="label android">Android</div>
### `accessibilityLabelledBy` <div className="label android">Android</div>

A reference to another element [nativeID](view.md#nativeid) used to build complex forms.
The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:
Expand Down Expand Up @@ -83,15 +83,15 @@ Provide the `accessibilityHint` property a custom string on your View, Text, or
</TouchableOpacity>
```

<div class="label ios basic">iOS</div>
<div className="label ios basic">iOS</div>

In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for `accessibilityHint` in the [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint)

<div class="label android basic">Android</div>
<div className="label android basic">Android</div>

In the above example, TalkBack will read the hint after the label. At this time, hints cannot be turned off on Android.

### `accessibilityLanguage` <div class="label ios">iOS</div>
### `accessibilityLanguage` <div className="label ios">iOS</div>

By using the `accessibilityLanguage` property, the screen reader will understand which language to use while reading the element's **label**, **value**, and **hint**. The provided string value must follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).

Expand All @@ -104,11 +104,11 @@ By using the `accessibilityLanguage` property, the screen reader will understand
</View>
```

### `accessibilityIgnoresInvertColors` <div class="label ios">iOS</div>
### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>

Inverting screen colors is an accessibility feature available in iOS and iPadOS for people with color blindness, low vision, or vision impairment. If there's a view you don't want to invert when this setting is on, possibly a photo, set this property to `true`.

### `accessibilityLiveRegion` <div class="label android">Android</div>
### `accessibilityLiveRegion` <div className="label android">Android</div>

When components dynamically change, we want TalkBack to alert the end user. This is made possible by the `accessibilityLiveRegion` property. It can be set to `none`, `polite`, and `assertive`:

Expand Down Expand Up @@ -165,13 +165,13 @@ In the above example method `addOne` changes the state variable `count`. When th
- **toolbar** Used to represent a toolbar (a container of action buttons or components).
- **grid** Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to Android's GridView.

### `accessibilityShowsLargeContentViewer` <div class="label ios">iOS</div>
### `accessibilityShowsLargeContentViewer` <div className="label ios">iOS</div>

A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.

Available in iOS 13.0 and later.

### `accessibilityLargeContentTitle` <div class="label ios">iOS</div>
### `accessibilityLargeContentTitle` <div className="label ios">iOS</div>

A string that will be used as the title of the large content viewer when it is shown.

Expand Down Expand Up @@ -214,13 +214,13 @@ Represents the current value of a component. It can be a textual description of
| now | The current value of this component's range. | integer | No |
| text | A textual description of this component's value. Will override `min`, `now`, and `max` if set. | string | No |

### `accessibilityViewIsModal` <div class="label ios">iOS</div>
### `accessibilityViewIsModal` <div className="label ios">iOS</div>

A boolean value that indicates whether VoiceOver should ignore the elements within views that are siblings of the receiver.

For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in view `A`. On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`.

### `accessibilityElementsHidden` <div class="label ios">iOS</div>
### `accessibilityElementsHidden` <div className="label ios">iOS</div>

A boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.

Expand Down Expand Up @@ -292,7 +292,7 @@ Defines a string value that labels an interactive element.
| ------ |
| string |

### `aria-labelledby` <div class="label android">Android</div>
### `aria-labelledby` <div className="label android">Android</div>

Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:

Expand All @@ -307,7 +307,7 @@ Identifies the element that labels the element it is applied to. The value of `a
| ------ |
| string |

### `aria-live` <div class="label android">Android</div>
### `aria-live` <div className="label android">Android</div>

Indicates that an element will be updated and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Expand All @@ -321,7 +321,7 @@ Indicates that an element will be updated and describes the types of updates the

---

### `aria-modal` <div class="label ios">iOS</div>
### `aria-modal` <div className="label ios">iOS</div>

Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

Expand All @@ -337,7 +337,7 @@ Indicates whether a selectable element is currently selected or not.
| ------- |
| boolean |

### `importantForAccessibility` <div class="label android">Android</div>
### `importantForAccessibility` <div className="label android">Android</div>

In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children).

Expand All @@ -358,15 +358,15 @@ In the case of two overlapping UI components with the same parent, default acces

In the above example, the `yellow` layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.

### `onAccessibilityEscape` <div class="label ios">iOS</div>
### `onAccessibilityEscape` <div className="label ios">iOS</div>

Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.

### `onAccessibilityTap` <div class="label ios">iOS</div>
### `onAccessibilityTap` <div className="label ios">iOS</div>

Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.

### `onMagicTap` <div class="label ios">iOS</div>
### `onMagicTap` <div className="label ios">iOS</div>

Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does.

Expand Down Expand Up @@ -464,7 +464,7 @@ To handle action requests, a component must implement an `onAccessibilityAction`

The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](accessibilityinfo) for details.

## Sending Accessibility Events <div class="label android">Android</div>
## Sending Accessibility Events <div className="label android">Android</div>

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: a view tag and a type of event. The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`.

Expand All @@ -479,7 +479,7 @@ if (Platform.OS === 'android') {
}
```

## Testing TalkBack Support <div class="label android">Android</div>
## Testing TalkBack Support <div className="label android">Android</div>

To enable TalkBack, go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the "Use service" switch to enable or disable it.

Expand All @@ -499,7 +499,7 @@ adb shell settings put secure enabled_accessibility_services com.android.talkbac
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
```

## Testing VoiceOver Support <div class="label ios">iOS</div>
## Testing VoiceOver Support <div className="label ios">iOS</div>

To enable VoiceOver on your iOS or iPadOS device, go to the Settings app, tap General, then Accessibility. There you will find many tools available for people to enable their devices to be more usable, including VoiceOver. To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.

Expand Down
Loading