From 7315b0d7145f6df0c6a4e2818b7d4f9a01d79687 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 16 Jan 2024 11:04:54 -0600
Subject: [PATCH] Some more a11y

---
 src/components/Button.tsx              |  1 +
 src/components/Dialog/index.web.tsx    |  5 ++++-
 src/components/Dialog/types.ts         | 18 ++++++++++++++----
 src/components/forms/InputText.tsx     |  2 ++
 src/components/forms/Toggle.tsx        |  3 +++
 src/view/screens/Storybook/Dialogs.tsx |  4 ++--
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b76839de49..7c032dbad8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -327,6 +327,7 @@ export function Button({
       role="button"
       {...rest}
       aria-label={accessibilityLabel}
+      aria-pressed={state.pressed}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       disabled={disabled || false}
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 6ddc1b0b4a..ad205d3648 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -120,6 +120,7 @@ export function Outer({
 export function Inner({
   children,
   style,
+  label,
   accessibilityLabelledBy,
   accessibilityDescribedBy,
 }: DialogInnerProps) {
@@ -128,9 +129,11 @@ export function Inner({
   return (
     <FocusScope loop enabled trapped>
       <Animated.View
+        aria-modal
+        aria-role="dialog"
+        aria-label={label}
         aria-labelledby={accessibilityLabelledBy}
         aria-describedby={accessibilityDescribedBy}
-        aria-role="dialog"
         // @ts-ignore web only -prf
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index cdcad90da6..d36784183c 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -26,8 +26,18 @@ export type DialogOuterProps = {
   webOptions?: {}
 }
 
-export type DialogInnerProps = React.PropsWithChildren<{
+type DialogInnerPropsBase<T> = React.PropsWithChildren<{
   style?: ViewStyle
-  accessibilityLabelledBy: A11yProps['aria-labelledby']
-  accessibilityDescribedBy: string
-}>
+}> &
+  T
+export type DialogInnerProps =
+  | DialogInnerPropsBase<{
+      label?: undefined
+      accessibilityLabelledBy: A11yProps['aria-labelledby']
+      accessibilityDescribedBy: string
+    }>
+  | DialogInnerPropsBase<{
+      label: string
+      accessibilityLabelledBy?: undefined
+      accessibilityDescribedBy?: undefined
+    }>
diff --git a/src/components/forms/InputText.tsx b/src/components/forms/InputText.tsx
index 5a6b60d468..8933b1d085 100644
--- a/src/components/forms/InputText.tsx
+++ b/src/components/forms/InputText.tsx
@@ -166,6 +166,8 @@ export function createTextInput(Input: typeof TextInput) {
           testID={testID}
           aria-labelledby={labelId}
           aria-label={label}
+          aria-invalid={hasError}
+          aria-placeholder={props.placeholder}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
           placeholderTextColor={t.atoms.text_contrast_400.color}
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index 2bcf40836f..8a9c53a608 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -41,6 +41,7 @@ type ItemProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
   name: string
   value?: boolean
   onChange?: ({name, value}: {name: string; value: boolean}) => void
+  hasError?: boolean
   style?: (state: ItemState) => ViewStyle
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
 }
@@ -51,6 +52,7 @@ function Item({
   value = false,
   disabled,
   onChange,
+  hasError,
   style,
   role,
 }: ItemProps) {
@@ -92,6 +94,7 @@ function Item({
         aria-disabled={disabled ?? false}
         aria-checked={value}
         aria-labelledby={labelId}
+        aria-invalid={hasError}
         role={role}
         accessibilityRole={role as AccessibilityRole}
         accessibilityState={{
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index 5ad6764b0d..5fd8856e55 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -51,8 +51,8 @@ export function Dialogs() {
         <Dialog.Handle />
 
         <Dialog.ScrollableInner
-          accessibilityLabelledBy="dialog-title"
-          accessibilityDescribedBy="dialog-description">
+          accessibilityDescribedBy="dialog-description"
+          accessibilityLabelledBy="dialog-title">
           <View style={[a.relative, a.gap_md, a.w_full]}>
             <H3 nativeID="dialog-title">Dialog</H3>
             <P nativeID="dialog-description">Description</P>