diff --git a/web/src/components/app/contacts/ContactsTable.tsx b/web/src/components/app/contacts/ContactsTable.tsx
index b2538754..5e73f740 100644
--- a/web/src/components/app/contacts/ContactsTable.tsx
+++ b/web/src/components/app/contacts/ContactsTable.tsx
@@ -1233,9 +1233,10 @@ function ContactsTableBody({
{!embedded &&
Phone | }
{/* Below sm the pill is its icon alone, so the column
- narrows to it. The label goes to screen readers
- rather than away, or the column loses its name. */}
- {embedded ? "Progress" : "Status"}
+ narrows to it and the label waits for the room —
+ but never leaves the accessibility tree. */}
+ {embedded ? "Progress" : "Status"}
+ {embedded ? "Progress" : "Status"}
|
{embedded && (
<>
@@ -1522,18 +1523,23 @@ function Th({ children, className }: { children: React.ReactNode; className?: st
}
function StatusPill({ subscribed }: { subscribed: boolean }) {
- if (subscribed) {
- return (
-
-
- subscribed
-
- );
- }
+ const label = subscribed ? "subscribed" : "unsubscribed";
return (
-
-
- unsubscribed
+
+
+ {/* The dot carries the state on its own below sm, so the word stays
+ for screen readers at every width and the visible copy is the
+ one that comes and goes. */}
+ {label}
+
+ {label}
+
);
}
@@ -1620,7 +1626,8 @@ function LeadStatusPill({ lead }: { lead?: ContactCampaignProgress | null }) {
) : (
)}
-
+ {meta.label}
+
{meta.label}