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

Issue:
'Name of a focuable element must not be null' error message from Accessibility Insights on Clipboard example page
Screenshot of Fastpass:

![image](https://github.com/microsoft/react-native-gallery/assets/157416350/3011341d-1b36-42af-81bd-985527e2682e)

Looks like we need to have the accessibilityLabel prop defined on each of these.
'Name of a focuable element must not be null' error message from Accessibility Insights on Lottie example page
Screenshot of Fastpass: 

![image](https://github.com/microsoft/react-native-gallery/assets/157416350/99022824-c9d0-4627-a54e-699a9606dafd)

Looks like we need to have the accessibilityLabel prop defined on each of these.
UIA Name and ControlType/LocalizedControlType property errors on Xaml example change.
Screenshot of Fastpass:

![image](https://github.com/user-attachments/assets/69f9fbe7-27f6-4ceb-bfbb-4be7fa30ee30)

All errors are due to the UIA Name and UIA ControlType and LocalizedControlType properties having common text in their values. Will need to change the UIA Name properties (accessibilityLabel) for the impacted components.

Pull request:
Add/fix `accessibilityLabel` property values for Clipboard, XAML and Lottie Example pages
## Description
Fix accessibilityLabel values to prevent issues with UIA ControlType/LocalizedControlType values being the same, or UIA Name property values being null on Lottie, Clipboard and XAML example pages.

### Why

Resolves #453 
Resolves #454 
Resolves #474 

### What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.

## Screenshots
Clipboard before:
![image](https://github.com/user-attachments/assets/1badc6be-a323-4212-8e89-1fa743c0842a)

Clipboard After:
![Clipboard After](https://github.com/user-attachments/assets/feebb2c0-e0e3-42d5-bb78-61bd7f25cd99)

Lottie Before:
![image](https://github.com/user-attachments/assets/8fd860bb-7bbc-4de7-af79-ae734d289175)

Lottie After: 
![Lottie After](https://github.com/user-attachments/assets/fd7db077-4a43-4f57-820f-e5726cbb1c3d)

XAML Before:
![image](https://github.com/user-attachments/assets/9e71b6e9-7ce9-479d-bfeb-fb1596273697)


XAML After:
![XAML After](https://github.com/user-attachments/assets/669f5ffb-4dbc-4696-8647-68bd144dfec0)


 ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-gallery/pull/475)

Patch:
diff --git a/src/examples/ClipboardExamplePage.tsx b/src/examples/ClipboardExamplePage.tsx
index 3632920..1b78d62 100644
--- a/src/examples/ClipboardExamplePage.tsx
+++ b/src/examples/ClipboardExamplePage.tsx
@@ -43,16 +43,22 @@ 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"
             title="Copy text to the Clipboard"
             onPress={() => Clipboard.setString(textToCopy)}
           />
-          <TextInput value={textToCopy} onChangeText={setTextToCopy} />
+          <TextInput
+            accessibilityLabel="Example set text to copy"
+            value={textToCopy}
+            onChangeText={setTextToCopy}
+          />
         </View>
       </Example>
 
       <Example title="Paste text from the Clipboard." code={example2jsx}>
         <View style={{alignItems: 'flex-start', gap: 12}}>
           <Button
+            accessibilityLabel="Example paste text"
             title="Paste text from the Clipboard"
             onPress={() => getClipboardText()}
           />
diff --git a/src/examples/LottieAnimationsExamplePage.tsx b/src/examples/LottieAnimationsExamplePage.tsx
index 46fefed..b751882 100644
--- a/src/examples/LottieAnimationsExamplePage.tsx
+++ b/src/examples/LottieAnimationsExamplePage.tsx
@@ -100,13 +100,18 @@ export const LottieAnimationsExamplePage: React.FunctionComponent<{}> = () => {
           }}
         />
         <View style={{flexDirection: 'row', gap: 12}}>
-          <Button onPress={onPlay} title={'play'} />
-          <Button onPress={onPause} title={'pause'} />
-          <Button onPress={onResume} title={'resume'} />
-          <Button onPress={onReset} title="reset" />
+          <Button onPress={onPlay} title="play" accessibilityLabel="Play" />
+          <Button onPress={onPause} title="pause" accessibilityLabel="Pause" />
+          <Button
+            onPress={onResume}
+            title="resume"
+            accessibilityLabel="Resume"
+          />
+          <Button onPress={onReset} title="reset" accessibilityLabel="Reset" />
           <Button
             onPress={handlerChangeLoop}
-            title={loop ? 'disable loop' : 'ative resume'}
+            title={loop ? 'Disable loop' : 'Resume loop'}
+            accessibilityLabel={loop ? 'Disable loop' : 'Resume loop'}
           />
         </View>
       </Example>
diff --git a/src/examples/XamlExamplePage.tsx b/src/examples/XamlExamplePage.tsx
index 198f559..d59c091 100644
--- a/src/examples/XamlExamplePage.tsx
+++ b/src/examples/XamlExamplePage.tsx
@@ -113,7 +113,11 @@ const onRadioButtonSelected = (event) => {
         <TextBlock text="I am a XAML TextBlock." />
       </Example>
       <Example title="A simple XAML Button." code={example2jsx}>
-        <Button content={{string: 'XAML Button'}} onClick={() => {}} />
+        <Button
+          accessibilityLabel="Simple example"
+          content={{string: 'XAML Button'}}
+          onClick={() => {}}
+        />
       </Example>
       <Example title="A simple XAML ToggleSwitch." code={example3jsx}>
         <ToggleSwitch accessibilityLabel="Simple example ToggleSwitch" />
@@ -152,7 +156,7 @@ You selected Option ${selectedRadioButton}`}</Text>
         </View>
       </Example>
       <Example title="A simple ComboBox." code={example5jsx}>
-        <ComboBox accessibilityLabel="Simple example ComboBox" text="ComboBox">
+        <ComboBox accessibilityLabel="Simple example" text="ComboBox">
           <ComboBoxItem content={{string: 'ComboBoxItem 1'}} />
           <ComboBoxItem content={{string: 'ComboBoxItem 2'}} />
           <ComboBoxItem content={{string: 'ComboBoxItem 3'}} />


Test patch:
diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap
index 369e091..d41aa5d 100644
--- a/__tests__/__snapshots__/App-test.js.snap
+++ b/__tests__/__snapshots__/App-test.js.snap
@@ -3719,6 +3719,7 @@ exports[`Clipboard Example Page 1`] = `
                 }
               >
                 <View
+                  accessibilityLabel="Example copy text"
                   accessibilityRole="button"
                   accessibilityState={
                     {
@@ -3801,6 +3802,7 @@ exports[`Clipboard Example Page 1`] = `
                   </View>
                 </View>
                 <TextInput
+                  accessibilityLabel="Example set text to copy"
                   onChangeText={[Function]}
                   value="This text will be copied to the clipboard"
                 />
@@ -4002,6 +4004,7 @@ exports[`Clipboard Example Page 1`] = `
                 }
               >
                 <View
+                  accessibilityLabel="Example paste text"
                   accessibilityRole="button"
                   accessibilityState={
                     {
@@ -54836,6 +54839,7 @@ exports[`Xaml Example Page 1`] = `
               }
             >
               <XamlControl
+                accessibilityLabel="Simple example"
                 content={
                   {
                     "string": "XAML Button",
@@ -56349,7 +56353,7 @@ You selected Option 1
               }
             >
               <XamlControl
-                accessibilityLabel="Simple example ComboBox"
+                accessibilityLabel="Simple example"
                 text="ComboBox"
                 type="Windows.UI.Xaml.Controls.ComboBox"
               >