From 8e4c084ba0055da849763da4000e4aa73ee7f1f3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 8 Jul 2026 09:08:41 +0000
Subject: [PATCH] feat: add ARIA labels to icon-only buttons and key inputs for
 accessibility

Co-authored-by: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 index.html        | 20 ++++++++++----------
 src/main.ts       |  5 ++++-
 3 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..e3ba84a
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Missing ARIA labels on dynamic icon buttons and inputs
+**Learning:** Icon-only buttons (like ☰, +, ⚙) and inputs missing explicit labels (`#doc-title`, `#search-input`) were lacking ARIA labels across the application, significantly hurting screen reader accessibility. This includes dynamically generated elements like document tab pin icons.
+**Action:** Always verify that every icon-only interactive element and text input field without an explicit `<label>` has an `aria-label` attribute. Also, remember to dynamically update the `aria-label` when placeholders are dynamically loaded in code like `src/main.ts`.
diff --git a/index.html b/index.html
index fd63307..10761fd 100644
--- a/index.html
+++ b/index.html
@@ -9,31 +9,31 @@
     <div id="app">
       <aside id="sidebar" class="hidden">
         <div id="doc-list"></div>
-        <button id="new-doc" title="New document">+</button>
+        <button id="new-doc" title="New document" aria-label="New document">+</button>
       </aside>
       <main id="content">
         <div id="titlebar" data-tauri-drag-region>
-          <button id="toggle-sidebar" title="Documents (Ctrl+B)">☰</button>
-          <input id="doc-title" spellcheck="false" autocomplete="off" />
+          <button id="toggle-sidebar" title="Documents (Ctrl+B)" aria-label="Documents">☰</button>
+          <input id="doc-title" spellcheck="false" autocomplete="off" aria-label="Document title" />
           <span class="spacer" data-tauri-drag-region></span>
-          <button id="open-search" title="Search all sheets (Ctrl+F)">🔍︎</button>
-          <button id="open-settings" title="Settings">⚙</button>
+          <button id="open-search" title="Search all sheets (Ctrl+F)" aria-label="Search all sheets">🔍︎</button>
+          <button id="open-settings" title="Settings" aria-label="Settings">⚙</button>
           <div id="win-controls">
-            <button id="win-min" title="Minimize">─</button>
-            <button id="win-close" title="Hide to tray">✕</button>
+            <button id="win-min" title="Minimize" aria-label="Minimize">─</button>
+            <button id="win-close" title="Hide to tray" aria-label="Hide to tray">✕</button>
           </div>
         </div>
         <div id="editor-wrap">
           <div id="editor"></div>
           <div id="results"></div>
-          <div id="col-divider" title="Drag to resize"></div>
+          <div id="col-divider" title="Drag to resize" aria-label="Drag to resize results column"></div>
         </div>
         <div id="statusbar">
           <span id="rates-info" title=""></span>
           <span id="market-info" title="" style="display:none"></span>
           <span class="spacer"></span>
           <div id="export-wrap">
-            <button id="export-btn" title="Export">⤓</button>
+            <button id="export-btn" title="Export" aria-label="Export">⤓</button>
             <div id="export-menu" class="hidden">
               <button data-action="image" data-i18n="exportImage">Copy as image</button>
               <button data-action="copy" data-i18n="exportCopy">Copy sheet</button>
@@ -151,7 +151,7 @@
       </div>
       <div id="search-overlay" class="hidden">
         <div class="search-box">
-          <input id="search-input" type="text" autocomplete="off" spellcheck="false" />
+          <input id="search-input" type="text" autocomplete="off" spellcheck="false" aria-label="Search sheets" />
           <div id="search-results"></div>
         </div>
       </div>
diff --git a/src/main.ts b/src/main.ts
index 3dfe422..a11994a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -110,6 +110,7 @@ function renderDocList(): void {
       b.className = cls;
       b.textContent = text;
       b.title = title;
+      b.setAttribute("aria-label", title);
       b.addEventListener("click", (e) => { e.stopPropagation(); cb(); });
       return b;
     };
@@ -241,7 +242,9 @@ function applySettings(): void {
   document.documentElement.style.setProperty("--editor-font-size", `${settings.fontSize}px`);
   $("#editor-wrap").style.setProperty("--results-width", `${settings.resultsWidth}%`);
   setLang(settings.language);
-  $<HTMLInputElement>("#search-input").placeholder = t("searchPlaceholder");
+  const searchInput = $<HTMLInputElement>("#search-input");
+  searchInput.placeholder = t("searchPlaceholder");
+  searchInput.setAttribute("aria-label", t("searchPlaceholder"));
   engine.updateSettings({
     precision: settings.precision,
     groupSeparator: settings.groupSeparator,