Improve a11y labels

src/components/Button.tsx

@@ -38,10 +38,8 @@ export type VariantProps = {
   size?: ButtonSize
 }
 
-export type ButtonProps = Omit<
+export type ButtonProps = Pick<PressableProps, 'disabled' | 'onPress'> &
-  PressableProps,
+  AccessibilityProps &
-  'children' | 'style' | 'accessibilityLabel' | 'accessibilityHint'
-> &
   VariantProps & {
     children:
       | ((props: {
@@ -56,8 +54,7 @@ export type ButtonProps = Omit<
         }) => React.ReactNode)
       | React.ReactNode
       | string
-    accessibilityLabel: Required<AccessibilityProps>['accessibilityLabel']
+    label: string
-    accessibilityHint: Required<AccessibilityProps>['accessibilityHint']
   }
 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
 
@@ -66,8 +63,7 @@ export function Button({
   variant,
   color,
   size,
-  accessibilityLabel,
+  label,
-  accessibilityHint,
   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}
+      accessibilityLabel={label}
-      accessibilityHint={accessibilityHint}
       disabled={disabled || false}
       accessibilityState={{
         disabled: disabled || false,

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}

src/components/Prompt.tsx

@@ -86,8 +86,7 @@ export function Cancel({
       variant="solid"
       color="secondary"
       size="small"
-      accessibilityLabel="Cancel"
+      label="Cancel"
-      accessibilityHint="Cancel this action"
       onPress={close}>
       {children}
     </Button>
@@ -108,8 +107,7 @@ export function Action({
       variant="solid"
       color="primary"
       size="small"
-      accessibilityLabel="Confirm"
+      label="Confirm"
-      accessibilityHint="Confirm this action"
       onPress={handleOnPress}>
       {children}
     </Button>

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}

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"
+                  label="Click here">
-                  accessibilityHint="Opens something">
                   Button
                 </Button>
                 <Button
@@ -28,8 +27,7 @@ export function Buttons() {
                   variant={variant as ButtonVariant}
                   color={color as ButtonColor}
                   size="large"
-                  accessibilityLabel="Click here"
+                  label="Click here">
-                  accessibilityHint="Opens something">
                   Button
                 </Button>
               </React.Fragment>
@@ -46,8 +44,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
+                    label="Click here">
-                    accessibilityHint="Opens something">
                     Button
                   </Button>
                   <Button
@@ -55,8 +52,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
+                    label="Click here">
-                    accessibilityHint="Opens something">
                     Button
                   </Button>
                 </React.Fragment>
@@ -71,8 +67,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
+                    label="Click here">
-                    accessibilityHint="Opens something">
                     Button
                   </Button>
                   <Button
@@ -80,8 +75,7 @@ export function Buttons() {
                     variant="gradient"
                     color={name as ButtonColor}
                     size="large"
-                    accessibilityLabel="Click here"
+                    label="Click here">
-                    accessibilityHint="Opens something">
                     Button
                   </Button>
                 </React.Fragment>

src/view/screens/Storybook/Forms.tsx

@@ -168,8 +168,7 @@ export function Forms() {
               variant="solid"
               color="primary"
               size="small"
-              accessibilityLabel="Reset"
+              label="Reset"
-              accessibilityHint="Reset"
               onPress={() => setToggleGroupAValues(['a'])}>
               Reset
             </Button>

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"
+          label="Click here"
-          accessibilityHint="Opens something"
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           External
         </Link>
         <Link
-          accessibilityLabel="Click here"
+          label="Click here"
-          accessibilityHint="Opens something"
           to="https://blueskyweb.xyz"
           style={[a.text_md]}>
           <H3>External with custom children</H3>
         </Link>
         <Link
-          accessibilityLabel="Click here"
+          label="Click here"
-          accessibilityHint="Opens something"
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           https://blueskyweb.xyz
         </Link>
         <Link
-          accessibilityLabel="Click here"
+          label="Click here"
-          accessibilityHint="Opens something"
           to="https://bsky.app/profile/bsky.app"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
@@ -45,8 +41,7 @@ export function Links() {
         </Link>
 
         <Link
-          accessibilityLabel="Click here"
+          label="Click here"
-          accessibilityHint="Opens something"
           variant="solid"
           color="primary"
           size="large"