Mobile: Accessibility: Improve note list accessibility (#11419)

laurent22 · Nov 20, 2024 · 5d7d248 · 5d7d248
1 parent 13d8fbb
commit 5d7d248
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/app-mobile/components/Checkbox.tsx b/packages/app-mobile/components/Checkbox.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { TouchableHighlight, StyleSheet, TextStyle } from 'react-native';
-const Icon = require('react-native-vector-icons/Ionicons').default;
+import Icon from './Icon';
 
 interface Props {
 	checked: boolean;
@@ -44,7 +44,7 @@ const Checkbox: React.FC<Props> = props => {
 		});
 	}, [props.onChange]);
 
-	const iconName = checked ? 'checkbox-outline' : 'square-outline';
+	const iconName = checked ? 'ionicon checkbox-outline' : 'ionicon square-outline';
 	const styles = useStyles(props.style, props.iconStyle);
 
 	const accessibilityState = useMemo(() => ({
@@ -58,8 +58,10 @@ const Checkbox: React.FC<Props> = props => {
 			accessibilityRole="checkbox"
 			accessibilityState={accessibilityState}
 			accessibilityLabel={props.accessibilityLabel ?? ''}
+			// Web requires aria-checked
+			aria-checked={checked}
 		>
-			<Icon name={iconName} style={styles.icon} />
+			<Icon name={iconName} style={styles.icon} accessibilityLabel={null} />
 		</TouchableHighlight>
 	);
 };

diff --git a/packages/app-mobile/components/NoteItem.tsx b/packages/app-mobile/components/NoteItem.tsx
@@ -139,7 +139,13 @@ class NoteItemComponent extends PureComponent<Props, State> {
 		const noteTitle = Note.displayTitle(note);
 
 		return (
-			<TouchableOpacity onPress={this.onPress} onLongPress={this.onLongPress} activeOpacity={0.5}>
+			<TouchableOpacity
+				onPress={this.onPress}
+				onLongPress={this.onLongPress}
+				activeOpacity={0.5}
+				accessibilityHint={_('Opens note')}
+				accessibilityRole='button'
+			>
 				<View style={selectionWrapperStyle}>
 					<View style={opacityStyle}>
 						<View style={listItemStyle}>