mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
Mobile: Accessibility: Improve side menu and heading screen reader accessibility (#11427)
This commit is contained in:
parent
a7add9961f
commit
5dfbb18838
@ -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}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user