From 8056c3d6772dd1666bd9a37841a03b052c3f79ab Mon Sep 17 00:00:00 2001 From: Bryce McMath <32586431+bryce-mcmath@users.noreply.github.com> Date: Fri, 20 Oct 2023 13:56:43 -0700 Subject: [PATCH] chore: various a11y updates (#1004) Signed-off-by: Bryce McMath --- .../core/App/components/chat/MessageInput.tsx | 2 + .../App/components/misc/ConnectionAlert.tsx | 19 +++----- .../App/components/misc/EmptyListContacts.tsx | 22 ++++------ .../components/modals/CommonRemoveModal.tsx | 4 +- .../legacy/core/App/components/texts/Link.tsx | 39 +++++++++++++++++ packages/legacy/core/App/index.ts | 4 +- .../core/App/screens/WhatAreContacts.tsx | 13 ++---- .../core/__tests__/components/Link.test.tsx | 16 +++++++ .../CommonRemoveModal.test.tsx.snap | 4 ++ .../__snapshots__/Link.test.tsx.snap | 37 ++++++++++++++++ .../WhatAreContacts.test.tsx.snap | 43 +++++++++---------- 11 files changed, 142 insertions(+), 61 deletions(-) create mode 100644 packages/legacy/core/App/components/texts/Link.tsx create mode 100644 packages/legacy/core/__tests__/components/Link.test.tsx create mode 100644 packages/legacy/core/__tests__/components/__snapshots__/Link.test.tsx.snap diff --git a/packages/legacy/core/App/components/chat/MessageInput.tsx b/packages/legacy/core/App/components/chat/MessageInput.tsx index 0303baa3cf..7a936b3244 100644 --- a/packages/legacy/core/App/components/chat/MessageInput.tsx +++ b/packages/legacy/core/App/components/chat/MessageInput.tsx @@ -27,6 +27,8 @@ export const renderComposer = (props: any, theme: any, placeholder: string) => ( }} placeholder={placeholder} placeholderTextColor={theme.placeholderText} + // the placeholder is read by accessibility features when multiline is enabled so a label is not necessary (results in double announcing if used) + textInputProps={{ accessibilityLabel: '' }} /> ) diff --git a/packages/legacy/core/App/components/misc/ConnectionAlert.tsx b/packages/legacy/core/App/components/misc/ConnectionAlert.tsx index 65ebfdfd48..2e6b2db253 100644 --- a/packages/legacy/core/App/components/misc/ConnectionAlert.tsx +++ b/packages/legacy/core/App/components/misc/ConnectionAlert.tsx @@ -9,6 +9,7 @@ import { hitSlop } from '../../constants' import { useTheme } from '../../contexts/theme' import { RootStackParams, Screens, Stacks } from '../../types/navigators' import PopupModal from '../modals/PopupModal' +import Link from '../texts/Link' import { InfoBoxType } from './InfoBox' import UnorderedList from './UnorderedList' @@ -41,11 +42,6 @@ const ConnectionAlert: React.FC = ({ connectionID }) => { paddingVertical: 15, marginVertical: 15, }, - fakeLink: { - ...TextTheme.normal, - color: ColorPallet.notification.infoText, - textDecorationLine: 'underline', - }, row: { flexDirection: 'row', }, @@ -104,13 +100,12 @@ const ConnectionAlert: React.FC = ({ connectionID }) => { t('ConnectionAlert.PopupPoint3'), ]} /> - - {t('ConnectionAlert.SettingsInstruction')} - - {t('ConnectionAlert.SettingsLink')} - - . - + {t('ConnectionAlert.SettingsInstruction')} + {t('ConnectionAlert.PrivacyMessage')} } diff --git a/packages/legacy/core/App/components/misc/EmptyListContacts.tsx b/packages/legacy/core/App/components/misc/EmptyListContacts.tsx index 203bb8e6d5..d0e3c8feae 100644 --- a/packages/legacy/core/App/components/misc/EmptyListContacts.tsx +++ b/packages/legacy/core/App/components/misc/EmptyListContacts.tsx @@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native' import { useTheme } from '../../contexts/theme' import { ContactStackParams, Screens, Stacks } from '../../types/navigators' -import { testIdWithKey } from '../../utils/testable' +import Link from '../texts/Link' export interface EmptyListProps { navigation: StackNavigationProp @@ -26,12 +26,12 @@ const EmptyListContacts: React.FC = ({ navigation }) => { }, text: { textAlign: 'center', - paddingTop: 10, + marginTop: 10, }, - fakeLink: { - ...TextTheme.normal, - color: ColorPallet.notification.infoText, - textDecorationLine: 'underline', + link: { + textAlign: 'center', + marginTop: 10, + alignSelf: 'center', }, }) @@ -42,15 +42,9 @@ const EmptyListContacts: React.FC = ({ navigation }) => { return ( - {t('Contacts.EmptyList')} + {t('Contacts.EmptyList')} {t('Contacts.PeopleAndOrganizations')} - - {t('Contacts.WhatAreContacts')} - + ) } diff --git a/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx b/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx index e7af1c9f4d..945a14f8d6 100644 --- a/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx +++ b/packages/legacy/core/App/components/modals/CommonRemoveModal.tsx @@ -10,7 +10,7 @@ import { hitSlop } from '../../constants' import { useTheme } from '../../contexts/theme' import { GenericFn } from '../../types/fn' import { ModalUsage } from '../../types/remove' -import { testIdWithKey } from '../../utils/testable' +import { testIdForAccessabilityLabel, testIdWithKey } from '../../utils/testable' import Button, { ButtonType } from '../buttons/Button' import ContentGradient from '../misc/ContentGradient' import UnorderedListModal from '../misc/UnorderedListModal' @@ -40,6 +40,8 @@ const Dropdown: React.FC = ({ title, content }) => { <> setIsCollapsed(!isCollapsed)} + accessibilityLabel={title} + testID={testIdWithKey(testIdForAccessabilityLabel(title))} style={[ { padding: 15, diff --git a/packages/legacy/core/App/components/texts/Link.tsx b/packages/legacy/core/App/components/texts/Link.tsx new file mode 100644 index 0000000000..c97f9d6114 --- /dev/null +++ b/packages/legacy/core/App/components/texts/Link.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import { Text, StyleSheet, TextStyle, TextProps } from 'react-native' + +import { useTheme } from '../../contexts/theme' +import { testIdForAccessabilityLabel, testIdWithKey } from '../../utils/testable' + +interface LinkProps { + linkText: string + style?: TextStyle + textProps?: TextProps + onPress: () => void +} + +const Link: React.FC = ({ linkText, onPress, style = {}, ...textProps }) => { + const { TextTheme, ColorPallet } = useTheme() + const styles = StyleSheet.create({ + link: { + ...TextTheme.normal, + color: ColorPallet.brand.link, + textDecorationLine: 'underline', + alignSelf: 'flex-start', + }, + }) + return ( + + {linkText} + + ) +} + +export default Link diff --git a/packages/legacy/core/App/index.ts b/packages/legacy/core/App/index.ts index d1bf54a4b6..a5f44297df 100644 --- a/packages/legacy/core/App/index.ts +++ b/packages/legacy/core/App/index.ts @@ -16,6 +16,7 @@ import ErrorModal from './components/modals/ErrorModal' import NetInfo from './components/network/NetInfo' import Record from './components/record/Record' import InfoTextBox from './components/texts/InfoTextBox' +import Link from './components/texts/Link' import { ToastType } from './components/toast/BaseToast' import toastConfig from './components/toast/ToastConfig' import { AttachTourStep } from './components/tour/AttachTourStep' @@ -54,7 +55,7 @@ export { animatedComponents } from './animated-components' export { theme } from './theme' export { useAuth } from './contexts/auth' export { NavigationTheme } from './theme' -export { testIdWithKey } from './utils/testable' +export { testIdWithKey, testIdForAccessabilityLabel } from './utils/testable' export { Screens, Stacks, TabStacks } from './types/navigators' export { createStyles } from './screens/OnboardingPages' export { statusBarStyleForColor, StatusBarStyles } from './utils/luminance' @@ -120,6 +121,7 @@ export { InfoTextBox, InfoBox, InfoBoxType, + Link, ToastType, toastConfig, RootStack, diff --git a/packages/legacy/core/App/screens/WhatAreContacts.tsx b/packages/legacy/core/App/screens/WhatAreContacts.tsx index 72f75ebf3b..950fb5063b 100644 --- a/packages/legacy/core/App/screens/WhatAreContacts.tsx +++ b/packages/legacy/core/App/screens/WhatAreContacts.tsx @@ -3,6 +3,7 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native' +import Link from '../components/texts/Link' import { useTheme } from '../contexts/theme' import { Screens, Stacks } from '../types/navigators' @@ -28,10 +29,6 @@ const WhatAreContacts: React.FC = ({ navigation }) => { paddingLeft: 25, paddingRight: 25, }, - fakeLink: { - color: ColorPallet.brand.link, - textDecorationLine: 'underline', - }, }) const goToContactList = () => { @@ -65,12 +62,8 @@ const WhatAreContacts: React.FC = ({ navigation }) => { {t('WhatAreContacts.Title')} {t('WhatAreContacts.Preamble')} {bulletPoints} - - {`${t('WhatAreContacts.RemoveContacts')} `} - - {t('WhatAreContacts.ContactsLink')}. - - + {`${t('WhatAreContacts.RemoveContacts')} `} + ) diff --git a/packages/legacy/core/__tests__/components/Link.test.tsx b/packages/legacy/core/__tests__/components/Link.test.tsx new file mode 100644 index 0000000000..b61bcac158 --- /dev/null +++ b/packages/legacy/core/__tests__/components/Link.test.tsx @@ -0,0 +1,16 @@ +import { render, fireEvent } from '@testing-library/react-native' +import React from 'react' + +import Link from '../../App/components/texts/Link' +import { testIdWithKey } from '../../App/utils/testable' + +describe('Link Component', () => { + test('Renders correctly, testID exists, and is pressable', async () => { + const onPress = jest.fn() + const tree = render() + const link = tree.getByTestId(testIdWithKey('MyLink')) + fireEvent(link, 'press') + expect(onPress).toBeCalledTimes(1) + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap index f3e209c3ac..304ca29c87 100644 --- a/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap +++ b/packages/legacy/core/__tests__/components/__snapshots__/CommonRemoveModal.test.tsx.snap @@ -2614,6 +2614,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = ` } > + my link + +`; diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap index 107eadfbf4..84ac6530a3 100644 --- a/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap +++ b/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap @@ -195,39 +195,36 @@ exports[`WhatAreContacts Screen Renders correctly 1`] = ` + WhatAreContacts.RemoveContacts + + - WhatAreContacts.RemoveContacts - - WhatAreContacts.ContactsLink - . - + WhatAreContacts.ContactsLink