Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix dark mode text #46898

Closed
wants to merge 1 commit into from
Closed

Fix dark mode text #46898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/rn-tester/js/components/ListExampleShared.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading