From 449c29b94b91b1ab2aac5224dae54b280c053af8 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 17 Jan 2024 15:22:28 -0600
Subject: [PATCH] Improve a11y labels

---
 src/components/Button.tsx              | 18 +++++++-----------
 src/components/Dialog/index.web.tsx    |  5 +++--
 src/components/Prompt.tsx              |  6 ++----
 src/components/forms/Toggle.tsx        |  2 +-
 src/view/screens/Storybook/Buttons.tsx | 18 ++++++------------
 src/view/screens/Storybook/Forms.tsx   |  3 +--
 src/view/screens/Storybook/Links.tsx   | 15 +++++----------
 7 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7c032dbad8..06226ad1e0 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -38,10 +38,8 @@ export type VariantProps = {
   size?: ButtonSize
 }
 
-export type ButtonProps = Omit<
-  PressableProps,
-  'children' | 'style' | 'accessibilityLabel' | 'accessibilityHint'
-> &
+export type ButtonProps = Pick<PressableProps, 'disabled' | 'onPress'> &
+  AccessibilityProps &
   VariantProps & {
     children:
       | ((props: {
@@ -56,8 +54,7 @@ export type ButtonProps = Omit<
         }) => React.ReactNode)
       | React.ReactNode
       | string
-    accessibilityLabel: Required<AccessibilityProps>['accessibilityLabel']
-    accessibilityHint: Required<AccessibilityProps>['accessibilityHint']
+    label: string
   }
 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
 
@@ -66,8 +63,7 @@ export function Button({
   variant,
   color,
   size,
-  accessibilityLabel,
-  accessibilityHint,
+  label,
   disabled = false,
   ...rest
 }: ButtonProps) {
@@ -325,11 +321,11 @@ export function Button({
   return (
     <Pressable
       role="button"
+      accessibilityHint={undefined} // optional
       {...rest}
-      aria-label={accessibilityLabel}
+      aria-label={label}
       aria-pressed={state.pressed}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
+      accessibilityLabel={label}
       disabled={disabled || false}
       accessibilityState={{
         disabled: disabled || false,
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index ad205d3648..88ebbbc1d2 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -73,7 +73,8 @@ export function Outer({
         <Portal>
           <Context.Provider value={context}>
             <TouchableWithoutFeedback
-              accessibilityRole="button"
+              accessibilityHint={undefined}
+              accessibilityLabel="Close active dialog"
               onPress={close}>
               <View
                 style={[
@@ -129,7 +130,7 @@ export function Inner({
   return (
     <FocusScope loop enabled trapped>
       <Animated.View
-        aria-modal
+        role="dialog"
         aria-role="dialog"
         aria-label={label}
         aria-labelledby={accessibilityLabelledBy}
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 5e1f88453f..10bec124c2 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -86,8 +86,7 @@ export function Cancel({
       variant="solid"
       color="secondary"
       size="small"
-      accessibilityLabel="Cancel"
-      accessibilityHint="Cancel this action"
+      label="Cancel"
       onPress={close}>
       {children}
     </Button>
@@ -108,8 +107,7 @@ export function Action({
       variant="solid"
       color="primary"
       size="small"
-      accessibilityLabel="Confirm"
-      accessibilityHint="Confirm this action"
+      label="Confirm"
       onPress={handleOnPress}>
       {children}
     </Button>
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index ed678e7fd6..8fe43f2f41 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -196,6 +196,7 @@ function Item({
   return (
     <ItemContext.Provider value={state}>
       <Pressable
+        accessibilityHint={undefined} // optional
         {...rest}
         disabled={disabled}
         aria-disabled={disabled ?? false}
@@ -209,7 +210,6 @@ function Item({
           selected: selected,
         }}
         accessibilityLabel={label}
-        accessibilityHint={undefined}
         onPress={onPress}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index 113afe2f45..168d088408 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -19,8 +19,7 @@ export function Buttons() {
                   variant={variant as ButtonVariant}
                   color={color as ButtonColor}
                   size="large"
-                  accessibilityLabel="Click here"
-                  accessibilityHint="Opens something">
+                  label="Click here">
                   Button
                 </Button>
                 <Button
@@ -28,8 +27,7 @@ export function Buttons() {
                   variant={variant as ButtonVariant}
                   color={color as ButtonColor}
                   size="large"
-                  accessibilityLabel="Click here"
-                  accessibilityHint="Opens something">
+                  label="Click here">
                   Button
                 </Button>
               </React.Fragment>
@@ -46,8 +44,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
-                    accessibilityHint="Opens something">
+                    label="Click here">
                     Button
                   </Button>
                   <Button
@@ -55,8 +52,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
-                    accessibilityHint="Opens something">
+                    label="Click here">
                     Button
                   </Button>
                 </React.Fragment>
@@ -71,8 +67,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
-                    accessibilityHint="Opens something">
+                    label="Click here">
                     Button
                   </Button>
                   <Button
@@ -80,8 +75,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
-                    accessibilityHint="Opens something">
+                    label="Click here">
                     Button
                   </Button>
                 </React.Fragment>
diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx
index c7dd998b6e..66268cb802 100644
--- a/src/view/screens/Storybook/Forms.tsx
+++ b/src/view/screens/Storybook/Forms.tsx
@@ -168,8 +168,7 @@ export function Forms() {
               variant="solid"
               color="primary"
               size="small"
-              accessibilityLabel="Reset"
-              accessibilityHint="Reset"
+              label="Reset"
               onPress={() => setToggleGroupAValues(['a'])}>
               Reset
             </Button>
diff --git a/src/view/screens/Storybook/Links.tsx b/src/view/screens/Storybook/Links.tsx
index b5c183425a..2b9da2a9de 100644
--- a/src/view/screens/Storybook/Links.tsx
+++ b/src/view/screens/Storybook/Links.tsx
@@ -13,31 +13,27 @@ export function Links() {
 
       <View style={[a.gap_md, a.align_start]}>
         <Link
-          accessibilityLabel="Click here"
-          accessibilityHint="Opens something"
+          label="Click here"
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           External
         </Link>
         <Link
-          accessibilityLabel="Click here"
-          accessibilityHint="Opens something"
+          label="Click here"
           to="https://blueskyweb.xyz"
           style={[a.text_md]}>
           <H3>External with custom children</H3>
         </Link>
         <Link
-          accessibilityLabel="Click here"
-          accessibilityHint="Opens something"
+          label="Click here"
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           https://blueskyweb.xyz
         </Link>
         <Link
-          accessibilityLabel="Click here"
-          accessibilityHint="Opens something"
+          label="Click here"
           to="https://bsky.app/profile/bsky.app"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
@@ -45,8 +41,7 @@ export function Links() {
         </Link>
 
         <Link
-          accessibilityLabel="Click here"
-          accessibilityHint="Opens something"
+          label="Click here"
           variant="solid"
           color="primary"
           size="large"