Skip to content

Add support for accessibilityLiveRegion / aria-live #12515

Closed
@YajurG

Description

@YajurG

Add support for accessibilityLiveRegion / aria-live prop.

Documentation

accessibilityLiveRegion Documentation

Behavior

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:

Value Description
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

In the above example method addOne changes the state variable count. When the TouchableWithoutFeedback is triggered, TalkBack reads the text in the Text view because of its accessibilityLiveRegion="polite" property.

The accessibilityLiveRegion prop should set the value of LiveSetting property. The value of the LiveSetting will be a value in the LiveSetting enum (See here for documentation)

The value mapping should be:

accessibilityLiveRegion Value LiveSetting Value
"none" LiveSetting::Off
"polite" LiveSetting::Polite
"assertive" LiveSetting::Assertive

The default value of the prop should be "none".

Implementation on Paper

} else if (propertyName == "accessibilityLiveRegion") {
if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
auto value = propertyValue.AsString();
auto liveSetting = winrt::AutomationLiveSetting::Off;
if (value == "polite") {
liveSetting = winrt::AutomationLiveSetting::Polite;
} else if (value == "assertive") {
liveSetting = winrt::AutomationLiveSetting::Assertive;
}
element.SetValue(xaml::Automation::AutomationProperties::LiveSettingProperty(), winrt::box_value(liveSetting));
} else if (propertyValue.IsNull()) {
element.ClearValue(xaml::Automation::AutomationProperties::LiveSettingProperty());
}
AnnounceLiveRegionChangedIfNeeded(element);

AnnounceLiveRegionChangedIfNeeded(const xaml::FrameworkElement &element) {
if (xaml::Automation::AutomationProperties::GetLiveSetting(element) !=
xaml::Automation::Peers::AutomationLiveSetting::Off &&
!xaml::Automation::AutomationProperties::GetName(element).empty()) {
auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element);
if (nullptr != peer) {
peer.RaiseAutomationEvent(xaml::Automation::Peers::AutomationEvents::LiveRegionChanged);
}
}
}

Implementation Plan

We should:

  1. Take the value of the accessibilityLiveRegion prop and set the value of the LiveSetting property to match the prop value.

To Be Clarified

Unclear if an additional call is needed to UIA to indicate to the screen reader that the LiveSetting has changed and content may need to be reannounced or if UIA will handle this automatically.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions