From 40446a13044b5d45a920c3c9cf3cea8837255385 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 9 Jan 2024 17:58:47 -0600
Subject: [PATCH] Add labels to input

---
 src/view/com/forms/InputText.tsx | 23 +++++++++++++++++++++--
 src/view/screens/DebugNew.tsx    |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/view/com/forms/InputText.tsx b/src/view/com/forms/InputText.tsx
index 4f136a3241..55506b84d7 100644
--- a/src/view/com/forms/InputText.tsx
+++ b/src/view/com/forms/InputText.tsx
@@ -2,14 +2,17 @@ import React from 'react'
 import {View, TextInput, TextInputProps, TextStyle} from 'react-native'
 
 import {useTheme, atoms, web, tokens} from '#/alf'
+import {Text} from '#/view/com/Typography'
 
 type Props = Omit<TextInputProps, 'placeholder'> & {
+  label?: string
   placeholder: string
   hasError?: boolean
   icon?: React.FunctionComponent<any>
 }
 
-export function InputText({hasError, icon: Icon, ...props}: Props) {
+export function InputText({label, hasError, icon: Icon, ...props}: Props) {
+  const labelId = React.useId()
   const t = useTheme()
   const [state, setState] = React.useState({
     hovered: false,
@@ -77,7 +80,23 @@ export function InputText({hasError, icon: Icon, ...props}: Props) {
 
   return (
     <View style={[atoms.relative, atoms.w_full]}>
+      {label && (
+        <Text
+          nativeID={labelId}
+          style={[
+            atoms.text_sm,
+            atoms.font_semibold,
+            t.atoms.text_contrast_700,
+            atoms.mb_sm,
+          ]}>
+          {label}
+        </Text>
+      )}
+
       <TextInput
+        aria-labelledby={labelId}
+        aria-label={label}
+        placeholderTextColor={t.atoms.text_contrast_500.color}
         {...props}
         onFocus={onFocus}
         onBlur={onBlur}
@@ -85,13 +104,13 @@ export function InputText({hasError, icon: Icon, ...props}: Props) {
           onMouseEnter: onHoverIn,
           onMouseLeave: onHoverOut,
         })}
-        placeholderTextColor={t.atoms.text_contrast_500.color}
         style={[
           t.name === 'dark' ? t.atoms.bg_contrast_100 : t.atoms.bg,
           atoms.w_full,
           atoms.px_lg,
           atoms.py_md,
           atoms.rounded_sm,
+          atoms.text_md,
           t.atoms.border,
           t.atoms.text,
           {borderWidth: 2},
diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx
index de08ab8228..369b57caff 100644
--- a/src/view/screens/DebugNew.tsx
+++ b/src/view/screens/DebugNew.tsx
@@ -217,7 +217,7 @@ export function Buttons() {
 function Forms() {
   return (
     <View style={[a.gap_md, a.align_start]}>
-      <InputText placeholder="Type here" />
+      <InputText label="Name" placeholder="Type here" />
       <InputText placeholder="Type here" icon={Logo} />
       <InputText hasError placeholder="Type here" icon={Logo} />
     </View>