Improve a11y of inputs (#2846)

* Improve a11y of inputs

* Remove old comment
zio/stable
Eric Bailey 2024-02-12 20:49:50 -06:00 committed by GitHub
parent d7a3246fe3
commit fad40dda97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 35 deletions

View File

@ -5,13 +5,11 @@ import {
TextInputProps, TextInputProps,
TextStyle, TextStyle,
ViewStyle, ViewStyle,
Pressable,
StyleSheet, StyleSheet,
AccessibilityProps, AccessibilityProps,
} from 'react-native' } from 'react-native'
import {HITSLOP_20} from 'lib/constants' import {HITSLOP_20} from 'lib/constants'
import {isWeb} from '#/platform/detection'
import {useTheme, atoms as a, web, tokens, android} from '#/alf' import {useTheme, atoms as a, web, tokens, android} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
@ -41,7 +39,6 @@ export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}>
export function Root({children, isInvalid = false}: RootProps) { export function Root({children, isInvalid = false}: RootProps) {
const inputRef = React.useRef<TextInput>(null) const inputRef = React.useRef<TextInput>(null)
const rootRef = React.useRef<View>(null)
const { const {
state: hovered, state: hovered,
onIn: onHoverIn, onIn: onHoverIn,
@ -72,35 +69,17 @@ export function Root({children, isInvalid = false}: RootProps) {
], ],
) )
React.useLayoutEffect(() => {
const root = rootRef.current
if (!root || !isWeb) return
// @ts-ignore web only
root.tabIndex = -1
}, [])
return ( return (
<Context.Provider value={context}> <Context.Provider value={context}>
<Pressable <View
accessibilityRole="button" style={[a.flex_row, a.align_center, a.relative, a.w_full, a.px_md]}
ref={rootRef} {...web({
role="none" onClick: () => inputRef.current?.focus(),
style={[ onMouseOver: onHoverIn,
a.flex_row, onMouseOut: onHoverOut,
a.align_center, })}>
a.relative,
a.w_full,
a.px_md,
{
paddingVertical: 14,
},
]}
// onPressIn/out don't work on android web
onPress={() => inputRef.current?.focus()}
onHoverIn={onHoverIn}
onHoverOut={onHoverOut}>
{children} {children}
</Pressable> </View>
</Context.Provider> </Context.Provider>
) )
} }
@ -187,7 +166,6 @@ export function createInput(Component: typeof TextInput) {
<Component <Component
accessibilityHint={undefined} accessibilityHint={undefined}
{...rest} {...rest}
aria-label={label}
accessibilityLabel={label} accessibilityLabel={label}
ref={ctx.inputRef} ref={ctx.inputRef}
value={value} value={value}
@ -204,14 +182,17 @@ export function createInput(Component: typeof TextInput) {
a.text_md, a.text_md,
t.atoms.text, t.atoms.text,
a.px_xs, a.px_xs,
android({
paddingBottom: 2,
}),
{ {
// paddingVertical doesn't work w/multiline - esb
paddingTop: 14,
paddingBottom: 14,
lineHeight: a.text_md.fontSize * 1.1875, lineHeight: a.text_md.fontSize * 1.1875,
textAlignVertical: rest.multiline ? 'top' : undefined, textAlignVertical: rest.multiline ? 'top' : undefined,
minHeight: rest.multiline ? 60 : undefined, minHeight: rest.multiline ? 80 : undefined,
}, },
android({
paddingBottom: 16,
}),
]} ]}
/> />
@ -313,7 +294,6 @@ export function Suffix({
const ctx = React.useContext(Context) const ctx = React.useContext(Context)
return ( return (
<Text <Text
aria-label={label}
accessibilityLabel={label} accessibilityLabel={label}
accessibilityHint={accessibilityHint} accessibilityHint={accessibilityHint}
style={[ style={[