[APP-724] Collection of accessibility fixes (#949)
* Fix: include alt text on the web lightbox image * a11y: Dont read the 'ALT' label * a11y: remove a wrapper behavior from posts This appears to have been introduced with the goal of creating meta actions on posts, but the behavior seems counter-productive. The accessibility inspector was unable to access individual items within the post and therefore most content was simply skipped. There may be a way to support the post actions without losing the ability to access the inner elements but I couldnt find it. -prf * a11y: apply alt tags to image wrappers so they get read * a11y: set Link accessibilityLabel to the title if none set * a11y: skip the SANDBOX watermark * a11y: improve post meta to not read UI and give a useful date * ally: improve post controls * a11y: add labels to lightbox images on mobile * fix types
This commit is contained in:
parent
0163ba0af8
commit
bc55241c9a
19 changed files with 80 additions and 148 deletions
|
@ -1,6 +1,6 @@
|
|||
import React, {useCallback, useMemo, useState} from 'react'
|
||||
import React, {useMemo, useState} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {AccessibilityActionEvent, Linking, StyleSheet, View} from 'react-native'
|
||||
import {Linking, StyleSheet, View} from 'react-native'
|
||||
import Clipboard from '@react-native-clipboard/clipboard'
|
||||
import {AtUri} from '@atproto/api'
|
||||
import {
|
||||
|
@ -158,40 +158,6 @@ export const FeedItem = observer(function ({
|
|||
moderation = {behavior: ModerationBehaviorCode.Show}
|
||||
}
|
||||
|
||||
const accessibilityActions = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: 'reply',
|
||||
label: 'Reply',
|
||||
},
|
||||
{
|
||||
name: 'repost',
|
||||
label: item.post.viewer?.repost ? 'Undo repost' : 'Repost',
|
||||
},
|
||||
{name: 'like', label: item.post.viewer?.like ? 'Unlike' : 'Like'},
|
||||
],
|
||||
[item.post.viewer?.like, item.post.viewer?.repost],
|
||||
)
|
||||
|
||||
const onAccessibilityAction = useCallback(
|
||||
(event: AccessibilityActionEvent) => {
|
||||
switch (event.nativeEvent.actionName) {
|
||||
case 'like':
|
||||
onPressToggleLike()
|
||||
break
|
||||
case 'reply':
|
||||
onPressReply()
|
||||
break
|
||||
case 'repost':
|
||||
onPressToggleRepost()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
[onPressReply, onPressToggleLike, onPressToggleRepost],
|
||||
)
|
||||
|
||||
if (!record || deleted) {
|
||||
return <View />
|
||||
}
|
||||
|
@ -201,9 +167,7 @@ export const FeedItem = observer(function ({
|
|||
testID={`feedItem-by-${item.post.author.handle}`}
|
||||
style={outerStyles}
|
||||
href={itemHref}
|
||||
moderation={moderation}
|
||||
accessibilityActions={accessibilityActions}
|
||||
onAccessibilityAction={onAccessibilityAction}>
|
||||
moderation={moderation}>
|
||||
{isThreadChild && (
|
||||
<View
|
||||
style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue