diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx index 21de2eecaa..d2b5eb51c6 100644 --- a/src/components/Pills.tsx +++ b/src/components/Pills.tsx @@ -93,7 +93,15 @@ export function Label({ } export type LabelBaseProps = { + /** + * The accessibility label for the pill. + */ label: string + /** + * The visible pill text. Defaults to `label`. Use this when the visible + * text is too terse to serve as the accessibility label, e.g. "+2". + */ + cta?: string onPress: () => void disabled?: boolean noBg?: boolean @@ -102,6 +110,7 @@ export type LabelBaseProps = { export function LabelBase({ label, + cta = label, onPress, disabled, size = 'sm', @@ -171,7 +180,7 @@ export function LabelBase({ t.atoms.text_contrast_medium, {paddingRight: 3}, ]}> - {label} + {cta} )} diff --git a/src/components/moderation/PostAlerts.tsx b/src/components/moderation/PostAlerts.tsx index 5290455da9..dc3dd7fab8 100644 --- a/src/components/moderation/PostAlerts.tsx +++ b/src/components/moderation/PostAlerts.tsx @@ -136,7 +136,11 @@ function AdditionalLabels({