Repository: microsoft/react-native-gallery (ts)

Issue:
Bug 54060914: [React Native Gallery -> Clipboard]: Accessible name and visible name is defined incorrectly for ‘Copy text to the Clipboard’ button.
Build Details:
OS Version: Dev (OS Build 27695.1000)
App: React Native Gallery 
App Version: 1.0.18.0
React Native Windows Version: 0.75.0
AT: Screen Reader
 
Pre-Requisite:
Turn on Narrator (Ctrl + Win + Enter).
 
Repro-Steps:
Launch the React Native Gallery app.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘Clipboard’ button present under “System” group and invoke it.
Navigate to ‘Copy text to the Clipboard’ button and listen to narrator announcement.
Actual Result:
Accessible name and visible name is defined incorrectly for ‘Copy text to the Clipboard’ button, when user navigated to ‘Copy text to the Clipboard’ button, narrator is announcing as “Example copy text, button".
 
Note: Same issue is observed ‘Paste text from the Clipboard’ button.
 
Expected Result:
Accessible name and visible name should be defined properly for ‘Copy text to the Clipboard’ button and when user navigates to it, narrator should announce as “Copy text to the Clipboard, button".
 
User Impact:
Users with visual impairments who rely on screen reader will not be able to know the exact name of the button if accessible name and visible name are defined incorrectly, they may get confused if narrator is announcing different names.

Link to ADO bug: https://dev.azure.com/microsoft/OS/_workitems/edit/54060914
Bug 54061172: [React Native Gallery -> Clipboard]: Screen reader is not announcing the success message after activating the ‘Paste text from the Clipboard' button.
Build Details:
OS Version: Dev (OS Build 27695.1000)
App: React Native Gallery 
App Version: 1.0.18.0
React Native Windows Version: 0.75.0
AT: Screen Reader
 
Pre-Requisite:
Turn on Narrator (Ctrl + Win + Enter).
 
Repro-Steps:
Launch the React Native Gallery app.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘Clipboard’ button present under “System” group and invoke it.
Navigate to ‘Copy text to the Clipboard’ button and listen to narrator announcement.
Actual Result:
Upon activating 'Paste text from Clipboard' button, narrator fails to announce the success information to the user. When user invoke the ‘Paste text from Clipboard' button, narrator stays on mute.
 
Note: Same issue is observed upon activating ‘Copy text to the Clipboard' button.
 
Expected Result:
Narrator should announce the success information to the user after activating the 'Paste text from Clipboard' button and it should announce like "Text pasted from clipboard". So that, user can understand clearly.
 
User Impact:
Users with visual impairments who rely on screen reader will not be able to understand if the narrator is not announcing the status message after activating the button.
 
Link to ADO bug: https://dev.azure.com/microsoft/OS/_workitems/edit/54061172

Pull request description:
Change accessible name values and add accessibility announcements on Clipboard example page
## Description
Changes accessibilityLabel values to fix accessible names on buttons on Clipboard page. Adds accessibility announcement when pressing 'Copy to clipboard' and 'Paste to clipboard' buttons. 

### Why

Resolves #493
Resolves #494 

### What

Change accessibilityLabel values, and add accessibilityAnnouncement calls.

## Screenshots

Before:
![image](https://github.com/user-attachments/assets/d3062147-e23d-4639-959d-bd8b8b367146)

After:
![image](https://github.com/user-attachments/assets/1fab50c4-240e-418a-8f94-8d504a907c4f)

*Same applies to 'Paste text from clipboard' button
 ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-gallery/pull/506)

Patch:
diff --git a/src/components/CopyToClipboard.tsx b/src/components/CopyToClipboard.tsx
index d41a348..8f9d8bc 100644
--- a/src/components/CopyToClipboard.tsx
+++ b/src/components/CopyToClipboard.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import {Pressable, StyleSheet, PlatformColor, Text} from 'react-native';
+import {
+  AccessibilityInfo,
+  Pressable,
+  StyleSheet,
+  PlatformColor,
+  Text,
+} from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 const createButtonStyles = (isHovered: boolean, isPressing: boolean) =>
@@ -39,7 +45,10 @@ const CopyToClipboardButton = ({content}: CopyToClipboardButtonProps) => {
       accessibilityLabel={helpText}
       tooltip={helpText}
       style={styles.background}
-      onPress={() => Clipboard.setString(content)}
+      onPress={() => {
+        Clipboard.setString(content);
+        AccessibilityInfo.announceForAccessibility('Text copied to clipboard');
+      }}
       onPressIn={() => setIsPressing(true)}
       onPressOut={() => setIsPressing(false)}
       onHoverIn={() => setIsHovered(true)}
diff --git a/src/examples/ClipboardExamplePage.tsx b/src/examples/ClipboardExamplePage.tsx
index 1b78d62..70c159a 100644
--- a/src/examples/ClipboardExamplePage.tsx
+++ b/src/examples/ClipboardExamplePage.tsx
@@ -1,6 +1,6 @@
 'use strict';
 import React, {useState} from 'react';
-import {Button, Text, TextInput, View} from 'react-native';
+import {AccessibilityInfo, Button, Text, TextInput, View} from 'react-native';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -43,9 +43,14 @@ export const ClipboardExamplePage: React.FunctionComponent<{}> = () => {
       <Example title="Copy text to the Clipboard." code={example1jsx}>
         <View style={{alignItems: 'flex-start', gap: 12}}>
           <Button
-            accessibilityLabel="Example copy text"
+            accessibilityLabel="Copy text to the Clipboard"
             title="Copy text to the Clipboard"
-            onPress={() => Clipboard.setString(textToCopy)}
+            onPress={() => {
+              Clipboard.setString(textToCopy);
+              AccessibilityInfo.announceForAccessibility(
+                'Text copied to clipboard',
+              );
+            }}
           />
           <TextInput
             accessibilityLabel="Example set text to copy"
@@ -58,9 +63,14 @@ export const ClipboardExamplePage: React.FunctionComponent<{}> = () => {
       <Example title="Paste text from the Clipboard." code={example2jsx}>
         <View style={{alignItems: 'flex-start', gap: 12}}>
           <Button
-            accessibilityLabel="Example paste text"
+            accessibilityLabel="Paste text from the Clipboard"
             title="Paste text from the Clipboard"
-            onPress={() => getClipboardText()}
+            onPress={() => {
+              getClipboardText();
+              AccessibilityInfo.announceForAccessibility(
+                'Text pasted from clipboard',
+              );
+            }}
           />
           <Text>{textFromClipboard}</Text>
         </View>


Test patch:
diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap
index 88196ff..166af49 100644
--- a/__tests__/__snapshots__/App-test.js.snap
+++ b/__tests__/__snapshots__/App-test.js.snap
@@ -3719,7 +3719,7 @@ exports[`Clipboard Example Page 1`] = `
                 }
               >
                 <View
-                  accessibilityLabel="Example copy text"
+                  accessibilityLabel="Copy text to the Clipboard"
                   accessibilityRole="button"
                   accessibilityState={
                     {
@@ -4004,7 +4004,7 @@ exports[`Clipboard Example Page 1`] = `
                 }
               >
                 <View
-                  accessibilityLabel="Example paste text"
+                  accessibilityLabel="Paste text from the Clipboard"
                   accessibilityRole="button"
                   accessibilityState={
                     {