From 360e72f73c19e0092ffb9751160d930913f7d5ee Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 10 Jul 2026 22:00:27 -0400
Subject: [PATCH] a11y(polls): associate voter list with its answer for screen
 readers

From review: the per-answer voter line sat inside the radiogroup with no
association, so a screen-reader user on the radio didn't hear who voted. Add
aria-describedby from each answer to its voter line (id poll-voters-<eventId>-
<answerId>) and prefix the line with "Voted by" for a clearer announcement.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/message/content/PollContent.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/components/message/content/PollContent.tsx b/src/app/components/message/content/PollContent.tsx
index 84a9eb059..887a0eede 100644
--- a/src/app/components/message/content/PollContent.tsx
+++ b/src/app/components/message/content/PollContent.tsx
@@ -339,6 +339,11 @@ export function PollContent({
               aria-checked={selected}
               aria-disabled={!canVote}
               aria-label={isWinner ? `${text}, winning answer` : undefined}
+              aria-describedby={
+                showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
+                  ? `poll-voters-${eventId}-${id}`
+                  : undefined
+              }
               tabIndex={tabIndex}
               onClick={canVote ? () => handleVote(id) : undefined}
               style={{
@@ -428,11 +433,12 @@ export function PollContent({
             </button>
             {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
               <Text
+                id={`poll-voters-${eventId}-${id}`}
                 size="T200"
                 priority="300"
                 style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
               >
-                {(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}
+                {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
               </Text>
             )}
             </React.Fragment>