octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Refine accessibility

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-04-09 21:43:12 +02:00
parent 9258f4b934
commit d4b28df091
57 changed files with 661 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Timeline/Shared/Actions.tsx
View File

@ -269,12 +269,28 @@ const TimelineActions: React.FC<Props> = ({
>
<View style={styles.actions}>
<Pressable
{...(highlighted
? {
accessibilityLabel: t(
'shared.actions.reply.accessibilityLabel'
),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReply}
children={childrenReply}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t(
'shared.actions.reblogged.accessibilityLabel'
),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReblog}
children={childrenReblog}
@ -284,12 +300,28 @@ const TimelineActions: React.FC<Props> = ({
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t(
'shared.actions.favourited.accessibilityLabel'
),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressFavourite}
children={childrenFavourite}
/>
<Pressable
{...(highlighted
? {
accessibilityLabel: t(
'shared.actions.bookmarked.accessibilityLabel'
),
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressBookmark}
children={childrenBookmark}

24
src/components/Timeline/Shared/ActionsUsers.tsx
View File

@ -28,6 +28,16 @@ const TimelineActionsUsers = React.memo(
<View style={styles.base}>
{status.reblogs_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.reblogged_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.reblogged_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: theme.secondary }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
@ -41,13 +51,23 @@ const TimelineActionsUsers = React.memo(
})
}}
>
{t('shared.actionsUsers.reblogged_by', {
{t('shared.actionsUsers.reblogged_by.text', {
count: status.reblogs_count
})}
</Text>
) : null}
{status.favourites_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.favourited_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.favourited_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: theme.secondary }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
@ -61,7 +81,7 @@ const TimelineActionsUsers = React.memo(
})
}}
>
{t('shared.actionsUsers.favourited_by', {
{t('shared.actionsUsers.favourited_by.text', {
count: status.favourites_count
})}
</Text>

1
src/components/Timeline/Shared/Attachment/Audio.tsx
View File

@ -52,6 +52,7 @@ const AttachmentAudio: React.FC<Props> = ({
return (
<View
accessibilityLabel={audio.description}
style={[
styles.base,
{

1
src/components/Timeline/Shared/Attachment/Image.tsx
View File

@ -23,6 +23,7 @@ const AttachmentImage = React.memo(
return (
<View style={styles.base}>
<GracefullyImage
accessibilityLabel={image.description}
hidden={sensitiveShown}
uri={{ original: image.preview_url, remote: image.remote_url }}
blurhash={image.blurhash}

10
src/components/Timeline/Shared/Attachment/Unsupported.tsx
View File

@ -47,7 +47,11 @@ const AttachmentUnsupported: React.FC<Props> = ({
<Text
style={[
styles.text,
{ color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
{
color: attachment.blurhash
? theme.backgroundDefault
: theme.primaryDefault
}
]}
>
{t('shared.attachment.unsupported.text')}
@ -58,9 +62,9 @@ const AttachmentUnsupported: React.FC<Props> = ({
content={t('shared.attachment.unsupported.button')}
size='S'
overlay
onPress={async () => {
onPress={() => {
analytics('timeline_shared_attachment_unsupported_press')
attachment.remote_url && (await openLink(attachment.remote_url))
attachment.remote_url && openLink(attachment.remote_url)
}}
/>
) : null}

1
src/components/Timeline/Shared/Attachment/Video.tsx
View File

@ -62,6 +62,7 @@ const AttachmentVideo: React.FC<Props> = ({
]}
>
<Video
accessibilityLabel={video.description}
ref={videoPlayer}
style={{
width: '100%',

16
src/components/Timeline/Shared/Avatar.tsx
View File

@ -5,14 +5,17 @@ import { StackNavigationProp } from '@react-navigation/stack'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
export interface Props {
queryKey?: QueryKeyTimeline
account: Mastodon.Account
highlighted: boolean
}
const TimelineAvatar = React.memo(
({ queryKey, account }: Props) => {
({ queryKey, account, highlighted }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
@ -26,6 +29,14 @@ const TimelineAvatar = React.memo(
return (
<GracefullyImage
{...(highlighted && {
accessibilityLabel: t('shared.avatar.accessibilityLabel', {
name: account.display_name
}),
accessibilityHint: t('shared.avatar.accessibilityHint', {
name: account.display_name
})
})}
onPress={onPress}
uri={{ original: account.avatar_static }}
dimension={{
@ -35,8 +46,7 @@ const TimelineAvatar = React.memo(
style={{
borderRadius: StyleConstants.Avatar.M,
overflow: 'hidden',
marginRight: StyleConstants.Spacing.S,
backgroundColor: 'red'
marginRight: StyleConstants.Spacing.S
}}
/>
)

2
src/components/Timeline/Shared/Card.tsx
View File

@ -18,6 +18,8 @@ const TimelineCard = React.memo(
return (
<Pressable
accessible
accessibilityRole='link'
style={[styles.card, { borderColor: theme.border }]}
onPress={async () => {
analytics('timeline_shared_card_press')

3
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -4,6 +4,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, View } from 'react-native'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
@ -19,6 +20,7 @@ export interface Props {
const TimelineHeaderDefault = React.memo(
({ queryKey, rootQueryKey, status }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation()
const { theme } = useTheme()
@ -36,6 +38,7 @@ const TimelineHeaderDefault = React.memo(
{queryKey ? (
<Pressable
accessibilityHint={t('shared.header.actions.accessibilityHint')}
style={styles.action}
onPress={() =>
navigation.navigate('Screen-Actions', {

13
src/components/Timeline/Shared/HeaderShared/Account.tsx
View File

@ -2,6 +2,7 @@ import { ParseEmojis } from '@root/components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
export interface Props {
@ -11,12 +12,19 @@ export interface Props {
const HeaderSharedAccount = React.memo(
({ account, withoutName = false }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
return (
<View style={styles.base}>
{withoutName ? null : (
<Text style={styles.name} numberOfLines={1}>
<Text
accessibilityHint={t(
'shared.header.shared.account.name.accessibilityHint'
)}
style={styles.name}
numberOfLines={1}
>
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
@ -25,6 +33,9 @@ const HeaderSharedAccount = React.memo(
</Text>
)}
<Text
accessibilityHint={t(
'shared.header.shared.account.account.accessibilityHint'
)}
style={[styles.acct, { color: theme.secondary }]}
numberOfLines={1}
>

1
src/components/Timeline/Shared/HeaderShared/Application.tsx
View File

@ -17,6 +17,7 @@ const HeaderSharedApplication = React.memo(
return application && application.name !== 'Web' ? (
<Text
accessibilityRole='link'
onPress={async () => {
analytics('timeline_shared_header_application_press', {
application

3
src/components/Timeline/Shared/HeaderShared/Muted.tsx
View File

@ -2,6 +2,7 @@ import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
export interface Props {
@ -10,10 +11,12 @@ export interface Props {
const HeaderSharedMuted = React.memo(
({ muted }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
return muted ? (
<Icon
accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
name='VolumeX'
size={StyleConstants.Font.Size.S}
color={theme.secondary}

8
src/components/Timeline/Shared/HeaderShared/Visibility.tsx
View File

@ -2,6 +2,7 @@ import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
export interface Props {
@ -10,12 +11,16 @@ export interface Props {
const HeaderSharedVisibility = React.memo(
({ visibility }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
switch (visibility) {
case 'private':
return (
<Icon
accessibilityLabel={t(
'shared.header.shared.visibility.private.accessibilityLabel'
)}
name='Lock'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
@ -25,6 +30,9 @@ const HeaderSharedVisibility = React.memo(
case 'direct':
return (
<Icon
accessibilityLabel={t(
'shared.header.shared.visibility.direct.accessibilityLabel'
)}
name='Mail'
size={StyleConstants.Font.Size.S}
color={theme.secondary}