feat: queue accessibility announcements on ios

facebook · Nov 21, 2021 · 25c8066 · 25c8066
1 parent 3d8b5a3
commit 25c8066
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 7 deletions.
diff --git a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
@@ -333,11 +333,17 @@ const AccessibilityInfo = {
    *
    * See https://reactnative.dev/docs/accessibilityinfo.html#announceforaccessibility
    */
-  announceForAccessibility(announcement: string): void {
+  announceForAccessibility(
+    announcement: string,
+    queue?: boolean = false,
+  ): void {
     if (Platform.OS === 'android') {
       NativeAccessibilityInfoAndroid?.announceForAccessibility(announcement);
     } else {
-      NativeAccessibilityManagerIOS?.announceForAccessibility(announcement);
+      NativeAccessibilityManagerIOS?.announceForAccessibility(
+        announcement,
+        queue,
+      );
     }
   },
 

diff --git a/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js b/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js
@@ -51,7 +51,7 @@ export interface Spec extends TurboModule {
     +accessibilityExtraExtraExtraLarge?: ?number,
   |}) => void;
   +setAccessibilityFocus: (reactTag: number) => void;
-  +announceForAccessibility: (announcement: string) => void;
+  +announceForAccessibility: (announcement: string, queue: boolean) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('AccessibilityManager'): ?Spec);
diff --git a/React/CoreModules/RCTAccessibilityManager.mm b/React/CoreModules/RCTAccessibilityManager.mm
@@ -296,9 +296,17 @@ static void setMultipliers(
   });
 }
 
-RCT_EXPORT_METHOD(announceForAccessibility : (NSString *)announcement)
+RCT_EXPORT_METHOD(announceForAccessibility : (NSString *)announcement queue : (BOOL)queue)
 {
-  UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, announcement);
+  if (@available(iOS 11.0, *)) {
+    NSDictionary *attrsDictionary = [NSDictionary dictionaryWithObject:@(queue)
+                                                                forKey:UIAccessibilitySpeechAttributeQueueAnnouncement];
+    NSAttributedString *announcementWithAttrs = [[NSAttributedString alloc] initWithString:announcement
+                                                                                attributes:attrsDictionary];
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, announcementWithAttrs);
+  } else {
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, announcement);
+  }
 }
 
 RCT_EXPORT_METHOD(getMultiplier : (RCTResponseSenderBlock)callback)

diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -864,10 +864,65 @@ class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
 
 class AnnounceForAccessibility extends React.Component<{}> {
   _handleOnPress = () =>
-    AccessibilityInfo.announceForAccessibility('Announcement Test');
+    setTimeout(
+      () => AccessibilityInfo.announceForAccessibility('Announcement Test'),
+      1000,
+    );
+
+  _handleOnPressQueued = () =>
+    setTimeout(
+      () =>
+        AccessibilityInfo.announceForAccessibility(
+          'Queued Announcement Test',
+          true,
+        ),
+      1000,
+    );
+
+  _handleOnPressQueueMultiple = () => {
+    setTimeout(
+      () =>
+        AccessibilityInfo.announceForAccessibility(
+          'First Queued Announcement Test',
+          true,
+        ),
+      1000,
+    );
+    setTimeout(
+      () =>
+        AccessibilityInfo.announceForAccessibility(
+          'Second Queued Announcement Test',
+          true,
+        ),
+      1100,
+    );
+    setTimeout(
+      () =>
+        AccessibilityInfo.announceForAccessibility(
+          'Third Queued Announcement Test',
+          true,
+        ),
+      1200,
+    );
+  };
 
   render(): React.Node {
-    return (
+    return Platform.OS === 'ios' ? (
+      <View>
+        <Button
+          onPress={this._handleOnPress}
+          title="Announce for Accessibility Immediately"
+        />
+        <Button
+          onPress={this._handleOnPressQueued}
+          title="Announce for Accessibility Queued"
+        />
+        <Button
+          onPress={this._handleOnPressQueueMultiple}
+          title="Announce for Accessibility Queue Multiple"
+        />
+      </View>
+    ) : (
       <View>
         <Button
           onPress={this._handleOnPress}