Skip to content

Commit

Permalink
Fix:-fixed dark mode appearance for the a11y and action sheet example…
Browse files Browse the repository at this point in the history 
…s 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: #44795

Test Plan: Tested using the RN tester app.

Reviewed By: NickGerleman

Differential Revision: D58469005

Pulled By: huntie

fbshipit-source-id: 05f991f1c3efae7ccfc90535aaa62d6075aad18e
  • Loading branch information
@Biki-das @facebook-github-bot
Biki-das authored and facebook-github-bot committed Jun 13, 2024
1 parent 1fb5a4b commit 45ac64e
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 111 deletions.
93 changes: 53 additions & 40 deletions packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
}
Expand Down
207 changes: 137 additions & 70 deletions packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand All @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down Expand Up @@ -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>
);
}

Expand Down
Loading

0 comments on commit 45ac64e

Please sign in to comment.