Fix:-fixed dark mode appearance for the a11y and action sheet examples in … (#44795)

Summary:
Fixes the `a11y` and actionSheet examples in the RN tester iOS app, where in dark mode, some text were not taking the appropriate color

**Before**

<img width="401" alt="Screenshot 2024-06-05 at 5 28 28 PM" src="https://github.com/facebook/react-native/assets/72331432/a17f2713-66e8-45bc-9923-baa328f40839">

<img width="401" alt="Screenshot 2024-06-05 at 5 28 37 PM" src="https://github.com/facebook/react-native/assets/72331432/4ca765a1-ebff-41e5-97ba-84f4d274f0c3">

**After**

<img width="401" alt="Screenshot 2024-06-05 at 5 29 56 PM" src="https://github.com/facebook/react-native/assets/72331432/c4f82d2c-4602-4165-abef-5620cbe45446">

<img width="401" alt="Screenshot 2024-06-05 at 5 30 08 PM" src="https://github.com/facebook/react-native/assets/72331432/973558dd-854c-4eb8-91d6-a288ba7b0561">

## Changelog:

N/A

Pick one each for the category and type tags:

[INTERNAL] [FIXED] - Fix RN tester Example appearance in dark mode for A11y and ActionSheet.

Pull Request resolved: https://github.com/facebook/react-native/pull/44795

Test Plan: Tested using the RN tester app.

Reviewed By: NickGerleman

Differential Revision: D58469005

Pulled By: huntie

fbshipit-source-id: 05f991f1c3efae7ccfc90535aaa62d6075aad18e

packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -12,51 +12,64 @@
 
 const React = require('react');
 const {Alert, Text, View} = require('react-native');
+const {RNTesterThemeContext} = require('../../components/RNTesterTheme');
 
 type Props = $ReadOnly<{||}>;
 class AccessibilityIOSExample extends React.Component<Props> {
   render(): React.Node {
     return (
-      <>
-        <View
-          onAccessibilityAction={event => {
-            if (event.nativeEvent.actionName === 'activate') {
-              Alert.alert('Alert', 'onAccessibilityTap success');
-            }
-          }}
-          accessible={true}
-          accessibilityActions={[{name: 'activate'}]}>
-          <Text>Accessibility normal tap example</Text>
-        </View>
-        <View
-          onAccessibilityAction={event => {
-            if (event.nativeEvent.actionName === 'magicTap') {
-              Alert.alert('Alert', 'onMagicTap success');
-            }
-          }}
-          accessible={true}
-          accessibilityActions={[{name: 'magicTap'}]}>
-          <Text>Accessibility magic tap example</Text>
-        </View>
-        <View
-          onAccessibilityAction={event => {
-            if (event.nativeEvent.actionName === 'escape') {
-              Alert.alert('onAccessibilityEscape success');
-            }
-          }}
-          accessible={true}
-          accessibilityActions={[{name: 'escape'}]}>
-          <Text>Accessibility escape example</Text>
-        </View>
-        <View accessibilityElementsHidden={true}>
-          <Text>
-            This view's children are hidden from the accessibility tree
-          </Text>
-        </View>
-        <View accessible={true} accessibilityLanguage="it-IT">
-          <Text>This view's language should be `it-IT`</Text>
-        </View>
-      </>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <>
+            <View
+              onAccessibilityAction={event => {
+                if (event.nativeEvent.actionName === 'activate') {
+                  Alert.alert('Alert', 'onAccessibilityTap success');
+                }
+              }}
+              accessible={true}
+              accessibilityActions={[{name: 'activate'}]}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Accessibility normal tap example
+              </Text>
+            </View>
+            <View
+              onAccessibilityAction={event => {
+                if (event.nativeEvent.actionName === 'magicTap') {
+                  Alert.alert('Alert', 'onMagicTap success');
+                }
+              }}
+              accessible={true}
+              accessibilityActions={[{name: 'magicTap'}]}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Accessibility magic tap example
+              </Text>
+            </View>
+            <View
+              onAccessibilityAction={event => {
+                if (event.nativeEvent.actionName === 'escape') {
+                  Alert.alert('onAccessibilityEscape success');
+                }
+              }}
+              accessible={true}
+              accessibilityActions={[{name: 'escape'}]}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Accessibility escape example
+              </Text>
+            </View>
+            <View accessibilityElementsHidden={true}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                This view's children are hidden from the accessibility tree
+              </Text>
+            </View>
+            <View accessible={true} accessibilityLanguage="it-IT">
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                This view's language should be `it-IT`
+              </Text>
+            </View>
+          </>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }

packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {NativeMethods} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 
 const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager');
 const React = require('react');
@@ -37,12 +38,20 @@ class ActionSheetExample extends React.Component<Props, State> {
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showActionSheet} style={style.button}>
-          Click to show the ActionSheet
-        </Text>
-        <Text>Clicked button: {this.state.clicked}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicked button: {this.state.clicked}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -70,12 +79,20 @@ class ActionSheetTintExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showActionSheet} style={style.button}>
-          Click to show the ActionSheet
-        </Text>
-        <Text>Clicked button: {this.state.clicked}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicked button: {this.state.clicked}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -104,12 +121,20 @@ class ActionSheetCancelButtonTintExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showActionSheet} style={style.button}>
-          Click to show the ActionSheet
-        </Text>
-        <Text>Clicked button: {this.state.clicked}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicked button: {this.state.clicked}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -141,20 +166,26 @@ class ActionSheetAnchorExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <View style={style.anchorRow}>
-          <Text style={style.button}>
-            Click there to show the ActionSheet ->
-          </Text>
-          <Text
-            onPress={this.showActionSheet}
-            style={style.button}
-            ref={this.anchorRef}>
-            HERE
-          </Text>
-        </View>
-        <Text>Clicked button: {this.state.clicked}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <View style={style.anchorRow}>
+              <Text style={[style.button, {color: theme.SecondaryLabelColor}]}>
+                Click there to show the ActionSheet ->
+              </Text>
+              <Text
+                onPress={this.showActionSheet}
+                style={[style.button, {color: theme.SecondaryLabelColor}]}
+                ref={this.anchorRef}>
+                HERE
+              </Text>
+            </View>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicked button: {this.state.clicked}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -182,12 +213,20 @@ class ActionSheetDisabledExample extends React.Component<Props, State> {
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showActionSheet} style={style.button}>
-          Click to show the ActionSheet
-        </Text>
-        <Text>Clicked button: {this.state.clicked}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicked button: {this.state.clicked}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -209,12 +248,18 @@ class ActionSheetDisabledExample extends React.Component<Props, State> {
 class ActionSheetDismissExample extends React.Component<{...}> {
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showAndDismissActionSheet} style={style.button}>
-          Click to show and automatically dismiss the ActionSheet after 3
-          seconds
-        </Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showAndDismissActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show and automatically dismiss the ActionSheet after 3
+              seconds
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -244,12 +289,20 @@ class ShareActionSheetExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showShareActionSheet} style={style.button}>
-          Click to show the Share ActionSheet
-        </Text>
-        <Text>{this.state.text}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showShareActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the Share ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              {this.state.text}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -285,12 +338,20 @@ class ShareScreenshotExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <Text onPress={this.showShareActionSheet} style={style.button}>
-          Click to show the Share ActionSheet
-        </Text>
-        <Text>{this.state.text}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text
+              onPress={this.showShareActionSheet}
+              style={[style.button, {color: theme.SecondaryLabelColor}]}>
+              Click to show the Share ActionSheet
+            </Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              {this.state.text}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 
@@ -332,20 +393,26 @@ class ShareScreenshotAnchorExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <View style={style.anchorRow}>
-          <Text style={style.button}>
-            Click to show the Share ActionSheet ->
-          </Text>
-          <Text
-            onPress={this.showShareActionSheet}
-            style={style.button}
-            ref={this.anchorRef}>
-            HERE
-          </Text>
-        </View>
-        <Text>{this.state.text}</Text>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <View style={style.anchorRow}>
+              <Text style={[style.button, {color: theme.SecondaryLabelColor}]}>
+                Click to show the Share ActionSheet ->
+              </Text>
+              <Text
+                onPress={this.showShareActionSheet}
+                style={[style.button, {color: theme.SecondaryLabelColor}]}
+                ref={this.anchorRef}>
+                HERE
+              </Text>
+            </View>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              {this.state.text}
+            </Text>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 

packages/rn-tester/js/examples/Alert/AlertExample.js

@@ -11,6 +11,7 @@
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import * as React from 'react';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
 
 // Shows log on the screen
@@ -241,11 +242,14 @@ const PromptOptions = () => {
       style: 'cancel',
     },
   ];
+  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View>
       <Text style={styles.promptValue}>
-        <Text style={styles.bold}>Prompt value:</Text>
+        <Text style={[{color: theme.SecondaryLabelColor}, styles.bold]}>
+          Prompt value:
+        </Text>
         {JSON.stringify(promptValue, null, 2)}
       </Text>