Skip to content

Commit

Permalink
Fix dark mode text (#46898)
Browse files Browse the repository at this point in the history 
Summary:
Pull Request resolved: #46898

Replaces *many* `Text` component usages with `RNTesterText`: a thin wrapper around `Text` that applies color based on the color scheme chosen by the user. It makes text legible for dark mode across 41 different example files. This changes intentionally do not touch a few larger component sites that expand beyond RNTester, like `Animated` and `NewAppScreen`

Changelog: [Internal]

Differential Revision: D64053464
  • Loading branch information
@Abbondanzo @facebook-github-bot
Abbondanzo authored and facebook-github-bot committed Oct 9, 2024
1 parent 0794fa9 commit a81789d
Show file tree
Hide file tree
Showing 44 changed files with 1,651 additions and 1,570 deletions.
9 changes: 5 additions & 4 deletions packages/rn-tester/js/components/ListExampleShared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@

'use strict';

const React = require('react');
const {
import RNTesterText from './RNTesterText';
import React from 'react';
import {
ActivityIndicator,
Animated,
Image,
Expand All @@ -22,7 +23,7 @@ const {
TextInput,
TouchableHighlight,
View,
} = require('react-native');
} from 'react-native';

export type Item = {
title: string,
Expand Down Expand Up @@ -260,7 +261,7 @@ function renderSmallSwitchOption(
}
return (
<View style={styles.option}>
<Text>{label}:</Text>
<RNTesterText>{label}:</RNTesterText>
<Switch
style={styles.smallSwitch}
value={value}
Expand Down
6 changes: 4 additions & 2 deletions packages/rn-tester/js/components/RNTesterSettingSwitchRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
* @flow strict-local
*/

import RNTesterText from './RNTesterText';

import * as React from 'react';
import {StyleSheet, Switch, Text, View} from 'react-native';
import {StyleSheet, Switch, View} from 'react-native';

type Props = {
label: string,
Expand All @@ -34,7 +36,7 @@ const RNTesterSettingSwitchRow = ({
}: Props): React.Node => {
return (
<View style={styles.row}>
<Text>{label}</Text>
<RNTesterText>{label}</RNTesterText>
<Switch value={active} onValueChange={active ? onDisable : onEnable} />
</View>
);
Expand Down
38 changes: 38 additions & 0 deletions packages/rn-tester/js/components/RNTesterText.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/

import type {TextProps} from 'react-native/Libraries/Text/TextProps';

import {RNTesterThemeContext} from './RNTesterTheme';
import React, {useContext, useMemo} from 'react';
import {Text} from 'react-native';

type Props = $ReadOnly<{
...TextProps,
variant?: 'body' | 'label' | 'caption',
}>;

export default function RNTesterText(props: Props): React.Node {
const {style, variant, ...rest} = props;
const theme = useContext(RNTesterThemeContext);
const color = useMemo(() => {
switch (variant) {
case 'body':
return theme.LabelColor;
case 'label':
return theme.SecondaryLabelColor;
case 'caption':
return theme.TertiaryLabelColor;
default:
return theme.LabelColor;
}
}, [variant, theme]);
return <Text {...rest} style={[{color}, style]} />;
}
111 changes: 56 additions & 55 deletions packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,9 @@

import RNTesterBlock from '../../components/RNTesterBlock';
import RNTesterPage from '../../components/RNTesterPage';
import {
Alert,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
} from 'react-native';

const React = require('react');
import RNTesterText from '../../components/RNTesterText';
import {Alert, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
import React from 'react';

const importantForAccessibilityValues = [
'auto',
Expand Down Expand Up @@ -67,27 +61,27 @@ class AccessibilityAndroidExample extends React.Component<
return (
<RNTesterPage title={'Accessibility Android APIs'}>
<RNTesterBlock title="Ellipsized Accessible Links">
<Text numberOfLines={3}>
<Text>
<RNTesterText numberOfLines={3}>
<RNTesterText>
Bacon {this.state.count} Ipsum{'\n'}
</Text>
<Text>Dolor sit amet{'\n'}</Text>
<Text>Eggsecetur{'\n'}</Text>
<Text>{'\n'}</Text>
<Text accessibilityRole="link" onPress={this._addOne}>
</RNTesterText>
<RNTesterText>Dolor sit amet{'\n'}</RNTesterText>
<RNTesterText>Eggsecetur{'\n'}</RNTesterText>
<RNTesterText>{'\n'}</RNTesterText>
<RNTesterText accessibilityRole="link" onPress={this._addOne}>
http://github.com
</Text>
</Text>
</RNTesterText>
</RNTesterText>
</RNTesterBlock>

<RNTesterBlock title="LiveRegion">
<TouchableWithoutFeedback onPress={this._addOne}>
<View style={styles.embedded}>
<Text>Click me</Text>
<RNTesterText style={styles.buttonText}>Click me</RNTesterText>
</View>
</TouchableWithoutFeedback>
<View accessibilityLiveRegion="polite">
<Text>Clicked {this.state.count} times</Text>
<RNTesterText>Clicked {this.state.count} times</RNTesterText>
</View>
</RNTesterBlock>

Expand All @@ -102,7 +96,7 @@ class AccessibilityAndroidExample extends React.Component<
]
}>
<View accessible={true} style={styles.touchableContainer}>
<Text style={{fontSize: 25}}>Hello</Text>
<RNTesterText style={{fontSize: 25}}>Hello</RNTesterText>
</View>
</TouchableWithoutFeedback>
<View
Expand All @@ -123,124 +117,131 @@ class AccessibilityAndroidExample extends React.Component<
]
}>
<View accessible={true}>
<Text style={{fontSize: 20}}>world</Text>
<RNTesterText style={{fontSize: 20}}>world</RNTesterText>
</View>
</View>
</View>
<TouchableWithoutFeedback
onPress={this._changeBackgroundImportantForAcc}>
<View style={styles.embedded}>
<Text>
<RNTesterText style={styles.buttonText}>
Change importantForAccessibility for background layout.
</Text>
</RNTesterText>
</View>
</TouchableWithoutFeedback>
<View accessible={true}>
<Text>Background layout importantForAccessibility</Text>
<Text>
<RNTesterText>
Background layout importantForAccessibility
</RNTesterText>
<RNTesterText>
{
importantForAccessibilityValues[
this.state.backgroundImportantForAcc
]
}
</Text>
</RNTesterText>
</View>
<TouchableWithoutFeedback
onPress={this._changeForgroundImportantForAcc}>
<View style={styles.embedded}>
<Text>
<RNTesterText style={styles.buttonText}>
Change importantForAccessibility for forground layout.
</Text>
</RNTesterText>
</View>
</TouchableWithoutFeedback>
<View accessible={true}>
<Text>Forground layout importantForAccessibility</Text>
<Text>
<RNTesterText>
Forground layout importantForAccessibility
</RNTesterText>
<RNTesterText>
{
importantForAccessibilityValues[
this.state.forgroundImportantForAcc
]
}
</Text>
</RNTesterText>
</View>
</RNTesterBlock>
<RNTesterBlock title="Links">
<Text style={styles.paragraph}>
<RNTesterText style={styles.paragraph}>
In the following example, the words "test", "inline links", "another
link", and "link that spans multiple lines because the text is so
long", should each be independently focusable elements, announced as
their content followed by ", Link".
</Text>
<Text style={styles.paragraph}>
</RNTesterText>
<RNTesterText style={styles.paragraph}>
They should be focused in order from top to bottom *after* the
contents of the entire paragraph.
</Text>
<Text style={styles.paragraph}>
</RNTesterText>
<RNTesterText style={styles.paragraph}>
Focusing on the paragraph itself should also announce that there are
"links available", and opening Talkback's links menu should show
these same links.
</Text>
<Text style={styles.paragraph}>
</RNTesterText>
<RNTesterText style={styles.paragraph}>
Clicking on each link, or selecting the link From Talkback's links
menu should trigger an alert.
</Text>
<Text style={styles.paragraph}>
</RNTesterText>
<RNTesterText style={styles.paragraph}>
The links that wraps to multiple lines will intentionally only draw
a focus outline around the first line, but using the "explore by
touch" tap-and-drag gesture should move focus to this link even if
the second line is touched.
</Text>
<Text style={styles.paragraph}>
</RNTesterText>
<RNTesterText style={styles.paragraph}>
Using the "Explore by touch" gesture and touching an area that is
*not* a link should move focus to the entire paragraph.
</Text>
<Text style={styles.exampleTitle}>Example</Text>
<Text style={styles.paragraph} accessible={true}>
</RNTesterText>
<RNTesterText style={styles.exampleTitle}>Example</RNTesterText>
<RNTesterText style={styles.paragraph} accessible={true}>
This is a{' '}
<Text
<RNTesterText
style={styles.link}
accessibilityRole="link"
onPress={() => {
Alert.alert('pressed test');
}}>
test
</Text>{' '}
</RNTesterText>{' '}
of{' '}
<Text
<RNTesterText
style={styles.link}
accessibilityRole="link"
onPress={() => {
Alert.alert('pressed Inline Links');
}}>
inline links
</Text>{' '}
</RNTesterText>{' '}
in React Native. Here's{' '}
<Text
<RNTesterText
style={styles.link}
accessibilityRole="link"
onPress={() => {
Alert.alert('pressed another link');
}}>
another link
</Text>
</RNTesterText>
. Here is a{' '}
<Text
<RNTesterText
style={styles.link}
accessibilityRole="link"
onPress={() => {
Alert.alert('pressed long link');
}}>
link that spans multiple lines because the text is so long.
</Text>
</RNTesterText>
This sentence has no links in it.
</Text>
</RNTesterText>
</RNTesterBlock>
</RNTesterPage>
);
}
}

const styles = StyleSheet.create({
buttonText: {
color: 'black',
},
touchableContainer: {
position: 'absolute',
left: 10,
Expand Down
Loading

0 comments on commit a81789d

Please sign in to comment.