Add missing accessibility labels (#5390)

This commit is contained in:
Christoph Ono 2023-03-31 17:32:07 +02:00 committed by GitHub
parent ac3756a775
commit 8d46cc66d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 51 additions and 26 deletions

View file

@ -559,7 +559,12 @@ export const BlueHeaderDefaultMain = props => {
>
{props.leftText}
</Text>
<PlusIcon onPress={props.onNewWalletPress} Component={TouchableOpacity} />
<PlusIcon
accessibilityRole="button"
accessibilityLabel={loc.wallets.add_title}
onPress={props.onNewWalletPress}
Component={TouchableOpacity}
/>
</View>
);
};

View file

@ -238,7 +238,7 @@ class AmountInput extends Component {
});
return (
<TouchableWithoutFeedback disabled={this.props.pointerEvents === 'none'} onPress={() => this.textInput.focus()}>
<TouchableWithoutFeedback accessibilityRole="button" accessibilityLabel={loc._.enter_amount} disabled={this.props.pointerEvents === 'none'} onPress={() => this.textInput.focus()}>
<>
<View style={styles.root}>
{!disabled && <View style={[styles.center, stylesHook.center]} />}
@ -289,6 +289,7 @@ class AmountInput extends Component {
{!disabled && amount !== BitcoinUnit.MAX && (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.change_input_currency}
testID="changeAmountUnitButton"
style={styles.changeAmountUnit}
onPress={this.changeAmountUnit}
@ -306,6 +307,8 @@ class AmountInput extends Component {
</BlueText>
<View style={styles.spacing8} />
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.refresh}
onPress={this.updateRate}
disabled={this.state.isRateBeingUpdated}
style={this.state.isRateBeingUpdated ? styles.disabledButton : styles.enabledButon}

View file

@ -30,6 +30,8 @@ export const ArrowPicker = (props: ArrowPickerProps) => {
return (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Pressable
accessibilityRole="button"
accessibilityLabel={loc.send.dynamic_prev}
onPress={() => {
Keyboard.dismiss();
let newIndex = keyIndex;
@ -56,6 +58,8 @@ export const ArrowPicker = (props: ArrowPickerProps) => {
<Text style={[styles.text, stylesHook.text]}>{props.isItemUnknown ? loc.send.fee_custom : keys[keyIndex]}</Text>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel={loc.send.dynamic_next}
onPress={() => {
Keyboard.dismiss();
let newIndex = keyIndex;

View file

@ -38,7 +38,7 @@ const Button = props => {
const opacity = { opacity: disabled ? 0.5 : 1.0 };
return (
<TouchableOpacity onPress={onPress} disabled={disabled} style={opacity}>
<TouchableOpacity accessibilityRole="button" onPress={onPress} disabled={disabled} style={opacity}>
<View style={[styles.buttonContainer, buttonStyles()]}>
<Text style={[styles.text, textStyles()]}>{text}</Text>
</View>

View file

@ -7,7 +7,7 @@ import React from 'react';
export const LdkButton = props => {
const { colors } = useTheme();
return (
<TouchableOpacity onPress={props.onPress}>
<TouchableOpacity accessibilityRole="button" onPress={props.onPress}>
<View
style={{
borderColor: (props.active && colors.lnborderColor) || colors.buttonDisabledBackgroundColor,

View file

@ -133,7 +133,7 @@ const MultipleStepsListItem = props => {
</>
)}
{!showActivityIndicator && props.rightButton && checked && (
<View style={styles.rightButtonContainer} accessibilityComponentType>
<View style={styles.rightButtonContainer}>
<TouchableOpacity
accessibilityRole="button"
disabled={props.rightButton.disabled}

View file

@ -59,7 +59,7 @@ const ToolTipMenu = (props, ref) => {
}}
style={buttonStyle}
>
{props.onPress ? <TouchableOpacity onPress={props.onPress}>{props.children}</TouchableOpacity> : props.children}
{props.onPress ? <TouchableOpacity accessibilityRole="button" onPress={props.onPress}>{props.children}</TouchableOpacity> : props.children}
</ContextMenuButton>
) : (
<ContextMenuView
@ -82,7 +82,7 @@ const ToolTipMenu = (props, ref) => {
}
: {})}
>
{props.onPress ? <TouchableOpacity onPress={props.onPress}>{props.children}</TouchableOpacity> : props.children}
{props.onPress ? <TouchableOpacity accessibilityRole="button" onPress={props.onPress}>{props.children}</TouchableOpacity> : props.children}
</ContextMenuView>
);
};

View file

@ -260,7 +260,7 @@ export default class TransactionsNavigationHeader extends Component {
</TouchableOpacity>
)}
{this.state.wallet.type === LightningLdkWallet.type && (
<TouchableOpacity accessibilityRole="button" onPress={this.manageFundsPressed}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc.lnd.title} onPress={this.manageFundsPressed}>
<View style={styles.manageFundsButton}>
<Text style={styles.manageFundsButtonText}>{loc.lnd.title}</Text>
</View>

View file

@ -203,6 +203,7 @@ const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedW
shadowRadius={8}
>
<TouchableWithoutFeedback
accessibilityRole="button"
testID={item.getLabel()}
onPressIn={onPressedIn}
onPressOut={onPressedOut}

View file

@ -2,6 +2,7 @@
import React from 'react';
import { Image, Keyboard, TouchableOpacity, StyleSheet } from 'react-native';
import { Theme } from './themes';
import loc from '../loc';
const styles = StyleSheet.create({
button: {
@ -56,7 +57,8 @@ const navigationStyle = (
navigation.goBack(null);
};
headerRight = () => (
<TouchableOpacity accessibilityRole="button" style={styles.button} onPress={handleClose} testID="NavigationCloseButton">
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.close} style={styles.button} onPress={handleClose} testID="NavigationCloseButton"
>
<Image source={theme.closeImage} />
</TouchableOpacity>
);
@ -106,9 +108,7 @@ export const navigationStyleTx = (opts: NavigationOptions, formatter: OptionsFor
headerBackTitleVisible: false,
headerTintColor: theme.colors.foregroundColor,
headerLeft: () => (
<TouchableOpacity
accessibilityRole="button"
style={styles.button}
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.close} style={styles.button}
onPress={() => {
Keyboard.dismiss();
navigation.goBack(null);

View file

@ -18,7 +18,15 @@
"wallet_key": "Wallet key",
"invalid_animated_qr_code_fragment": "Invalid animated QRCode fragment. Please try again.",
"file_saved": "File {filePath} has been saved in your {destination}.",
"downloads_folder": "Downloads Folder"
"downloads_folder": "Downloads Folder",
"close": "Close",
"change_input_currency": "Change input currency",
"refresh": "Refresh",
"more": "More",
"pick_image": "Choose image from library",
"pick_file": "Choose a file",
"enter_amount": "Enter amount",
"qr_custom_input_button": "Tap 10 times to enter custom input"
},
"alert": {
"default": "Alert"

View file

@ -296,7 +296,7 @@ const LdkInfo = () => {
const channelData = channel.channel.item;
return (
<TouchableOpacity onPress={() => showModal(channel)}>
<TouchableOpacity accessibilityRole="button" onPress={() => showModal(channel)}>
<LNNodeBar
disabled={!channelData.is_usable}
canSend={Number(channelData.outbound_capacity_msat / 1000)}

View file

@ -344,14 +344,14 @@ const ScanQRCode = () => {
<BlueButton title={loc.send.open_settings} onPress={openPrivacyDesktopSettings} />
</View>
)}
<TouchableOpacity style={styles.closeTouch} onPress={dismiss}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.close} style={styles.closeTouch} onPress={dismiss}>
<Image style={styles.closeImage} source={require('../../img/close-white.png')} />
</TouchableOpacity>
<TouchableOpacity style={styles.imagePickerTouch} onPress={showImagePicker}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.pick_image} style={styles.imagePickerTouch} onPress={showImagePicker}>
<Icon name="image" type="font-awesome" color="#ffffff" />
</TouchableOpacity>
{showFileImportButton && (
<TouchableOpacity style={styles.filePickerTouch} onPress={showFilePicker}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.pick_file} style={styles.filePickerTouch} onPress={showFilePicker}>
<Icon name="file-import" type="font-awesome-5" color="#ffffff" />
</TouchableOpacity>
)}
@ -392,6 +392,8 @@ const ScanQRCode = () => {
</View>
)}
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.qr_custom_input_button}
testID="ScanQrBackdoorButton"
style={styles.backdoorButton}
onPress={async () => {

View file

@ -953,6 +953,7 @@ const SendDetails = () => {
default: () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.more}
disabled={isLoading}
style={styles.advancedOptions}
onPress={() => {
@ -1388,7 +1389,7 @@ const SendDetails = () => {
/>
{frozenBalance > 0 && (
<TouchableOpacity style={styles.frozenContainer} onPress={handleCoinControl}>
<TouchableOpacity accessibilityRole="button" style={styles.frozenContainer} onPress={handleCoinControl}>
<BlueText>
{loc.formatString(loc.send.details_frozen, { amount: formatBalanceWithoutSuffix(frozenBalance, BitcoinUnit.BTC, true) })}
</BlueText>

View file

@ -103,7 +103,7 @@ const SettingsPrivacy = () => {
return (
<ScrollView style={[styles.root, stylesWithThemeHook.root]}>
<Pressable onPress={onDisablePrivacyTapped}>
<Pressable accessibilityRole="button" onPress={onDisablePrivacyTapped}>
<BlueHeaderDefaultSub leftText={loc.settings.general} rightComponent={null} />
</Pressable>
<BlueListItem

View file

@ -145,7 +145,7 @@ const WalletsImport = () => {
return (
<SafeBlueArea style={styles.root}>
<BlueSpacing20 />
<TouchableWithoutFeedback onPress={speedBackdoorTap} testID="SpeedBackdoor">
<TouchableWithoutFeedback accessibilityRole="button" onPress={speedBackdoorTap} testID="SpeedBackdoor">
<BlueFormLabel>{loc.wallets.import_explanation}</BlueFormLabel>
</TouchableWithoutFeedback>
<BlueSpacing20 />

View file

@ -39,7 +39,7 @@ const LdkViewLogs = () => {
.finally(() => {
setOptions({
headerRight: () => (
<TouchableOpacity style={styles.reloadLogs} onPress={getLogs}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc.wallets.list_tryagain} style={styles.reloadLogs} onPress={getLogs}>
<Icon name="redo" type="font-awesome-5" size={22} color={colors.foregroundColor} />
</TouchableOpacity>
),
@ -104,13 +104,13 @@ const LdkViewLogs = () => {
return (
<SafeBlueArea>
<ScrollView style={styles.root}>
<TouchableOpacity onPress={selfTest} style={styles.button}>
<TouchableOpacity accessibilityRole="button" onPress={selfTest} style={styles.button}>
<BlueText>self test</BlueText>
</TouchableOpacity>
<TouchableOpacity onPress={exportLogs} style={styles.button}>
<TouchableOpacity accessibilityRole="button" onPress={exportLogs} style={styles.button}>
<BlueText>export logs to a file</BlueText>
</TouchableOpacity>
<TouchableOpacity onPress={syncBlockchain} style={styles.button}>
<TouchableOpacity accessibilityRole="button" onPress={syncBlockchain} style={styles.button}>
<BlueText>sync blockchain</BlueText>
</TouchableOpacity>
<BlueText>Identity pubkey: {getInfo.identityPubkey}</BlueText>

View file

@ -103,13 +103,13 @@ const WalletsList = () => {
},
headerRight: () =>
I18nManager.isRTL ? null : (
<TouchableOpacity accessibilityRole="button" testID="SettingsButton" style={styles.headerTouch} onPress={navigateToSettings}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.more} testID="SettingsButton" style={styles.headerTouch} onPress={navigateToSettings}>
<Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
</TouchableOpacity>
),
headerLeft: () =>
I18nManager.isRTL ? (
<TouchableOpacity accessibilityRole="button" testID="SettingsButton" style={styles.headerTouch} onPress={navigateToSettings}>
<TouchableOpacity accessibilityRole="button" accessibilityLabel={loc._.more} testID="SettingsButton" style={styles.headerTouch} onPress={navigateToSettings}>
<Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
</TouchableOpacity>
) : null,

View file

@ -103,6 +103,7 @@ const ReorderWallets = () => {
return (
<ScaleDecorator>
<Pressable
accessibilityRole="button"
disabled={isActive}
onLongPress={drag}
onPress={() => navigateToWallet(item)}