Text field updates

src/components/forms/TextField.tsx

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