zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[APP-724] Collection of accessibility fixes (#949)

Browse source 
* 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:
Paul Frazee 2023-07-03 15:57:53 -05:00 • committed by GitHub
parent 0163ba0af8
commit bc55241c9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 80 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -1,6 +1,6 @@
import React, {useCallback, useMemo} from 'react'
import React, {useMemo} 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, AppBskyFeedDefs} from '@atproto/api'
import {
@ -138,40 +138,6 @@ export const PostThreadItem = observer(function PostThreadItem({
)
}, [item, store])
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) {
return <ErrorMessage message="Invalid or unsupported post record" />
}
@ -193,9 +159,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<PostHider
testID={`postThreadItem-by-${item.post.author.handle}`}
style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
moderation={item.moderation.thread}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
moderation={item.moderation.thread}>
<PostSandboxWarning />
<View style={styles.layout}>
<View style={styles.layoutAvi}>
@ -369,9 +333,7 @@ export const PostThreadItem = observer(function PostThreadItem({
pal.view,
item._showParentReplyLine && styles.noTopBorder,
]}
moderation={item.moderation.thread}
accessibilityActions={accessibilityActions}
onAccessibilityAction={onAccessibilityAction}>
moderation={item.moderation.thread}>
{item._showParentReplyLine && (
<View
style={[