Skip to content

Commit

Permalink
chore: various a11y updates (#1004)
Browse files Browse the repository at this point in the history
Signed-off-by: Bryce McMath <[email protected]>
  • Loading branch information
bryce-mcmath authored Oct 20, 2023
1 parent 62c13ee commit 8056c3d
Show file tree
Hide file tree
Showing 11 changed files with 142 additions and 61 deletions.
2 changes: 2 additions & 0 deletions packages/legacy/core/App/components/chat/MessageInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: '' }}
/>
)

Expand Down
19 changes: 7 additions & 12 deletions packages/legacy/core/App/components/misc/ConnectionAlert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -41,11 +42,6 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
paddingVertical: 15,
marginVertical: 15,
},
fakeLink: {
...TextTheme.normal,
color: ColorPallet.notification.infoText,
textDecorationLine: 'underline',
},
row: {
flexDirection: 'row',
},
Expand Down Expand Up @@ -104,13 +100,12 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
t('ConnectionAlert.PopupPoint3'),
]}
/>
<Text style={styles.modalText}>
{t('ConnectionAlert.SettingsInstruction')}
<Text style={styles.fakeLink} onPress={navigateToSettings}>
{t('ConnectionAlert.SettingsLink')}
</Text>
.
</Text>
<Text style={styles.modalText}>{t('ConnectionAlert.SettingsInstruction')}</Text>
<Link
style={{ marginBottom: 8 }}
onPress={navigateToSettings}
linkText={t('ConnectionAlert.SettingsLink')}
/>
<Text style={styles.modalText}>{t('ConnectionAlert.PrivacyMessage')}</Text>
</View>
}
Expand Down
22 changes: 8 additions & 14 deletions packages/legacy/core/App/components/misc/EmptyListContacts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<ContactStackParams, Screens.Contacts>
Expand All @@ -26,12 +26,12 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
},
text: {
textAlign: 'center',
paddingTop: 10,
marginTop: 10,
},
fakeLink: {
...TextTheme.normal,
color: ColorPallet.notification.infoText,
textDecorationLine: 'underline',
link: {
textAlign: 'center',
marginTop: 10,
alignSelf: 'center',
},
})

Expand All @@ -42,15 +42,9 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
return (
<View style={styles.container}>
<Assets.svg.contactBook fill={ListItems.emptyList.color} height={120} />
<Text style={[TextTheme.headingThree, styles.text, { paddingTop: 30 }]}>{t('Contacts.EmptyList')}</Text>
<Text style={[TextTheme.headingThree, styles.text, { marginTop: 30 }]}>{t('Contacts.EmptyList')}</Text>
<Text style={[ListItems.emptyList, styles.text]}>{t('Contacts.PeopleAndOrganizations')}</Text>
<Text
style={[styles.fakeLink, styles.text]}
onPress={navigateToWhatAreContacts}
testID={testIdWithKey('WhatAreContacts')}
>
{t('Contacts.WhatAreContacts')}
</Text>
<Link style={styles.link} linkText={t('Contacts.WhatAreContacts')} onPress={navigateToWhatAreContacts} />
</View>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -40,6 +40,8 @@ const Dropdown: React.FC<RemoveProps> = ({ title, content }) => {
<>
<TouchableOpacity
onPress={() => setIsCollapsed(!isCollapsed)}
accessibilityLabel={title}
testID={testIdWithKey(testIdForAccessabilityLabel(title))}
style={[
{
padding: 15,
Expand Down
39 changes: 39 additions & 0 deletions packages/legacy/core/App/components/texts/Link.tsx
Original file line number Diff line number Diff line change
@@ -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<LinkProps> = ({ 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 (
<Text
style={[styles.link, style]}
accessibilityLabel={linkText}
accessible
accessibilityRole={'link'}
testID={testIdWithKey(testIdForAccessabilityLabel(linkText))}
onPress={onPress}
{...textProps}
>
{linkText}
</Text>
)
}

export default Link
4 changes: 3 additions & 1 deletion packages/legacy/core/App/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -120,6 +121,7 @@ export {
InfoTextBox,
InfoBox,
InfoBoxType,
Link,
ToastType,
toastConfig,
RootStack,
Expand Down
13 changes: 3 additions & 10 deletions packages/legacy/core/App/screens/WhatAreContacts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -28,10 +29,6 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
paddingLeft: 25,
paddingRight: 25,
},
fakeLink: {
color: ColorPallet.brand.link,
textDecorationLine: 'underline',
},
})

const goToContactList = () => {
Expand Down Expand Up @@ -65,12 +62,8 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
<Text style={styles.title}>{t('WhatAreContacts.Title')}</Text>
<Text style={TextTheme.normal}>{t('WhatAreContacts.Preamble')}</Text>
{bulletPoints}
<Text style={[TextTheme.normal, { marginBottom: 30 }]}>
{`${t('WhatAreContacts.RemoveContacts')} `}
<Text onPress={goToContactList} style={[TextTheme.normal, styles.fakeLink]}>
{t('WhatAreContacts.ContactsLink')}.
</Text>
</Text>
<Text style={TextTheme.normal}>{`${t('WhatAreContacts.RemoveContacts')} `}</Text>
<Link linkText={t('WhatAreContacts.ContactsLink')} onPress={goToContactList} />
</ScrollView>
</SafeAreaView>
)
Expand Down
16 changes: 16 additions & 0 deletions packages/legacy/core/__tests__/components/Link.test.tsx
Original file line number Diff line number Diff line change
@@ -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(<Link linkText={'my link'} onPress={onPress} />)
const link = tree.getByTestId(testIdWithKey('MyLink'))
fireEvent(link, 'press')
expect(onPress).toBeCalledTimes(1)
expect(tree).toMatchSnapshot()
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -2614,6 +2614,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
}
>
<View
accessibilityLabel="CredentialDetails.YouWillNotLose"
accessibilityState={
Object {
"busy": undefined,
Expand Down Expand Up @@ -2651,6 +2652,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
"padding": 15,
}
}
testID="com.ariesbifold:id/CredentialDetails.YouWillNotLose"
>
<Text
style={
Expand Down Expand Up @@ -2822,6 +2824,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
}
>
<View
accessibilityLabel="CredentialDetails.HowToGetThisCredentialBack"
accessibilityState={
Object {
"busy": undefined,
Expand Down Expand Up @@ -2859,6 +2862,7 @@ exports[`CommonRemoveModal Component Remove credential renders correctly 1`] = `
"padding": 15,
}
}
testID="com.ariesbifold:id/CredentialDetails.HowToGetThisCredentialBack"
>
<Text
style={
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Link Component Renders correctly, testID exists, and is pressable 1`] = `
<Text
accessibilityLabel="my link"
accessibilityRole="link"
accessible={true}
onPress={
[MockFunction] {
"calls": Array [
Array [],
],
"results": Array [
Object {
"type": "return",
"value": undefined,
},
],
}
}
style={
Array [
Object {
"alignSelf": "flex-start",
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
"textDecorationLine": "underline",
},
Object {},
]
}
testID="com.ariesbifold:id/MyLink"
>
my link
</Text>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -195,39 +195,36 @@ exports[`WhatAreContacts Screen Renders correctly 1`] = `
</Text>
</View>
<Text
style={
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
}
}
>
WhatAreContacts.RemoveContacts
</Text>
<Text
accessibilityLabel="WhatAreContacts.ContactsLink"
accessibilityRole="link"
accessible={true}
onPress={[Function]}
style={
Array [
Object {
"alignSelf": "flex-start",
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
"textDecorationLine": "underline",
},
Object {
"marginBottom": 30,
},
Object {},
]
}
testID="com.ariesbifold:id/WhatAreContacts.ContactsLink"
>
WhatAreContacts.RemoveContacts
<Text
onPress={[Function]}
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
Object {
"color": "#FFFFFF",
"textDecorationLine": "underline",
},
]
}
>
WhatAreContacts.ContactsLink
.
</Text>
WhatAreContacts.ContactsLink
</Text>
</View>
</RCTScrollView>
Expand Down

0 comments on commit 8056c3d

Please sign in to comment.