Some more a11y

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}

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}

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
+    }>

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}

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={{

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>