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 : '';
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}
</>
);

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) {
return <Image style={styles_.folderImageIcon} source={{ uri: folderIcon.dataUrl }}/>;
} 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 {
throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
}
@ -485,6 +485,7 @@ const SideMenuContentComponent = (props: Props) => {
event.preventDefault();
void folder_longPress(folder);
}}
accessibilityHint={_('Opens notebook')}
role='button'
>
<View style={folderButtonStyle}>
@ -500,7 +501,7 @@ const SideMenuContentComponent = (props: Props) => {
};
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') {
icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>;
@ -516,7 +517,7 @@ const SideMenuContentComponent = (props: Props) => {
if (!onPressHandler) return content;
return (
<TouchableOpacity key={key} onPress={onPressHandler} role='button'>
<TouchableOpacity key={key} onPress={onPressHandler} accessibilityRole='button'>
{content}
</TouchableOpacity>
);