From 5dfbb1883866f8d70793a988cee699c839f0542d Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Fri, 22 Nov 2024 02:47:31 -0800
Subject: [PATCH] Mobile: Accessibility: Improve side menu and heading screen
 reader accessibility (#11427)

---
 packages/app-mobile/components/ScreenHeader/index.tsx | 7 ++++++-
 packages/app-mobile/components/side-menu-content.tsx  | 7 ++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/app-mobile/components/ScreenHeader/index.tsx b/packages/app-mobile/components/ScreenHeader/index.tsx
index 8000db3de..ccf1b7976 100644
--- a/packages/app-mobile/components/ScreenHeader/index.tsx
+++ b/packages/app-mobile/components/ScreenHeader/index.tsx
@@ -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}
 					</>
 				);
diff --git a/packages/app-mobile/components/side-menu-content.tsx b/packages/app-mobile/components/side-menu-content.tsx
index 4e9004dd8..4c68991d7 100644
--- a/packages/app-mobile/components/side-menu-content.tsx
+++ b/packages/app-mobile/components/side-menu-content.tsx
@@ -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>
 		);