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

@@ -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>
       )}

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, {