Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/11427/head
Henry Heino 2024-11-20 03:35:35 -08:00 committed by GitHub
parent 13d8fbbd65
commit 5d7d248a83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app-mobile/components/Checkbox.tsx
View File

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

8
packages/app-mobile/components/NoteItem.tsx
View File

@ -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}>