From 9935c3dc6eadc17b0bbef39d307c448638173929 Mon Sep 17 00:00:00 2001
From: chinesepowered <22500229+chinesepowered@users.noreply.github.com>
Date: Sun, 19 Jul 2026 21:46:45 -0700
Subject: [PATCH] a11y: give icon-only chrome buttons accessible names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dock, the sidebar/grid close buttons, and the annotation toolbar are all icon-only. Their labels came only from `data-tip`, which is a CSS hover tooltip ([data-tip]::after { content: attr(data-tip) }) and is not exposed to assistive tech — so screen readers announced them as an unlabeled "button". Add aria-label to each, plus aria-pressed on the toggle buttons (sidebar, grid, annotate, and the tool/color/size selectors) so their on/off state is conveyed too. No visual or behavioral change.
---
 src/deck/Annotator.tsx | 18 +++++++++++++++++-
 src/deck/Deck.tsx      | 12 ++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/deck/Annotator.tsx b/src/deck/Annotator.tsx
index c37e1e3..2ffe348 100644
--- a/src/deck/Annotator.tsx
+++ b/src/deck/Annotator.tsx
@@ -55,7 +55,15 @@ const TOOLS: { id: Tool; label: string; path: string }[] = [
   },
 ];
 const COLORS = ['var(--primary)', '#ffffff', '#ef4444', '#f5b73a', '#4aa8ff'];
+const COLOR_LABELS: Record<string, string> = {
+  'var(--primary)': 'Accent',
+  '#ffffff': 'White',
+  '#ef4444': 'Red',
+  '#f5b73a': 'Amber',
+  '#4aa8ff': 'Blue',
+};
 const SIZES = [3, 6, 11];
+const SIZE_LABELS = ['Small stroke', 'Medium stroke', 'Large stroke'];
 
 const IconUndo = () => (
   <svg
@@ -430,6 +438,8 @@ export default function Annotator({
               key={t.id}
               className={'ann-btn' + (tool === t.id ? ' on' : '')}
               data-tip={t.label}
+              aria-label={t.label}
+              aria-pressed={tool === t.id}
               onClick={() => setTool(t.id)}
             >
               <svg
@@ -450,16 +460,20 @@ export default function Annotator({
               key={c}
               className={'ann-color' + (color === c ? ' on' : '')}
               data-tip="Color"
+              aria-label={(COLOR_LABELS[c] ?? 'Color') + ' pen'}
+              aria-pressed={color === c}
               onClick={() => setColor(c)}
               style={{ background: c }}
             />
           ))}
           <span className="ann-sep" />
-          {SIZES.map((s) => (
+          {SIZES.map((s, i) => (
             <button
               key={s}
               className={'ann-size' + (size === s ? ' on' : '')}
               data-tip="Stroke size"
+              aria-label={SIZE_LABELS[i]}
+              aria-pressed={size === s}
               onClick={() => setSize(s)}
             >
               <span style={{ width: s + 4, height: s + 4 }} />
@@ -469,6 +483,7 @@ export default function Annotator({
           <button
             className="ann-btn"
             data-tip="Undo"
+            aria-label="Undo"
             onClick={() => {
               strokes.current = strokes.current.slice(0, -1);
               commit();
@@ -479,6 +494,7 @@ export default function Annotator({
           <button
             className="ann-btn"
             data-tip="Clear all"
+            aria-label="Clear all"
             onClick={() => {
               strokes.current = [];
               commit();
diff --git a/src/deck/Deck.tsx b/src/deck/Deck.tsx
index 9a58447..8b9e26d 100644
--- a/src/deck/Deck.tsx
+++ b/src/deck/Deck.tsx
@@ -361,6 +361,7 @@ export default function Deck({ children }: { children: ReactNode }) {
       <button
         className="noir-icon-btn"
         data-tip="Previous"
+        aria-label="Previous"
         disabled={!hasPrev}
         onClick={prev}
       >
@@ -373,6 +374,7 @@ export default function Deck({ children }: { children: ReactNode }) {
       <button
         className="noir-icon-btn"
         data-tip="Next"
+        aria-label="Next"
         disabled={!hasNext}
         onClick={next}
       >
@@ -405,6 +407,7 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className="noir-icon-btn sm"
               data-tip="Close"
+              aria-label="Close sidebar"
               onClick={() => setRailOpen(false)}
             >
               <IconClose />
@@ -435,6 +438,7 @@ export default function Deck({ children }: { children: ReactNode }) {
               <button
                 className="noir-icon-btn sm"
                 data-tip="Close"
+                aria-label="Close grid view"
                 onClick={() => setGridOpen(false)}
               >
                 <IconClose />
@@ -491,6 +495,8 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className={'noir-icon-btn' + (railOpen ? ' on' : '')}
               data-tip="Sidebar (S)"
+              aria-label="Sidebar"
+              aria-pressed={railOpen}
               onClick={toggleRail}
             >
               <IconSidebar />
@@ -498,6 +504,8 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className={'noir-icon-btn' + (gridOpen ? ' on' : '')}
               data-tip="Grid view (G)"
+              aria-label="Grid view"
+              aria-pressed={gridOpen}
               onClick={toggleGrid}
             >
               <IconGrid />
@@ -508,6 +516,8 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className={'noir-icon-btn' + (drawing ? ' on' : '')}
               data-tip="Annotate (A)"
+              aria-label="Annotate"
+              aria-pressed={drawing}
               onClick={() => setDrawing((v) => !v)}
             >
               <IconPencil />
@@ -515,6 +525,7 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className="noir-icon-btn"
               data-tip={fs ? 'Exit fullscreen (F)' : 'Fullscreen (F)'}
+              aria-label={fs ? 'Exit fullscreen' : 'Enter fullscreen'}
               onClick={toggleFs}
             >
               {fs ? <IconShrink /> : <IconExpand />}
@@ -522,6 +533,7 @@ export default function Deck({ children }: { children: ReactNode }) {
             <button
               className="noir-icon-btn"
               data-tip="Presenter — new tab (P)"
+              aria-label="Open presenter view"
               onClick={openPresenter}
             >
               <IconPresent />