Make label required in link components (#4844)

zio/stable
Eric Bailey 2024-07-25 18:34:21 -05:00 committed by GitHub
parent 4437b9a557
commit 43ba0f21f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 9 deletions

View File

@ -70,6 +70,9 @@ export type ButtonProps = Pick<
AccessibilityProps & AccessibilityProps &
VariantProps & { VariantProps & {
testID?: string testID?: string
/**
* For a11y, try to make this descriptive and clear
*/
label: string label: string
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
hoverStyle?: StyleProp<ViewStyle> hoverStyle?: StyleProp<ViewStyle>

View File

@ -40,11 +40,6 @@ type BaseLinkProps = Pick<
> & { > & {
testID?: string testID?: string
/**
* Label for a11y. Defaults to the href.
*/
label?: string
/** /**
* The React Navigation `StackAction` to perform when the link is pressed. * The React Navigation `StackAction` to perform when the link is pressed.
*/ */
@ -197,7 +192,7 @@ export function useLink({
} }
export type LinkProps = Omit<BaseLinkProps, 'disableMismatchWarning'> & 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 * A interactive element that renders as a `<a>` tag on the web. On mobile it
@ -224,7 +219,6 @@ export function Link({
return ( return (
<Button <Button
label={href}
{...rest} {...rest}
style={[a.justify_start, flatten(rest.style)]} style={[a.justify_start, flatten(rest.style)]}
role="link" role="link"
@ -249,7 +243,8 @@ export function Link({
export type InlineLinkProps = React.PropsWithChildren< export type InlineLinkProps = React.PropsWithChildren<
BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'> BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
> > &
Pick<ButtonProps, 'label'>
export function InlineLinkText({ export function InlineLinkText({
children, children,
@ -291,7 +286,7 @@ export function InlineLinkText({
<Text <Text
selectable={selectable} selectable={selectable}
accessibilityHint="" accessibilityHint=""
accessibilityLabel={label || href} accessibilityLabel={label}
{...rest} {...rest}
style={[ style={[
{color: t.palette.primary_500}, {color: t.palette.primary_500},