From 43ba0f21f6796ebbdd0156c9fa89ebc7d56376e7 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 25 Jul 2024 18:34:21 -0500
Subject: [PATCH] Make label required in link components (#4844)

---
 src/components/Button.tsx |  3 +++
 src/components/Link.tsx   | 13 ++++---------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 457164d1..4fe0ab4b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -70,6 +70,9 @@ export type ButtonProps = Pick<
   AccessibilityProps &
   VariantProps & {
     testID?: string
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
     label: string
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index a8b478be..6c25faff 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -40,11 +40,6 @@ type BaseLinkProps = Pick<
 > & {
   testID?: string
 
-  /**
-   * Label for a11y. Defaults to the href.
-   */
-  label?: string
-
   /**
    * The React Navigation `StackAction` to perform when the link is pressed.
    */
@@ -197,7 +192,7 @@ export function useLink({
 }
 
 export type LinkProps = Omit<BaseLinkProps, 'disableMismatchWarning'> &
-  Omit<ButtonProps, 'onPress' | 'disabled' | 'label'>
+  Omit<ButtonProps, 'onPress' | 'disabled'>
 
 /**
  * A interactive element that renders as a `<a>` tag on the web. On mobile it
@@ -224,7 +219,6 @@ export function Link({
 
   return (
     <Button
-      label={href}
       {...rest}
       style={[a.justify_start, flatten(rest.style)]}
       role="link"
@@ -249,7 +243,8 @@ export function Link({
 
 export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
->
+> &
+  Pick<ButtonProps, 'label'>
 
 export function InlineLinkText({
   children,
@@ -291,7 +286,7 @@ export function InlineLinkText({
     <Text
       selectable={selectable}
       accessibilityHint=""
-      accessibilityLabel={label || href}
+      accessibilityLabel={label}
       {...rest}
       style={[
         {color: t.palette.primary_500},