From 81c7dcbdcde160a1233ce4dcba50d9cf0f26b1aa Mon Sep 17 00:00:00 2001 From: AashishH15 <121846193+AashishH15@users.noreply.github.com> Date: Sat, 13 Jun 2026 12:04:43 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20missing=20ARIA?= =?UTF-8?q?=20labels=20to=20chat=20and=20editor=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Added aria-label attributes to icon-only buttons in ChatPanel and NodeEditorDetail components. 🎯 Why: Improves screen reader accessibility by providing descriptive text for purely visual actions like edit, copy, show more, and tool toggles. ♿ Accessibility: Ensures that keyboard and screen reader users can understand the purpose of interactive elements that do not have visible text. --- .jules/palette.md | 1 + patch_chatpanel.sh | 6 ++++++ patch_chatpanel2.sh | 4 ++++ patch_chatpanel3.sh | 4 ++++ patch_nodeeditor.sh | 3 +++ ui/components/ChatPanel.tsx | 10 ++++++++++ ui/components/NodeEditorDetail.tsx | 2 ++ 7 files changed, 30 insertions(+) create mode 100644 .jules/palette.md create mode 100644 patch_chatpanel.sh create mode 100644 patch_chatpanel2.sh create mode 100644 patch_chatpanel3.sh create mode 100644 patch_nodeeditor.sh diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..4d74284 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1 @@ +## 2024-06-13 - Initial Setup\n**Learning:** Started logging UX enhancements.\n**Action:** Will log critical a11y/UX learnings here. diff --git a/patch_chatpanel.sh b/patch_chatpanel.sh new file mode 100644 index 0000000..f4499c5 --- /dev/null +++ b/patch_chatpanel.sh @@ -0,0 +1,6 @@ +#!/bin/bash +sed -i 's/className="chat-bubble-edit-btn cancel"/className="chat-bubble-edit-btn cancel"\n aria-label="Cancel edit"/g' ui/components/ChatPanel.tsx +sed -i 's/className="chat-bubble-edit-btn save"/className="chat-bubble-edit-btn save"\n aria-label="Save edit"/g' ui/components/ChatPanel.tsx +sed -i 's/className="chat-show-more-btn"/className="chat-show-more-btn"\n aria-label={isCollapsed ? "Show more message content" : "Show less message content"}/g' ui/components/ChatPanel.tsx +sed -i 's/className="chat-action-btn"/className="chat-action-btn"\n aria-label={isCopied ? "Copied" : "Copy message"}/g' ui/components/ChatPanel.tsx +# Need more precise patching for aria labels based on title props diff --git a/patch_chatpanel2.sh b/patch_chatpanel2.sh new file mode 100644 index 0000000..bfed09c --- /dev/null +++ b/patch_chatpanel2.sh @@ -0,0 +1,4 @@ +#!/bin/bash +sed -i 's/title="Copy message"/title="Copy message"\n aria-label={isCopied ? "Copied message" : "Copy message"}/g' ui/components/ChatPanel.tsx +sed -i 's/title="Retry response"/title="Retry response"\n aria-label="Retry response"/g' ui/components/ChatPanel.tsx +sed -i 's/title="Edit message"/title="Edit message"\n aria-label="Edit message"/g' ui/components/ChatPanel.tsx diff --git a/patch_chatpanel3.sh b/patch_chatpanel3.sh new file mode 100644 index 0000000..579499d --- /dev/null +++ b/patch_chatpanel3.sh @@ -0,0 +1,4 @@ +#!/bin/bash +sed -i 's/className="chat-bubble-edit-btn cancel"/className="chat-bubble-edit-btn cancel"\n aria-label="Cancel edit"/g' ui/components/ChatPanel.tsx +sed -i 's/className="chat-bubble-edit-btn save"/className="chat-bubble-edit-btn save"\n aria-label="Save edit"/g' ui/components/ChatPanel.tsx +sed -i 's/className="chat-show-more-btn"/className="chat-show-more-btn"\n aria-label={isCollapsed ? "Show more message content" : "Show less message content"}/g' ui/components/ChatPanel.tsx diff --git a/patch_nodeeditor.sh b/patch_nodeeditor.sh new file mode 100644 index 0000000..5b30b6b --- /dev/null +++ b/patch_nodeeditor.sh @@ -0,0 +1,3 @@ +#!/bin/bash +sed -i 's/title="Toggle interactive charts render workspace assets"/title="Toggle interactive charts render workspace assets"\n aria-label="Toggle interactive charts"/g' ui/components/NodeEditorDetail.tsx +sed -i 's/title="Expand editor to full center canvas focus"/title="Expand editor to full center canvas focus"\n aria-label="Expand editor"/g' ui/components/NodeEditorDetail.tsx diff --git a/ui/components/ChatPanel.tsx b/ui/components/ChatPanel.tsx index 181fd85..89261d2 100644 --- a/ui/components/ChatPanel.tsx +++ b/ui/components/ChatPanel.tsx @@ -114,6 +114,7 @@ const ChatMessageBubble = React.memo(function ChatMessageBubble({ @@ -203,6 +204,7 @@ export default function NodeEditorDetail({ className="detail-expand-btn" onClick={onExpand} title="Expand editor to full center canvas focus" + aria-label="Expand editor" > ⛶ Focus Canvas