From 697f1f0e3d1a62dee4c431bc6793c32d36c2afb7 Mon Sep 17 00:00:00 2001
From: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
Date: Wed, 8 Jul 2026 14:03:32 +0300
Subject: [PATCH] add aria-labels to icon-only buttons and inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toolbar buttons (☰ 🔍 ⚙ ✕ ─ ⤓ +) and the untitled doc-title/search
inputs had no accessible name beyond a title tooltip, which screen
readers don't reliably announce.
---
 index.html  | 20 ++++++++++----------
 src/main.ts |  5 ++++-
 2 files changed, 14 insertions(+), 11 deletions(-)

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,