octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-04-13 18:01:58 +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
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
57 changed files with 661 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Account.tsx
View File

@ -31,6 +31,7 @@ const ComponentAccount: React.FC<Props> = ({
return (
<Pressable
accessibilityRole='button'
style={[styles.itemDefault, styles.itemAccount]}
onPress={customOnPress || onPress}
>

71
src/components/Button.tsx
View File

@ -4,6 +4,7 @@ import layoutAnimation from '@utils/styles/layoutAnimation'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useMemo, useRef } from 'react'
import {
AccessibilityProps,
Pressable,
StyleProp,
StyleSheet,
@ -14,15 +15,18 @@ import {
import { Flow } from 'react-native-animated-spinkit'
export interface Props {
accessibilityLabel?: AccessibilityProps['accessibilityLabel']
accessibilityHint?: AccessibilityProps['accessibilityHint']
style?: StyleProp<ViewStyle>
type: 'icon' | 'text'
content: string
selected?: boolean
loading?: boolean
destructive?: boolean
disabled?: boolean
active?: boolean
strokeWidth?: number
size?: 'S' | 'M' | 'L'
@ -34,13 +38,15 @@ export interface Props {
}
const Button: React.FC<Props> = ({
accessibilityLabel,
accessibilityHint,
style: customStyle,
type,
content,
selected,
loading = false,
destructive = false,
disabled = false,
active = false,
strokeWidth,
size = 'M',
spacing = 'S',
@ -57,7 +63,7 @@ const Button: React.FC<Props> = ({
} else {
mounted.current = true
}
}, [content, loading, disabled, active])
}, [content, loading, disabled])
const loadingSpinkit = useMemo(
() => (
@ -68,40 +74,22 @@ const Button: React.FC<Props> = ({
[mode]
)
const colorContent = useMemo(() => {
if (active) {
const mainColor = useMemo(() => {
if (selected) {
return theme.blue
} else if (overlay) {
return theme.primaryOverlay
} else if (disabled || loading) {
return theme.disabled
} else {
if (overlay) {
return theme.primaryOverlay
if (destructive) {
return theme.red
} else {
if (disabled) {
return theme.secondary
} else {
if (destructive) {
return theme.red
} else {
return theme.primaryDefault
}
}
return theme.primaryDefault
}
}
}, [mode, disabled])
const colorBorder = useMemo(() => {
if (active) {
return theme.blue
} else {
if (disabled || loading) {
return theme.secondary
} else {
if (destructive) {
return theme.red
} else {
return theme.primaryDefault
}
}
}
}, [mode, loading, disabled])
}, [mode, disabled, loading, selected])
const colorBackground = useMemo(() => {
if (overlay) {
return theme.backgroundOverlayInvert
@ -117,7 +105,7 @@ const Button: React.FC<Props> = ({
<>
<Icon
name={content}
color={colorContent}
color={mainColor}
strokeWidth={strokeWidth}
style={{ opacity: loading ? 0 : 1 }}
size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
@ -130,7 +118,7 @@ const Button: React.FC<Props> = ({
<>
<Text
style={{
color: colorContent,
color: mainColor,
fontSize:
StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
fontWeight: destructive
@ -145,7 +133,7 @@ const Button: React.FC<Props> = ({
</>
)
}
}, [mode, content, loading, disabled, active])
}, [mode, content, loading, disabled])
enum spacingMapping {
XS = 'S',
@ -156,11 +144,20 @@ const Button: React.FC<Props> = ({
return (
<Pressable
accessible
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole='button'
accessibilityState={{
selected,
disabled: disabled || selected,
busy: loading
}}
style={[
styles.button,
{
borderWidth: overlay ? 0 : 1,
borderColor: colorBorder,
borderColor: mainColor,
backgroundColor: colorBackground,
paddingVertical: StyleConstants.Spacing[spacing],
paddingHorizontal:
@ -171,7 +168,7 @@ const Button: React.FC<Props> = ({
testID='base'
onPress={onPress}
children={children}
disabled={disabled || active || loading}
disabled={selected || disabled || loading}
/>
)
}

16
src/components/GracefullyImage.tsx
View File

@ -1,6 +1,7 @@
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo, useRef, useState } from 'react'
import {
AccessibilityProps,
Image,
ImageStyle,
Pressable,
@ -18,6 +19,9 @@ import { Blurhash } from 'react-native-blurhash'
// preview, original, remote -> first show preview, then original, if original failed, then remote
export interface Props {
accessibilityLabel?: AccessibilityProps['accessibilityLabel']
accessibilityHint?: AccessibilityProps['accessibilityHint']
hidden?: boolean
uri: { preview?: string; original?: string; remote?: string }
blurhash?: string
@ -36,6 +40,8 @@ export interface Props {
const GracefullyImage = React.memo(
({
accessibilityLabel,
accessibilityHint,
hidden = false,
uri,
blurhash,
@ -103,10 +109,7 @@ const GracefullyImage = React.memo(
} else {
return (
<View
style={[
styles.blurhash,
{ backgroundColor: theme.disabled }
]}
style={[styles.blurhash, { backgroundColor: theme.disabled }]}
/>
)
}
@ -117,6 +120,11 @@ const GracefullyImage = React.memo(
return (
<Pressable
{...(onPress
? { accessibilityRole: 'imagebutton' }
: { accessibilityRole: 'image' })}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
{...(onPress
? hidden

6
src/components/Hashtag.tsx
View File

@ -28,7 +28,11 @@ const ComponentHashtag: React.FC<Props> = ({
}, [])
return (
<Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
<Pressable
accessibilityRole='button'
style={styles.itemDefault}
onPress={customOnPress || onPress}
>
<Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
#{hashtag.name}
</Text>

21
src/components/Header/Right.tsx
View File

@ -2,10 +2,20 @@ import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import {
AccessibilityProps,
Pressable,
StyleSheet,
Text,
View
} from 'react-native'
import { Flow } from 'react-native-animated-spinkit'
export interface Props {
accessibilityLabel?: string
accessibilityHint?: string
accessibilityState?: AccessibilityProps['accessibilityState']
type?: 'icon' | 'text'
content: string
native?: boolean
@ -18,6 +28,11 @@ export interface Props {
}
const HeaderRight: React.FC<Props> = ({
// Accessibility - Start
accessibilityLabel,
accessibilityHint,
accessibilityState,
// Accessibility - End
type = 'icon',
content,
native = true,
@ -75,6 +90,10 @@ const HeaderRight: React.FC<Props> = ({
return (
<Pressable
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
accessibilityRole='button'
accessibilityState={accessibilityState}
onPress={onPress}
children={children}
disabled={disabled || loading}

6
src/components/Icon.tsx
View File

@ -1,8 +1,10 @@
import React, { createElement } from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native'
import * as FeatherIcon from 'react-native-feather'
export interface Props {
accessibilityLabel?: AccessibilityProps['accessibilityLabel']
name: string
size: number
color: string
@ -12,6 +14,7 @@ export interface Props {
}
const Icon: React.FC<Props> = ({
accessibilityLabel,
name,
size,
color,
@ -21,6 +24,7 @@ const Icon: React.FC<Props> = ({
}) => {
return (
<View
accessibilityLabel={accessibilityLabel}
style={[
style,
{

40
src/components/Instance.tsx
View File

@ -1,5 +1,6 @@
import Button from '@components/Button'
import Icon from '@components/Icon'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { useAppsQuery } from '@utils/queryHooks/apps'
import { useInstanceQuery } from '@utils/queryHooks/instance'
import { getInstances } from '@utils/slices/instancesSlice'
@ -7,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import * as WebBrowser from 'expo-web-browser'
import { debounce } from 'lodash'
import React, { useCallback, useMemo, useState } from 'react'
import React, { RefObject, useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
Alert,
@ -19,6 +20,7 @@ import {
TextInput,
View
} from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import { useSelector } from 'react-redux'
import { Placeholder } from 'rn-placeholder'
import analytics from './analytics'
@ -26,16 +28,19 @@ import InstanceAuth from './Instance/Auth'
import InstanceInfo from './Instance/Info'
export interface Props {
scrollViewRef?: RefObject<ScrollView>
disableHeaderImage?: boolean
goBack?: boolean
}
const ComponentInstance: React.FC<Props> = ({
scrollViewRef,
disableHeaderImage,
goBack = false
}) => {
const { t } = useTranslation('componentInstance')
const { mode, theme } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const instances = useSelector(getInstances, () => true)
const [domain, setDomain] = useState<string>()
@ -139,6 +144,8 @@ const ComponentInstance: React.FC<Props> = ({
<View style={styles.base}>
<View style={styles.inputRow}>
<TextInput
accessible={false}
accessibilityRole='none'
style={[
styles.prefix,
{
@ -148,12 +155,8 @@ const ComponentInstance: React.FC<Props> = ({
}
]}
editable={false}
children={
<Text
style={{ color: theme.primaryDefault }}
children='https://'
/>
}
placeholder='https://'
placeholderTextColor={theme.primaryDefault}
/>
<TextInput
style={[
@ -172,10 +175,14 @@ const ComponentInstance: React.FC<Props> = ({
keyboardType='url'
textContentType='URL'
onSubmitEditing={onSubmitEditing}
placeholder={t('server.textInput.placeholder')}
placeholder={' ' + t('server.textInput.placeholder')}
placeholderTextColor={theme.secondary}
returnKeyType='go'
keyboardAppearance={mode}
{...(scrollViewRef && {
onFocus: () =>
setTimeout(() => scrollViewRef.current?.scrollToEnd(), 150)
})}
/>
<Button
type='text'
@ -229,9 +236,21 @@ const ComponentInstance: React.FC<Props> = ({
color={theme.secondary}
style={styles.disclaimerIcon}
/>
<Text style={[styles.disclaimerText, { color: theme.secondary }]}>
<Text
style={[styles.disclaimerText, { color: theme.secondary }]}
accessibilityRole='link'
onPress={() => {
if (screenReaderEnabled) {
analytics('view_privacy')
WebBrowser.openBrowserAsync(
'https://tooot.app/privacy-policy'
)
}
}}
>
{t('server.disclaimer.base')}
<Text
accessible
style={{ color: theme.blue }}
onPress={() => {
analytics('view_privacy')
@ -265,8 +284,7 @@ const styles = StyleSheet.create({
},
prefix: {
borderBottomWidth: 1,
...StyleConstants.FontStyle.M,
paddingRight: StyleConstants.Spacing.XS
...StyleConstants.FontStyle.M
},
textInput: {
flex: 1,

6
src/components/Instance/Info.tsx
View File

@ -16,8 +16,10 @@ const InstanceInfo = React.memo(
const { theme } = useTheme()
return (
<View style={[styles.base, style]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
<View style={[styles.base, style]} accessible>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{header}
</Text>
{content ? (
<Text style={[styles.content, { color: theme.primaryDefault }]}>
{content}

6
src/components/Menu/Container.tsx
View File

@ -7,7 +7,11 @@ export interface Props {
}
const MenuContainer: React.FC<Props> = ({ children }) => {
return <View style={styles.base}>{children}</View>
return (
<View style={styles.base}>
{children}
</View>
)
}
const styles = StyleSheet.create({

21
src/components/Menu/Row.tsx
View File

@ -1,4 +1,5 @@
import Icon from '@components/Icon'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { ColorDefinitions } from '@utils/styles/themes'
@ -41,6 +42,7 @@ const MenuRow: React.FC<Props> = ({
onPress
}) => {
const { theme } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const loadingSpinkit = useMemo(
() => (
@ -55,11 +57,22 @@ const MenuRow: React.FC<Props> = ({
)
return (
<View style={styles.base}>
<View
style={styles.base}
accessible
accessibilityRole={switchValue ? 'switch' : 'button'}
accessibilityState={switchValue ? { checked: switchValue } : undefined}
>
<TapGestureHandler
onHandlerStateChange={({ nativeEvent }) =>
nativeEvent.state === State.ACTIVE && !loading && onPress && onPress()
}
onHandlerStateChange={async ({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE && !loading) {
if (screenReaderEnabled && switchOnValueChange) {
switchOnValueChange()
} else {
if (onPress) onPress()
}
}
}}
>
<View style={styles.core}>
<View style={styles.front}>

8
src/components/Message.tsx
View File

@ -3,6 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { getTheme } from '@utils/styles/themes'
import React from 'react'
import { AccessibilityInfo } from 'react-native'
import FlashMessage, {
hideMessage,
showMessage
@ -36,6 +37,8 @@ const displayMessage = ({
mode: 'light' | 'dark'
type: 'success' | 'error' | 'warning'
}) => {
AccessibilityInfo.announceForAccessibility(message + '.' + description)
enum iconMapping {
success = 'CheckCircle',
error = 'XCircle',
@ -98,7 +101,10 @@ const Message = React.memo(
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
textStyle={{
color: theme.primaryDefault,
...StyleConstants.FontStyle.S
}}
// @ts-ignore
textProps={{ numberOfLines: 2 }}
/>

10
src/components/Parse/Emojis.tsx
View File

@ -4,6 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { adaptiveScale } from '@utils/styles/scaling'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text } from 'react-native'
import FastImage from 'react-native-fast-image'
import { useSelector } from 'react-redux'
@ -27,6 +28,7 @@ const ParseEmojis = React.memo(
adaptiveSize = false,
fontBold = false
}: Props) => {
const { t } = useTranslation('componentParse')
const { reduceMotionEnabled } = useAccessibility()
const adaptiveFontsize = useSelector(getSettingsFontsize)
@ -69,10 +71,10 @@ const ParseEmojis = React.memo(
return emojiShortcode === `:${emoji.shortcode}:`
})
if (emojiIndex === -1) {
return <Text key={emojiShortcode}>{emojiShortcode}</Text>
return <Text key={emojiShortcode + i}>{emojiShortcode}</Text>
} else {
if (i === 0) {
return <Text key={emojiShortcode}> </Text>
return <Text key={emojiShortcode + i}> </Text>
} else {
const uri = reduceMotionEnabled
? emojis[emojiIndex].static_url
@ -80,7 +82,7 @@ const ParseEmojis = React.memo(
if (validUrl.isHttpsUri(uri)) {
return (
<FastImage
key={emojiShortcode}
key={emojiShortcode + i}
source={{ uri }}
style={styles.image}
/>
@ -91,7 +93,7 @@ const ParseEmojis = React.memo(
}
}
} else {
return <Text key={str}>{str}</Text>
return <Text key={i}>{str}</Text>
}
})
) : (

2
src/components/Parse/HTML.tsx
View File

@ -53,6 +53,7 @@ const renderNode = ({
: true
return (
<Text
accessible
key={index}
style={{
color: theme.blue,
@ -251,6 +252,7 @@ const ParseHTML = React.memo(
/>
{expandAllow ? (
<Pressable
accessibilityLabel=''
onPress={() => {
analytics('status_readmore', { allow: expandAllow, expanded })
layoutAnimation()

2
src/components/Timeline/Default.tsx
View File

@ -62,6 +62,7 @@ const TimelineDefault: React.FC<Props> = ({
return (
<Pressable
accessible={highlighted ? false : true}
style={[
styles.statusView,
{
@ -84,6 +85,7 @@ const TimelineDefault: React.FC<Props> = ({
<TimelineAvatar
queryKey={disableOnPress ? undefined : queryKey}
account={actualStatus.account}
highlighted={highlighted}
/>
<TimelineHeaderDefault
queryKey={disableOnPress ? undefined : queryKey}

6
src/components/Timeline/Notifications.tsx
View File

@ -84,7 +84,11 @@ const TimelineNotifications: React.FC<Props> = ({
}}
>
<View style={styles.header}>
<TimelineAvatar queryKey={queryKey} account={actualAccount} />
<TimelineAvatar
queryKey={queryKey}
account={actualAccount}
highlighted={highlighted}
/>
<TimelineHeaderNotification
queryKey={queryKey}
notification={notification}

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}

3
src/i18n/en/common.json
View File

@ -3,6 +3,9 @@
"apply": "Apply",
"cancel": "Cancel"
},
"customEmoji": {
"accessibilityLabel": "Custom emoji {{emoji}}"
},
"message": {
"success": {
"message": "{{function}} succeed"

48
src/i18n/en/components/timeline.json
View File

@ -29,19 +29,33 @@
}
},
"actions": {
"favourited": {
"function": "Favourite toot"
"reply": {
"accessibilityLabel": "Reply to this toot"
},
"reblogged": {
"accessibilityLabel": "Boost this toot",
"function": "Boost toot"
},
"favourited": {
"accessibilityLabel": "Add this toot to favourites",
"function": "Favourite toot"
},
"bookmarked": {
"accessibilityLabel": "Add this toot to bookmarks",
"function": "Bookmark toot"
}
},
"actionsUsers": {
"reblogged_by": "$t(screenTabs:shared.users.statuses.reblogged_by)",
"favourited_by": "$t(screenTabs:shared.users.statuses.favourited_by)"
"reblogged_by": {
"accessibilityLabel": "{{count}} users have boosted this toot",
"accessibilityHint": "Tap to know the users",
"text": "$t(screenTabs:shared.users.statuses.reblogged_by)"
},
"favourited_by": {
"accessibilityLabel": "{{count}} users have favourited this toot",
"accessibilityHint": "Tap to know the users",
"text": "$t(screenTabs:shared.users.statuses.favourited_by)"
}
},
"attachment": {
"sensitive": {
@ -52,13 +66,36 @@
"button": "Try remote link"
}
},
"avatar": {
"accessibilityLabel": "Avatar of {{name}}",
"accessibilityHint": "Tap to go to {{name}}'s page"
},
"content": {
"expandHint": "hidden content"
},
"fullConversation": "Read conversations",
"header": {
"shared": {
"application": "Tooted with {{application}}"
"account": {
"name": {
"accessibilityHint": "User's display name"
},
"account": {
"accessibilityHint": "User's account"
}
},
"application": "Tooted with {{application}}",
"muted": {
"accessibilityLabel": "Toot muted"
},
"visibility": {
"direct": {
"accessibilityLabel": "Toot is a direct message"
},
"private": {
"accessibilityLabel": "Toot is visible to followers only"
}
}
},
"conversation": {
"withAccounts": "With",
@ -67,6 +104,7 @@
}
},
"actions": {
"accessibilityHint": "Actions for this toot, such as its posted user, toot itself",
"account": {
"heading": "About user",
"mute": {

41
src/i18n/en/screens/compose.json
View File

@ -45,15 +45,38 @@
},
"footer": {
"attachments": {
"sensitive": "Mark attachments as sensitive"
"sensitive": "Mark attachments as sensitive",
"remove": {
"accessibilityLabel": "Remove uploaded attachment, number {{attachment}}"
},
"edit": {
"accessibilityLabel": "Edit uploaded attachment, number {{attachment}}"
},
"upload": {
"accessibilityLabel": "Upload more attachments"
}
},
"emojis": {
"accessibilityHint": "Tap to add emoji to toot"
},
"poll": {
"option": {
"placeholder": {
"accessibilityLabel": "Field number {{index}}",
"single": "Single choice",
"multiple": "Multiple choice"
}
},
"quantity": {
"reduce": {
"accessibilityLabel": "Reduce poll options to {{amount}}",
"accessibilityHint": "Minimum poll options quantity reached, currently has {{amount}}"
},
"increase": {
"accessibilityLabel": "Increase poll options to {{amount}}",
"accessibilityHint": "Maximum poll options quantity reached, currently has {{amount}}"
}
},
"multiple": {
"heading": "Choice type",
"options": {
@ -79,6 +102,8 @@
},
"actions": {
"attachment": {
"accessibilityLabel": "Upload attachment",
"accessibilityHint": "Poll function will be disabled when there is any attachment",
"actions": {
"options": {
"library": "Upload from photo library",
@ -113,7 +138,12 @@
}
}
},
"poll": {
"accessibilityLabel": "Add poll",
"accessibilityHint": "Attachment function will be disabled when poll is active"
},
"visibility": {
"accessibilityLabel": "Toot visibility is {{visibility}}",
"title": "Toot visibility",
"options": {
"public": "Public",
@ -122,6 +152,13 @@
"direct": "Direct message",
"cancel": "$t(common:buttons.cancel)"
}
},
"spoiler": {
"accessibilityLabel": "Spoiler"
},
"emoji": {
"accessibilityLabel": "Add emoji",
"accessibilityHint": "Open emoji selection panel, swipe horizontally to change page"
}
},
"drafts": "Draft ({{count}})",
@ -131,6 +168,7 @@
"header": {
"title": "Edit attachment",
"right": {
"accessibilityLabel": "Save editing attachment",
"failed": {
"title": "Editing failed",
"button": "Try again"
@ -150,6 +188,7 @@
"title": "Draft"
},
"content": {
"accessibilityHint": "Saved draft, tap to edit this draft",
"textEmpty": "Content empty"
}
}

6
src/i18n/en/screens/imageViewer.json
View File

@ -1,8 +1,12 @@
{
"content": {
"actions": {
"accessibilityLabel": "More actions of this image",
"accessibilityHint": "You can save or share this image"
},
"options": {
"save": "Save image",
"share": "Share iamge",
"share": "Share image",
"cancel": "$t(common:buttons.cancel)"
},
"save": {

16
src/i18n/en/screens/tabs.json
View File

@ -17,6 +17,18 @@
"name": "About me"
}
},
"common": {
"search": {
"accessibilityLabel": "Search",
"accessibilityHint": "Search for hashtags, users or toots"
}
},
"notifications": {
"filter": {
"accessibilityLabel": "Filter",
"accessibilityHint": "Filter shown notifications' types"
}
},
"me": {
"stacks": {
"bookmarks": {
@ -175,6 +187,10 @@
},
"shared": {
"account": {
"actions": {
"accessibilityLabel": "Actions for user {{user}}",
"accessibilityHint": "You can mute, blokc, report or share this user"
},
"moved": "User moved",
"created_at": "Registered on: {{date}}",
"summary": {

2
src/screens/Announcements.tsx
View File

@ -224,7 +224,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
onPress={() => navigation.goBack()}
/>
<HeaderCenter content={t('screenAnnouncements:heading')} />
<View style={{ opacity: 0 }}>
<View style={{ opacity: 0 }} accessible={false}>
<HeaderRight
content='MoreHorizontal'
native={false}

6
src/screens/Compose/DraftsList/Root.tsx
View File

@ -55,6 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
({ item }: { item: ComposeStateDraft }) => {
return (
<Pressable
accessibilityHint={t('content.draftsList.content.accessibilityHint')}
style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
onPress={async () => {
setCheckingAttachments(true)
@ -181,7 +182,10 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
visible={checkingAttachments}
children={
<View
style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
style={[
styles.modal,
{ backgroundColor: theme.backgroundOverlayInvert }
]}
children={
<Text
children='检查附件在服务器的状态…'

10
src/screens/Compose/EditAttachment/Image.tsx
View File

@ -1,3 +1,4 @@
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext } from 'react'
@ -22,6 +23,7 @@ export interface Props {
const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const { composeState, composeDispatch } = useContext(ComposeContext)
const theAttachmentRemote = composeState.attachments.uploads[index].remote!
@ -160,9 +162,11 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
</Animated.View>
</PanGestureHandler>
</View>
<Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.imageFocus')}
</Text>
{screenReaderEnabled ? null : (
<Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.imageFocus')}
</Text>
)}
</>
)
}

7
src/screens/Compose/EditAttachment/Submit.tsx
View File

@ -22,6 +22,9 @@ const ComposeEditAttachmentSubmit: React.FC<Props> = ({ index }) => {
return (
<HeaderRight
accessibilityLabel={t(
'content.editAttachment.header.right.accessibilityLabel'
)}
type='icon'
content='Save'
loading={isSubmitting}
@ -39,8 +42,8 @@ const ComposeEditAttachmentSubmit: React.FC<Props> = ({ index }) => {
) {
formData.append(
'focus',
`${theAttachment.meta.focus.x || 0},${-theAttachment.meta.focus.y ||
0}`
`${theAttachment.meta?.focus?.x || 0},${-theAttachment.meta?.focus
?.y || 0}`
)
}

39
src/screens/Compose/Root.tsx
View File

@ -4,8 +4,20 @@ import { useSearchQuery } from '@utils/queryHooks/search'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { forEach, groupBy, sortBy } from 'lodash'
import React, { useCallback, useContext, useEffect, useMemo } from 'react'
import { FlatList, StyleSheet, View } from 'react-native'
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useRef
} from 'react'
import {
AccessibilityInfo,
findNodeHandle,
FlatList,
StyleSheet,
View
} from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import ComposeActions from './Root/Actions'
import ComposePosting from './Posting'
@ -44,6 +56,15 @@ const ComposeRoot = React.memo(
const { reduceMotionEnabled } = useAccessibility()
const { theme } = useTheme()
const accessibleRefDrafts = useRef(null)
const accessibleRefAttachments = useRef(null)
const accessibleRefEmojis = useRef(null)
useEffect(() => {
const tagDrafts = findNodeHandle(accessibleRefDrafts.current)
tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
}, [accessibleRefDrafts.current])
const { composeState, composeDispatch } = useContext(ComposeContext)
const { isFetching, data, refetch } = useSearchQuery({
@ -106,6 +127,16 @@ const ComposeRoot = React.memo(
[composeState]
)
const ListFooter = useCallback(
() => (
<ComposeRootFooter
accessibleRefAttachments={accessibleRefAttachments}
accessibleRefEmojis={accessibleRefEmojis}
/>
),
[]
)
return (
<View style={styles.base}>
<FlatList
@ -113,14 +144,14 @@ const ComposeRoot = React.memo(
ListEmptyComponent={listEmpty}
keyboardShouldPersistTaps='always'
ListHeaderComponent={ComposeRootHeader}
ListFooterComponent={ComposeRootFooter}
ListFooterComponent={ListFooter}
ItemSeparatorComponent={ComponentSeparator}
// @ts-ignore
data={data ? data[composeState.tag?.type] : undefined}
keyExtractor={() => Math.random().toString()}
/>
<ComposeActions />
<ComposeDrafts />
<ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
<ComposePosting />
</View>
)

56
src/screens/Compose/Root/Actions.tsx
View File

@ -164,20 +164,50 @@ const ComposeActions: React.FC = () => {
return (
<View
accessibilityRole='toolbar'
style={[
styles.additions,
{ backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
{
backgroundColor: theme.backgroundDefault,
borderTopColor: theme.border
}
]}
>
<Pressable
accessibilityRole='button'
accessibilityLabel={t(
'content.root.actions.attachment.accessibilityLabel'
)}
accessibilityHint={t(
'content.root.actions.attachment.accessibilityHint'
)}
accessibilityState={{
disabled: composeState.poll.active
}}
style={styles.button}
onPress={attachmentOnPress}
children={<Icon name='Aperture' size={24} color={attachmentColor} />}
/>
<Pressable
accessibilityRole='button'
accessibilityLabel={t('content.root.actions.poll.accessibilityLabel')}
accessibilityHint={t('content.root.actions.poll.accessibilityHint')}
accessibilityState={{
disabled: composeState.attachments.uploads.length ? true : false,
expanded: composeState.poll.active
}}
style={styles.button}
onPress={pollOnPress}
children={<Icon name='BarChart2' size={24} color={pollColor} />}
/>
<Pressable
accessibilityRole='button'
accessibilityLabel={t(
'content.root.actions.visibility.accessibilityLabel',
{ visibility: composeState.visibility }
)}
accessibilityState={{ disabled: composeState.visibilityLock }}
style={styles.button}
onPress={visibilityOnPress}
children={
<Icon
@ -190,18 +220,34 @@ const ComposeActions: React.FC = () => {
}
/>
<Pressable
accessibilityRole='button'
accessibilityLabel={t(
'content.root.actions.spoiler.accessibilityLabel'
)}
accessibilityState={{ expanded: composeState.spoiler.active }}
style={styles.button}
onPress={spoilerOnPress}
children={
<Icon
name='AlertTriangle'
size={24}
color={
composeState.spoiler.active ? theme.primaryDefault : theme.secondary
composeState.spoiler.active
? theme.primaryDefault
: theme.secondary
}
/>
}
/>
<Pressable
accessibilityRole='button'
accessibilityLabel={t('content.root.actions.emoji.accessibilityLabel')}
accessibilityHint={t('content.root.actions.emoji.accessibilityHint')}
accessibilityState={{
disabled: composeState.emoji.emojis ? false : true,
expanded: composeState.emoji.active
}}
style={styles.button}
onPress={emojiOnPress}
children={<Icon name='Smile' size={24} color={emojiColor} />}
/>
@ -210,6 +256,12 @@ const ComposeActions: React.FC = () => {
}
const styles = StyleSheet.create({
button: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: '100%'
},
additions: {
height: 45,
borderTopWidth: StyleSheet.hairlineWidth,

9
src/screens/Compose/Root/Drafts.tsx
View File

@ -3,13 +3,17 @@ import { useNavigation } from '@react-navigation/native'
import { getInstanceDrafts } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import React, { useContext, useEffect } from 'react'
import React, { RefObject, useContext, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
import { useSelector } from 'react-redux'
import ComposeContext from '../utils/createContext'
const ComposeDrafts: React.FC = () => {
export interface Props {
accessibleRefDrafts: RefObject<View>
}
const ComposeDrafts: React.FC<Props> = ({ accessibleRefDrafts }) => {
const { t } = useTranslation('screenCompose')
const navigation = useNavigation()
const { composeState } = useContext(ComposeContext)
@ -24,6 +28,7 @@ const ComposeDrafts: React.FC = () => {
if (!composeState.dirty && instanceDrafts?.length) {
return (
<View
ref={accessibleRefDrafts}
style={styles.base}
children={
<Button

23
src/screens/Compose/Root/Footer.tsx
View File

@ -3,15 +3,30 @@ import ComposeEmojis from '@screens/Compose/Root/Footer/Emojis'
import ComposePoll from '@screens/Compose/Root/Footer/Poll'
import ComposeReply from '@screens/Compose/Root/Footer/Reply'
import ComposeContext from '@screens/Compose/utils/createContext'
import React, { useContext } from 'react'
import React, { RefObject, useContext } from 'react'
import { SectionList, View } from 'react-native'
const ComposeRootFooter: React.FC = () => {
export interface Props {
accessibleRefAttachments: RefObject<View>
accessibleRefEmojis: RefObject<SectionList>
}
const ComposeRootFooter: React.FC<Props> = ({
accessibleRefAttachments,
accessibleRefEmojis
}) => {
const { composeState } = useContext(ComposeContext)
return (
<>
{composeState.emoji.active ? <ComposeEmojis /> : null}
{composeState.attachments.uploads.length ? <ComposeAttachments /> : null}
{composeState.emoji.active ? (
<ComposeEmojis accessibleRefEmojis={accessibleRefEmojis} />
) : null}
{composeState.attachments.uploads.length ? (
<ComposeAttachments
accessibleRefAttachments={accessibleRefAttachments}
/>
) : null}
{composeState.poll.active ? <ComposePoll /> : null}
{composeState.replyToStatus ? <ComposeReply /> : null}
</>

21
src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -8,6 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import { useTheme } from '@utils/styles/ThemeManager'
import React, {
RefObject,
useCallback,
useContext,
useEffect,
@ -28,9 +29,13 @@ import ComposeContext from '../../utils/createContext'
import { ExtendedAttachment } from '../../utils/types'
import addAttachment from './addAttachment'
export interface Props {
accessibleRefAttachments: RefObject<View>
}
const DEFAULT_HEIGHT = 200
const ComposeAttachments: React.FC = () => {
const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
const { showActionSheetWithOptions } = useActionSheet()
const { composeState, composeDispatch } = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
@ -153,6 +158,10 @@ const ComposeAttachments: React.FC = () => {
) : (
<View style={styles.actions}>
<Button
accessibilityLabel={t(
'content.root.footer.attachments.remove.accessibilityLabel',
{ attachment: index + 1 }
)}
type='icon'
content='X'
spacing='M'
@ -169,6 +178,10 @@ const ComposeAttachments: React.FC = () => {
}}
/>
<Button
accessibilityLabel={t(
'content.root.footer.attachments.edit.accessibilityLabel',
{ attachment: index + 1 }
)}
type='icon'
content='Edit'
spacing='M'
@ -192,6 +205,10 @@ const ComposeAttachments: React.FC = () => {
const listFooter = useMemo(
() => (
<Pressable
accessible
accessibilityLabel={t(
'content.root.footer.attachments.upload.accessibilityLabel'
)}
style={[
styles.container,
{
@ -233,7 +250,7 @@ const ComposeAttachments: React.FC = () => {
[]
)
return (
<View style={styles.base}>
<View style={styles.base} ref={accessibleRefAttachments} accessible>
<Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
<Icon
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}

41
src/screens/Compose/Root/Footer/Emojis.tsx
View File

@ -3,14 +3,30 @@ import haptics from '@components/haptics'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useContext, useMemo } from 'react'
import { Pressable, SectionList, StyleSheet, Text, View } from 'react-native'
import React, {
RefObject,
useCallback,
useContext,
useEffect,
useMemo
} from 'react'
import { useTranslation } from 'react-i18next'
import {
AccessibilityInfo,
findNodeHandle,
Pressable,
SectionList,
StyleSheet,
Text,
View
} from 'react-native'
import FastImage from 'react-native-fast-image'
import validUrl from 'valid-url'
import updateText from '../../updateText'
import ComposeContext from '../../utils/createContext'
const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
const { t } = useTranslation()
const { reduceMotionEnabled } = useAccessibility()
const { composeState, composeDispatch } = useContext(ComposeContext)
@ -29,6 +45,12 @@ const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
if (validUrl.isHttpsUri(uri)) {
return (
<FastImage
accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
emoji: emoji.shortcode
})}
accessibilityHint={t(
'screenCompose:content.root.footer.emojis.accessibilityHint'
)}
source={{ uri: reduceMotionEnabled ? emoji.static_url : emoji.url }}
style={styles.emoji}
/>
@ -42,10 +64,21 @@ const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
)
}
const ComposeEmojis: React.FC = () => {
export interface Props {
accessibleRefEmojis: RefObject<SectionList>
}
const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
const { composeState } = useContext(ComposeContext)
const { theme } = useTheme()
useEffect(() => {
const tagEmojis = findNodeHandle(accessibleRefEmojis.current)
if (composeState.emoji.active) {
tagEmojis && AccessibilityInfo.setAccessibilityFocus(tagEmojis)
}
}, [composeState.emoji.active])
const listHeader = useCallback(
({ section: { title } }) => (
<Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
@ -73,6 +106,8 @@ const ComposeEmojis: React.FC = () => {
return (
<View style={styles.base}>
<SectionList
accessible
ref={accessibleRefEmojis}
horizontal
keyboardShouldPersistTaps='always'
sections={composeState.emoji.emojis || []}

30
src/screens/Compose/Root/Footer/Poll.tsx
View File

@ -48,6 +48,10 @@ const ComposePoll: React.FC = () => {
color={theme.secondary}
/>
<TextInput
accessibilityLabel={t(
'content.root.footer.poll.option.placeholder.accessibilityLabel',
{ index: i + 1 }
)}
keyboardAppearance={mode}
{...(i === 0 && firstRender && { autoFocus: true })}
style={[
@ -80,6 +84,19 @@ const ComposePoll: React.FC = () => {
<View style={styles.controlAmount}>
<View style={styles.firstButton}>
<Button
{...((total > 2)
? {
accessibilityLabel: t(
'content.root.footer.poll.quantity.reduce.accessibilityLabel',
{ amount: total - 1 }
)
}
: {
accessibilityHint: t(
'content.root.footer.poll.quantity.reduce.accessibilityHint',
{ amount: total }
)
})}
onPress={() => {
analytics('compose_poll_reduce_press')
total > 2 &&
@ -95,6 +112,19 @@ const ComposePoll: React.FC = () => {
/>
</View>
<Button
{...(total < 4
? {
accessibilityLabel: t(
'content.root.footer.poll.quantity.increase.accessibilityLabel',
{ amount: total + 1 }
)
}
: {
accessibilityHint: t(
'content.root.footer.poll.quantity.increase.accessibilityHint',
{ amount: total }
)
})}
onPress={() => {
analytics('compose_poll_increase_press')
total < 4 &&

3
src/screens/Compose/Root/Header/SpoilerInput.tsx
View File

@ -1,6 +1,6 @@
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext } from 'react'
import React, { useContext, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, TextInput } from 'react-native'
import formatText from '../../formatText'
@ -45,7 +45,6 @@ const ComposeSpoilerInput: React.FC = () => {
payload: { selection: { start, end } }
})
}}
ref={composeState.textInputFocus.refs.spoiler}
scrollEnabled={false}
onFocus={() =>
composeDispatch({

2
src/screens/Compose/utils/initialState.ts
View File

@ -37,7 +37,7 @@ const composeInitialState: Omit<ComposeState, 'timestamp'> = {
replyToStatus: undefined,
textInputFocus: {
current: 'text',
refs: { text: createRef(), spoiler: createRef() }
refs: { text: createRef() }
}
}

2
src/screens/Compose/utils/types.d.ts vendored
View File

@ -63,7 +63,7 @@ export type ComposeState = {
replyToStatus?: Mastodon.Status
textInputFocus: {
current: 'text' | 'spoiler'
refs: { text: RefObject<TextInput>; spoiler: RefObject<TextInput> }
refs: { text: RefObject<TextInput> }
}
}

4
src/screens/ImageViewer/components/ImageItem.android.tsx
View File

@ -98,6 +98,10 @@ const ImageItem = ({
setImageDimensions
})}
style={{ flex: 1 }}
imageStyle={{
flex: 1,
resizeMode: 'stretch'
}}
/>
}
/>

2
src/screens/ImagesViewer.tsx
View File

@ -120,6 +120,8 @@ const HeaderComponent = React.memo(
content={`${currentIndex + 1} / ${imageUrls.length}`}
/>
<HeaderRight
accessibilityLabel={t('content.actions.accessibilityLabel')}
accessibilityHint={t('content.actions.accessibilityHint')}
content='MoreHorizontal'
native={false}
background

23
src/screens/Tabs.tsx
View File

@ -1,3 +1,4 @@
import GracefullyImage from '@components/GracefullyImage'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import {
@ -67,32 +68,28 @@ const ScreenTabs = React.memo(
case 'Tab-Notifications':
return <Icon name='Bell' size={size} color={color} />
case 'Tab-Me':
return instanceActive !== -1 ? (
<Image
source={{
uri: instanceAccount?.avatarStatic
return (
<GracefullyImage
key={instanceAccount?.avatarStatic}
uri={{ original: instanceAccount?.avatarStatic }}
dimension={{
width: size,
height: size
}}
style={{
width: size,
height: size,
borderRadius: size,
overflow: 'hidden',
borderWidth: focused ? 2 : 0,
borderColor: focused ? theme.secondary : color
}}
/>
) : (
<Icon
name={focused ? 'Meh' : 'Smile'}
size={size}
color={!focused ? theme.secondary : color}
/>
)
default:
return <Icon name='AlertOctagon' size={size} color={color} />
}
}
}),
[instanceAccount, instanceActive]
[instanceAccount?.avatarStatic, instanceActive]
)
const tabBarOptions = useMemo(
() => ({

2
src/screens/Tabs/Local.tsx
View File

@ -37,6 +37,8 @@ const TabLocal = React.memo(
}),
headerRight: () => (
<HeaderRight
accessibilityLabel={t('common.search.accessibilityLabel')}
accessibilityHint={t('common.search.accessibilityHint')}
content='Search'
onPress={() => {
analytics('search_tap', { page: 'Local' })

31
src/screens/Tabs/Me/Switch/Root.tsx
View File

@ -11,7 +11,8 @@ import {
} from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { groupBy } from 'lodash'
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
@ -20,10 +21,10 @@ import { useDispatch, useSelector } from 'react-redux'
interface Props {
instance: Instance
disabled?: boolean
selected?: boolean
}
const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
const queryClient = useQueryClient()
const navigation = useNavigation()
const dispatch = useDispatch()
@ -31,10 +32,10 @@ const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
return (
<Button
type='text'
disabled={disabled}
selected={selected}
style={styles.button}
content={`@${instance.account.acct}@${instance.uri}${
disabled ? ' ✓' : ''
selected ? ' ✓' : ''
}`}
onPress={() => {
haptics('Light')
@ -50,11 +51,17 @@ const AccountButton: React.FC<Props> = ({ instance, disabled = false }) => {
const ScreenMeSwitchRoot: React.FC = () => {
const { t } = useTranslation('screenTabs')
const { theme } = useTheme()
const instances = useSelector(getInstances)
const instanceActive = useSelector(getInstanceActive)
const instances = useSelector(getInstances, () => true)
const instanceActive = useSelector(getInstanceActive, () => true)
const scrollViewRef = useRef<ScrollView>(null)
return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
<ScrollView
ref={scrollViewRef}
style={styles.base}
keyboardShouldPersistTaps='always'
>
<View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('me.switch.existing')}
@ -74,7 +81,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
<AccountButton
key={index}
instance={instance}
disabled={
selected={
instance.url === localAccount.url &&
instance.token === localAccount.token &&
instance.account.id === localAccount.account.id
@ -90,7 +97,11 @@ const ScreenMeSwitchRoot: React.FC = () => {
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('me.switch.new')}
</Text>
<ComponentInstance disableHeaderImage goBack />
<ComponentInstance
scrollViewRef={scrollViewRef}
disableHeaderImage
goBack
/>
</View>
</ScrollView>
)

2
src/screens/Tabs/Notifications.tsx
View File

@ -34,6 +34,8 @@ const TabNotifications = React.memo(
}),
headerRight: () => (
<HeaderRight
accessibilityLabel={t('notifications.filter.accessibilityLabel')}
accessibilityHint={t('notifications.filter.accessibilityHint')}
content='Filter'
onPress={() => {
analytics('notificationsfilter_tap')

2
src/screens/Tabs/Public.tsx
View File

@ -62,6 +62,8 @@ const TabPublic = React.memo(
),
headerRight: () => (
<HeaderRight
accessibilityLabel={t('common.search.accessibilityLabel')}
accessibilityHint={t('common.search.accessibilityHint')}
content='Search'
onPress={() => {
analytics('search_tap', { page: pages[segment].key })

8
src/screens/Tabs/Shared/Account.tsx
View File

@ -6,6 +6,7 @@ import { useAccountQuery } from '@utils/queryHooks/account'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useEffect, useMemo, useReducer } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
import { useSharedValue } from 'react-native-reanimated'
import AccountAttachments from './Account/Attachments'
@ -23,6 +24,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
},
navigation
}) => {
const { t, i18n } = useTranslation('screenTabs')
const { theme } = useTheme()
const { data } = useAccountQuery({ id: account.id })
@ -38,6 +40,10 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
navigation.setOptions({
headerRight: () => (
<HeaderRight
accessibilityLabel={t('shared.account.actions.accessibilityLabel', {
user: data?.acct
})}
accessibilityHint={t('shared.account.actions.accessibilityHint')}
content='MoreHorizontal'
onPress={() => {
analytics('bottomsheet_open_press', {
@ -54,7 +60,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
)
})
return updateHeaderRight()
}, [])
}, [i18n.language])
const onScroll = useCallback(({ nativeEvent }) => {
scrollY.value = nativeEvent.contentOffset.y

1
src/screens/Tabs/Shared/sharedScreens.tsx
View File

@ -163,6 +163,7 @@ const sharedScreens = (
}
/>
<TextInput
accessibilityRole='search'
keyboardAppearance={mode}
style={[
styles.textInput,

26
src/utils/accessibility/AccessibilityManager.tsx
View File

@ -3,46 +3,60 @@ import { AccessibilityInfo } from 'react-native'
type ContextType = {
reduceMotionEnabled: boolean
screenReaderEnabled: boolean
}
const AccessibilityContext = createContext<ContextType>({
reduceMotionEnabled: false
reduceMotionEnabled: false,
screenReaderEnabled: false
})
export const useAccessibility = () => useContext(AccessibilityContext)
const AccessibilityManager: React.FC = ({ children }) => {
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
setReduceMotionEnabled(reduceMotionEnabled)
const loadReduceMotion = async () => {
const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
setScreenReaderEnabled(screenReaderEnabled)
const loadAccessibilityInfo = async () => {
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
setReduceMotionEnabled(reduceMotion)
setScreenReaderEnabled(screenReader)
}
useEffect(() => {
loadReduceMotion()
loadAccessibilityInfo()
AccessibilityInfo.addEventListener(
'reduceMotionChanged',
handleReduceMotionChanged
)
AccessibilityInfo.addEventListener(
'screenReaderChanged',
handleScreenReaderEnabled
)
return () => {
AccessibilityInfo.removeEventListener(
'reduceMotionChanged',
handleReduceMotionChanged
)
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
handleScreenReaderEnabled
)
}
}, [])
return (
<AccessibilityContext.Provider
value={{
reduceMotionEnabled
}}
value={{ reduceMotionEnabled, screenReaderEnabled }}
>
{children}
</AccessibilityContext.Provider>