feat(a11y): External link as link on screen reader (#6104)

RocketChat · Feb 17, 2025 · 53e4ea3 · 53e4ea3
1 parent 02ffa54
commit 53e4ea3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View, AccessibilityRole } from 'react-native';
 
 import Touch from '../Touch';
 import { themes } from '../../lib/constants';
@@ -69,6 +69,7 @@ interface IListItemContent {
 	heightContainer?: number;
 	styleTitle?: StyleProp<TextStyle>;
 	additionalAcessibilityLabel?: string | boolean;
+	accessibilityRole?: AccessibilityRole;
 	additionalAcessibilityLabelCheck?: boolean;
 }
 
@@ -89,7 +90,8 @@ const Content = React.memo(
 		heightContainer,
 		styleTitle,
 		additionalAcessibilityLabel,
-		additionalAcessibilityLabelCheck
+		additionalAcessibilityLabelCheck,
+		accessibilityRole
 	}: IListItemContent) => {
 		const { fontScale } = useDimensions();
 
@@ -120,7 +122,7 @@ const Content = React.memo(
 				testID={testID}
 				accessible
 				accessibilityLabel={handleAcessibilityLabel}
-				accessibilityRole='button'>
+				accessibilityRole={accessibilityRole ?? 'button'}>
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>

diff --git a/app/views/GetHelpView.tsx b/app/views/GetHelpView.tsx
@@ -33,20 +33,23 @@ const GetHelpView = () => {
 					<List.Separator />
 					<List.Item
 						title='Rocket_Chat_Documentation'
+						accessibilityRole='link'
 						right={() => <NewWindowIcon />}
 						onPress={() => openLink(DOCS_LINK, theme)}
 						testID='settings-view-get-help-documentation'
 					/>
 					<List.Separator />
 					<List.Item
 						title='Accessibility_statement'
+						accessibilityRole='link'
 						right={() => <NewWindowIcon />}
 						onPress={() => openLink(ACCESSIBILITY_LINK, theme)}
 						testID='settings-view-get-help-accessibility-statement'
 					/>
 					<List.Separator />
 					<List.Item
 						title='Glossary_of_simplified_terms'
+						accessibilityRole='link'
 						right={() => <NewWindowIcon />}
 						onPress={() => openLink(GLOSSARY_LINK, theme)}
 						testID='settings-view-get-help-glossary'

diff --git a/app/views/LegalView.tsx b/app/views/LegalView.tsx
@@ -7,6 +7,7 @@ import openLink from '../lib/methods/helpers/openLink';
 import { useTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
+import NewWindowIcon from '../containers/NewWindowIcon';
 import { OutsideParamList } from '../stacks/types';
 import { IBaseScreen, IApplicationState } from '../definitions';
 
@@ -41,14 +42,16 @@ const LegalView = ({ navigation }: ILegalViewProps): React.ReactElement => {
 						title='Terms_of_Service'
 						onPress={() => onPressItem({ route: 'terms-of-service' })}
 						testID='legal-terms-button'
-						showActionIndicator
+						right={() => <NewWindowIcon />}
+						accessibilityRole='link'
 					/>
 					<List.Separator />
 					<List.Item
 						title='Privacy_Policy'
 						onPress={() => onPressItem({ route: 'privacy-policy' })}
 						testID='legal-privacy-button'
-						showActionIndicator
+						right={() => <NewWindowIcon />}
+						accessibilityRole='link'
 					/>
 					<List.Separator />
 				</List.Section>

diff --git a/app/views/PushTroubleshootView/components/NotificationDelay.tsx b/app/views/PushTroubleshootView/components/NotificationDelay.tsx
@@ -16,6 +16,7 @@ export default function NotificationDelay(): React.ReactElement {
 			<List.Item
 				title='Documentation'
 				onPress={openNotificationDocumentation}
+				accessibilityRole='link'
 				right={() => <NewWindowIcon size={32} color={colors.fontAnnotation} />}
 				testID='push-troubleshoot-view-notification-delay'
 			/>

diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
@@ -269,6 +269,7 @@ const SettingsView = (): React.ReactElement => {
 					<List.Separator />
 					<List.Item
 						title='Contact_us'
+						accessibilityRole='link'
 						onPress={sendEmail}
 						testID='settings-view-contact'
 						left={() => <List.Icon name='mail' />}
@@ -279,6 +280,7 @@ const SettingsView = (): React.ReactElement => {
 						<>
 							<List.Item
 								title='Review_this_app'
+								accessibilityRole='link'
 								onPress={onReviewPress}
 								testID='settings-view-review-app'
 								left={() => <List.Icon name='star' />}
@@ -289,6 +291,7 @@ const SettingsView = (): React.ReactElement => {
 					<List.Separator />
 					<List.Item
 						title='License'
+						accessibilityRole='link'
 						onPress={onPressLicense}
 						testID='settings-view-license'
 						left={() => <List.Icon name='file-document' />}