Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(a11y): avoid plain `div`s as button or tabs (#6084)

Co-authored-by: Hailey <me@haileyok.com>

authored by

Cynthia
Hailey
and committed by
GitHub
ac9d910e c580f20b

+22 -7
+2 -1
src/components/Menu/index.tsx
··· 46 46 return <Context.Provider value={context}>{children}</Context.Provider> 47 47 } 48 48 49 - export function Trigger({children, label}: TriggerProps) { 49 + export function Trigger({children, label, role = 'button'}: TriggerProps) { 50 50 const {control} = React.useContext(Context) 51 51 const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() 52 52 const { ··· 70 70 onPressIn, 71 71 onPressOut, 72 72 accessibilityLabel: label, 73 + accessibilityRole: role, 73 74 }, 74 75 }) 75 76 }
+2 -1
src/components/Menu/index.web.tsx
··· 111 111 ) 112 112 RadixTriggerPassThrough.displayName = 'RadixTriggerPassThrough' 113 113 114 - export function Trigger({children, label}: TriggerProps) { 114 + export function Trigger({children, label, role = 'button'}: TriggerProps) { 115 115 const {control} = React.useContext(Context) 116 116 const { 117 117 state: hovered, ··· 155 155 onMouseEnter, 156 156 onMouseLeave, 157 157 accessibilityLabel: label, 158 + accessibilityRole: role, 158 159 }, 159 160 }) 160 161 }
+4
src/components/Menu/types.ts
··· 1 1 import React from 'react' 2 2 import { 3 3 AccessibilityProps, 4 + AccessibilityRole, 4 5 GestureResponderEvent, 5 6 PressableProps, 6 7 } from 'react-native' ··· 36 37 export type TriggerProps = { 37 38 children(props: TriggerChildProps): React.ReactNode 38 39 label: string 40 + role?: AccessibilityRole 39 41 } 40 42 export type TriggerChildProps = 41 43 | { ··· 63 65 onPressIn: () => void 64 66 onPressOut: () => void 65 67 accessibilityLabel: string 68 + accessibilityRole: AccessibilityRole 66 69 } 67 70 } 68 71 | { ··· 83 86 onMouseEnter: () => void 84 87 onMouseLeave: () => void 85 88 accessibilityLabel: string 89 + accessibilityRole: AccessibilityRole 86 90 } 87 91 } 88 92
+6 -2
src/view/com/pager/TabBar.tsx
··· 118 118 ) 119 119 120 120 return ( 121 - <View testID={testID} style={[pal.view, styles.outer]}> 121 + <View 122 + testID={testID} 123 + style={[pal.view, styles.outer]} 124 + accessibilityRole="tablist"> 122 125 <DraggableScrollView 123 126 testID={`${testID}-selector`} 124 127 horizontal={true} ··· 135 138 onLayout={e => onItemLayout(e, i)} 136 139 style={styles.item} 137 140 hoverStyle={pal.viewLight} 138 - onPress={() => onPressItem(i)}> 141 + onPress={() => onPressItem(i)} 142 + accessibilityRole="tab"> 139 143 <View style={[styles.itemInner, selected && indicatorStyle]}> 140 144 <Text 141 145 emoji
+5 -3
src/view/com/post-thread/PostThreadItem.tsx
··· 29 29 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies' 30 30 import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn' 31 31 import {atoms as a, useTheme} from '#/alf' 32 + import {InlineLinkText} from '#/components/Link' 32 33 import {AppModerationCause} from '#/components/Pills' 33 34 import {RichText} from '#/components/RichText' 34 35 import {SubtleWebHover} from '#/components/SubtleWebHover' ··· 744 745 &middot; 745 746 </NewText> 746 747 747 - <NewText 748 + <InlineLinkText 749 + to="#" 750 + label={_(msg`Translate`)} 748 751 style={[a.text_sm, pal.link]} 749 - title={_(msg`Translate`)} 750 752 onPress={onTranslatePress}> 751 753 <Trans>Translate</Trans> 752 - </NewText> 754 + </InlineLinkText> 753 755 </> 754 756 )} 755 757 </View>
+3
src/view/com/util/post-ctrls/PostCtrls.tsx
··· 256 256 requireAuth(() => onPressReply()) 257 257 } 258 258 }} 259 + accessibilityRole="button" 259 260 accessibilityLabel={plural(post.replyCount || 0, { 260 261 one: 'Reply (# reply)', 261 262 other: 'Reply (# replies)', ··· 293 294 testID="likeBtn" 294 295 style={btnStyle} 295 296 onPress={() => requireAuth(() => onPressToggleLike())} 297 + accessibilityRole="button" 296 298 accessibilityLabel={ 297 299 post.viewer?.like 298 300 ? plural(post.likeCount || 0, { ··· 332 334 onShare() 333 335 } 334 336 }} 337 + accessibilityRole="button" 335 338 accessibilityLabel={_(msg`Share`)} 336 339 accessibilityHint="" 337 340 hitSlop={POST_CTRL_HITSLOP}>