From 4084a5e63a0521687b4bda369123e9d2f26d09ca Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 9 Jul 2026 18:36:06 -0500
Subject: [PATCH] Split LabelBase label into accessibility label and visible
 cta

The compact "+n" pill text is too terse to serve as the button's
accessibility label. LabelBase now takes an optional cta prop for
the visible text, defaulting to label, and the additional labels
pill announces "n labels applied to your post" regardless of which
visual variant renders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/Pills.tsx                 | 11 ++++++++++-
 src/components/moderation/PostAlerts.tsx |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

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}
           </Text>
         </View>
       )}
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({
       <LabelsOnMeDialog control={control} labels={labels} type="content" />
 
       <Pills.LabelBase
-        label={
+        label={l`${plural(labels.length, {
+          one: '# label applied to your post',
+          other: '# labels applied to your post',
+        })}`}
+        cta={
           hasPrecedingPills
             ? l`+${labels.length}`
             : l`${plural(labels.length, {