Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-10 20:21:58 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add aria-labels to icon-only buttons and inputs

Browse source 
Toolbar buttons (☰ 🔍 ⚙ ✕ ─ ⤓ +) and the untitled doc-title/search
inputs had no accessible name beyond a title tooltip, which screen
readers don't reliably announce.
This commit is contained in:
Horizontal42 2026-07-08 14:03:32 +03:00
parent d71ad92422
commit 697f1f0e3d
2 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -9,31 +9,31 @@
<div id="app"> <div id="app">
<aside id="sidebar" class="hidden"> <aside id="sidebar" class="hidden">
<div id="doc-list"></div> <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> </aside>
<main id="content"> <main id="content">
<div id="titlebar" data-tauri-drag-region> <div id="titlebar" data-tauri-drag-region>
<button id="toggle-sidebar" title="Documents (Ctrl+B)">☰</button> <button id="toggle-sidebar" title="Documents (Ctrl+B)" aria-label="Documents">☰</button>
<input id="doc-title" spellcheck="false" autocomplete="off" /> <input id="doc-title" spellcheck="false" autocomplete="off" aria-label="Document title" />
<span class="spacer" data-tauri-drag-region></span> <span class="spacer" data-tauri-drag-region></span>
<button id="open-search" title="Search all sheets (Ctrl+F)">🔍︎</button> <button id="open-search" title="Search all sheets (Ctrl+F)" aria-label="Search all sheets">🔍︎</button>
<button id="open-settings" title="Settings">⚙</button> <button id="open-settings" title="Settings" aria-label="Settings">⚙</button>
<div id="win-controls"> <div id="win-controls">
<button id="win-min" title="Minimize">─</button> <button id="win-min" title="Minimize" aria-label="Minimize">─</button>
<button id="win-close" title="Hide to tray">✕</button> <button id="win-close" title="Hide to tray" aria-label="Hide to tray">✕</button>
</div> </div>
</div> </div>
<div id="editor-wrap"> <div id="editor-wrap">
<div id="editor"></div> <div id="editor"></div>
<div id="results"></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>
<div id="statusbar"> <div id="statusbar">
<span id="rates-info" title=""></span> <span id="rates-info" title=""></span>
<span id="market-info" title="" style="display:none"></span> <span id="market-info" title="" style="display:none"></span>
<span class="spacer"></span> <span class="spacer"></span>
<div id="export-wrap"> <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"> <div id="export-menu" class="hidden">
<button data-action="image" data-i18n="exportImage">Copy as image</button> <button data-action="image" data-i18n="exportImage">Copy as image</button>
<button data-action="copy" data-i18n="exportCopy">Copy sheet</button> <button data-action="copy" data-i18n="exportCopy">Copy sheet</button>
@ -151,7 +151,7 @@
</div> </div>
<div id="search-overlay" class="hidden"> <div id="search-overlay" class="hidden">
<div class="search-box"> <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 id="search-results"></div>
</div> </div>
</div> </div>

5
src/main.ts
View file

@ -110,6 +110,7 @@ function renderDocList(): void {
b.className = cls; b.className = cls;
b.textContent = text; b.textContent = text;
b.title = title; b.title = title;
b.setAttribute("aria-label", title);
b.addEventListener("click", (e) => { e.stopPropagation(); cb(); }); b.addEventListener("click", (e) => { e.stopPropagation(); cb(); });
return b; return b;
}; };
@ -241,7 +242,9 @@ function applySettings(): void {
document.documentElement.style.setProperty("--editor-font-size", `${settings.fontSize}px`); document.documentElement.style.setProperty("--editor-font-size", `${settings.fontSize}px`);
$("#editor-wrap").style.setProperty("--results-width", `${settings.resultsWidth}%`); $("#editor-wrap").style.setProperty("--results-width", `${settings.resultsWidth}%`);
setLang(settings.language); 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({ engine.updateSettings({
precision: settings.precision, precision: settings.precision,
groupSeparator: settings.groupSeparator, groupSeparator: settings.groupSeparator,