Skip to content

Over-riding accessibilityLiveRegion in child component #6

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

Closed
wants to merge 1 commit into from
Closed

Over-riding accessibilityLiveRegion in child component #6

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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,11 +304,16 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
if (newViewProps.accessibilityLiveRegion == AccessibilityLiveRegion::None) {
newValueLiveRegion = @"none";
};

for (RCTViewComponentView *subview in self.subviews) {
// add logic to over-ride behaviour when subview accessibilityLiveRegion is Polite or Assertive
if ([newValueLiveRegion length] != 0) {
subview.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;

if (![newValueLiveRegion isEqual:@"none"] && [newValueLiveRegion length] != 0) {
for (RCTViewComponentView *subview in self.subviews) {
// add logic to over-ride behaviour when subview accessibilityLiveRegion is Polite or Assertive
auto const &childAccessibilityProps = *std::static_pointer_cast<AccessibilityProps const>(_props);
if (childAccessibilityProps.accessibilityLiveRegion != AccessibilityLiveRegion::None) {
break;
} else {
subview.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;
}
}
}
self.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;
Expand All @@ -318,7 +323,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
NSMutableArray *accessibilityLiveRegionAnnouncementUpdate = [accessibilityLiveRegionAnnouncement mutableCopy];
BOOL accessibilityLiveRegionEnabledFromParent = self.accessibilityLiveRegionAnnouncementType && ![self.accessibilityLiveRegionAnnouncementType isEqual:@"none"];
BOOL isReactRootView = RCTIsReactRootView(self.reactTag);
BOOL accessibilityLiveRegionEnabled = newViewProps.accessibilityLiveRegion != AccessibilityLiveRegion::None;
BOOL accessibilityLiveRegionEnabled = newViewProps.accessible && newViewProps.accessibilityLiveRegion != AccessibilityLiveRegion::None;
BOOL shouldAnnounceLiveRegionChanges = (accessibilityLiveRegionEnabledFromParent || accessibilityLiveRegionEnabled) && !isReactRootView;

// `accessibilityLabel`
Expand Down
27 changes: 14 additions & 13 deletions packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1588,16 +1588,7 @@ function AccessibilityLiveRegion(): React.Node {
const [liveRegion, setLiveRegion] = React.useState(true);
return (
<>
<RNTesterBlock title="LiveRegion with Text Component">
<TouchableWithoutFeedback
onPress={() => setCount(previousCount => previousCount + 1)}>
<View style={styles.embedded}>
<Text>Click me</Text>
</View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">Clicked {count} times</Text>
</RNTesterBlock>
<RNTesterBlock title="LiveRegion with child component">
<RNTesterBlock title="Child liveRegion assertive stops the parent component announcement">
<TouchableWithoutFeedback
onPress={() =>
setLiveRegion(liveRegionEnabled => !liveRegionEnabled)
Expand All @@ -1617,9 +1608,10 @@ function AccessibilityLiveRegion(): React.Node {
<View
accessible={true}
focusable={true}
accessibilityLiveRegion={liveRegion ? 'assertive' : null}>
<TouchableOpacity
accessibilityLabel={enabled ? 'my label' : null}
accessibilityLabel={enabled ? 'my parent' : null}
accessibilityLiveRegion={liveRegion ? 'polite' : null}>
<View
accessible={false}
accessibilityState={{disabled: enabled}}
accessibilityHint={enabled ? 'my hint' : null}
accessibilityValue={enabled ? {now: 5, min: 1, max: 10} : {}}
Expand All @@ -1631,6 +1623,15 @@ function AccessibilityLiveRegion(): React.Node {
/>
</View>
</RNTesterBlock>
<RNTesterBlock title="LiveRegion with Text Component">
<TouchableWithoutFeedback
onPress={() => setCount(previousCount => previousCount + 1)}>
<View style={styles.embedded}>
<Text>Click me</Text>
</View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">Clicked {count} times</Text>
</RNTesterBlock>
</>
);
}
Expand Down