self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-18 09:35:20 +02:00
Code Issues Releases Activity

Mobile: Accessibility: Improve side menu and heading screen reader accessibility (#11427)

Browse Source
This commit is contained in:
Henry Heino 2024-11-22 02:47:31 -08:00 committed by GitHub
parent a7add9961f
commit 5dfbb18838
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app-mobile/components/ScreenHeader/index.tsx
View File

@ -562,7 +562,12 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
const title = 'title' in this.props && this.props.title !== null ? this.props.title : ''; const title = 'title' in this.props && this.props.title !== null ? this.props.title : '';
return ( return (
<> <>
<Text ellipsizeMode={'tail'} numberOfLines={1} style={this.styles().titleText}>{title}</Text> <Text
ellipsizeMode={'tail'}
numberOfLines={1}
style={this.styles().titleText}
accessibilityRole='header'
>{title}</Text>
{hideableAfterTitleComponents} {hideableAfterTitleComponents}
</> </>
); );

7
packages/app-mobile/components/side-menu-content.tsx
View File

@ -424,7 +424,7 @@ const SideMenuContentComponent = (props: Props) => {
} else if (folderIcon.type === FolderIconType.DataUrl) { } else if (folderIcon.type === FolderIconType.DataUrl) {
return <Image style={styles_.folderImageIcon} source={{ uri: folderIcon.dataUrl }}/>; return <Image style={styles_.folderImageIcon} source={{ uri: folderIcon.dataUrl }}/>;
} else if (folderIcon.type === FolderIconType.FontAwesome) { } else if (folderIcon.type === FolderIconType.FontAwesome) {
return <Icon style={styles_.folderBaseIcon} name={folderIcon.name} accessibilityLabel={''}/>; return <Icon style={styles_.folderBaseIcon} name={folderIcon.name} accessibilityLabel={null}/>;
} else { } else {
throw new Error(`Unsupported folder icon type: ${folderIcon.type}`); throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
} }
@ -485,6 +485,7 @@ const SideMenuContentComponent = (props: Props) => {
event.preventDefault(); event.preventDefault();
void folder_longPress(folder); void folder_longPress(folder);
}} }}
accessibilityHint={_('Opens notebook')}
role='button' role='button'
> >
<View style={folderButtonStyle}> <View style={folderButtonStyle}>
@ -500,7 +501,7 @@ const SideMenuContentComponent = (props: Props) => {
}; };
const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: ()=> void = null, selected = false) => { const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: ()=> void = null, selected = false) => {
let icon = <IonIcon name={iconName} style={styles_.sidebarIcon} aria-hidden={true} />; let icon = <Icon name={`ionicon ${iconName}`} style={styles_.sidebarIcon} accessibilityLabel={null} />;
if (key === 'synchronize_button') { if (key === 'synchronize_button') {
icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>; icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>;
@ -516,7 +517,7 @@ const SideMenuContentComponent = (props: Props) => {
if (!onPressHandler) return content; if (!onPressHandler) return content;
return ( return (
<TouchableOpacity key={key} onPress={onPressHandler} role='button'> <TouchableOpacity key={key} onPress={onPressHandler} accessibilityRole='button'>
{content} {content}
</TouchableOpacity> </TouchableOpacity>
); );