From 1b4c6cab6d87dd0d262483d139fbd7ea17a09c59 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 18 Jun 2026 18:14:01 -0400
Subject: [PATCH] fix(a11y): add missing aria-labels to message buttons

- FallbackContent: '(edited)' button now has aria-label='View edit history'
- Reply: ThreadIndicator as=button gets aria-label='View thread'
- Reply: ReplyLayout as=button gets aria-label='Jump to original message'

Addresses WCAG 2.1 SC 4.1.2 (Name, Role, Value) for icon-only buttons
and polymorphic div-as-button patterns in the message timeline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 LOTUS_BUGS.md                                          | 8 ++++----
 src/app/components/message/Reply.tsx                   | 3 ++-
 src/app/components/message/content/FallbackContent.tsx | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/LOTUS_BUGS.md b/LOTUS_BUGS.md
index 4999ed818..258a1030b 100644
--- a/LOTUS_BUGS.md
+++ b/LOTUS_BUGS.md
@@ -183,10 +183,10 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
 | Matrix Logic  | Inefficient repeated `mx.getRoom()` calls in component render loops                                                                                                 | `src/app/components/emoji-board/EmojiBoard.tsx`                | OPEN   |
 | Performance   | Numerous event handlers (e.g., handleUserClick, handleReplyClick) lack `useCallback`, leading to unnecessary re-renders of message components.                      | `cinny/src/app/features/room/RoomTimeline.tsx`                 | OPEN   |
 | Performance   | The `submit` function and file handling callbacks (e.g., handleSendUpload) are re-created on every render, causing re-renders of the editor and toolbar components. | `cinny/src/app/features/room/RoomInput.tsx`                    | OPEN   |
-| Accessibility | `button` for edit history lacks `aria-label`                                                                                                                        | `cinny/src/app/components/message/content/FallbackContent.tsx` | OPEN   |
-| Accessibility | `button` for reaction lacks `aria-label`                                                                                                                            | `cinny/src/app/components/message/Reaction.tsx`                | OPEN   |
-| Accessibility | `button` for ThreadIndicator lacks `aria-label`                                                                                                                     | `cinny/src/app/components/message/Reply.tsx`                   | OPEN   |
-| Accessibility | `button` for ReplyLayout lacks `aria-label`                                                                                                                         | `cinny/src/app/components/message/Reply.tsx`                   | OPEN   |
+| Accessibility | `button` for edit history lacks `aria-label`                                                                                                                        | `cinny/src/app/components/message/content/FallbackContent.tsx` | FIXED ⚠️ UNTESTED — added `aria-label="View edit history"` |
+| Accessibility | `button` for reaction lacks `aria-label`                                                                                                                            | `cinny/src/app/components/message/Reaction.tsx`                | OPEN — emoji content is already screen-reader-accessible via alt text; parent caller would need to set aria-label per reaction |
+| Accessibility | `button` for ThreadIndicator lacks `aria-label`                                                                                                                     | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="View thread"` |
+| Accessibility | `button` for ReplyLayout lacks `aria-label`                                                                                                                         | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="Jump to original message"` |
 
 ---
 
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 477c66e79..4ac355d5c 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -103,10 +103,11 @@ export const Reply = as<'div', ReplyProps>(
     return (
       <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} aria-label="View thread" />
         )}
         <ReplyLayout
           as="button"
+          aria-label="Jump to original message"
           userColor={usernameColor}
           username={
             sender && (
diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index faa9b8d67..1a0ec8209 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/src/app/components/message/content/FallbackContent.tsx
@@ -75,6 +75,7 @@ export const MessageEditedContent = as<
       <button
         type="button"
         onClick={onEditHistoryClick}
+        aria-label="View edit history"
         style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
       >
         <Text as="span" size="T200" priority="300">