+3

CHANGELOG.md

reviewed

··· 8 8 ## [Unreleased] 9 9 10 10 ### Added 11 11 + - A11y: landing-page icon-only buttons (theme toggle, user badge, search clear) now carry `aria-label` so screen readers can announce them — previously only `title` was set, which is unreliable for AT. The user badge also gets `role="button"` + `tabindex="0"` so keyboard users can reach it. Landing modals (username, folder, move) now declare `aria-labelledby` pointing at their title heading so modal opens announce context. (#690) 12 12 + - A11y: slides Notes/Animations panel tabs now carry the full tablist semantics — `role="tablist"` on the container, `role="tab"` + `aria-selected` + `aria-controls` on each button, and `role="tabpanel"` + `aria-labelledby` on each content pane. The click handler keeps `aria-selected` in sync when tabs switch. 2 new jsdom regression tests pin the invariant. (#690) 11 13 - Slides mobile panel toggle: on phones (<=480px) the slides thumbnail panel was previously hidden with `display:none` and no way to bring it back, making slide navigation impossible. A new `btn-toggle-slide-panel` in the slides topbar now flips a `.slides-panel--mobile-open` class that renders the panel as a full-height overlay so users can jump to any slide. Tapping a thumbnail or hitting Escape closes the overlay. (#688) 12 14 - Shared export/import toast helper (`src/lib/export-feedback.ts`): `exportSuccess`/`exportError`/`importSuccess`/`importError` centralize user-facing copy with built-in noun pluralization and Error-message extraction, so every editor's export path surfaces the same phrasing ("Exported 12 rows as CSV", "CSV export failed: bad quote") instead of each editor re-implementing feedback. 12 unit tests pinning the contract. (#686) 13 15 - Slides: JSON deck export — the previously dead "Export" button in slides now downloads the full deck state (slides, theme, transitions, animations) as a `.deck.json` file. Enables backup/clone-a-deck workflows until native PPTX/PDF export lands. (#686) 14 16 15 17 ### Changed 18 18 + - Dark-mode contrast: bumped `--color-text-faint` lightness from `oklch(0.50 …)` (≈3:1 contrast on dark bg) to `oklch(0.62 …)` (≈4.5:1, meeting WCAG AA for normal text) in both the explicit `[data-theme="dark"]` block and the `@media (prefers-color-scheme: dark)` fallback. Affects every timestamp, helper hint, and secondary label (70+ call sites in app.css use this var). (#690) 16 19 - Wired the shared export-feedback helper into silent-failing export paths across every editor: diagrams (SVG, PNG, ASCII with correct `.shapes.size` Map accessor), forms (CSV/XLSX response exports), sheets (CSV, TSV, XLSX, PDF), docs (HTML, Markdown, TXT, PDF, DOCX). Every export now either confirms success with a row/slide/document count or surfaces the real error via toast instead of failing silently. (#686) 17 20 - Promoted save-indicator + save-status-ui from sheets-only modules (`src/sheets/save-*.ts`) to shared library modules (`src/lib/save-*.ts`). Docs, slides, forms, diagrams, and calendar now share a single `wireSaveStatus({ provider, ydoc })` helper with consistent "Saved / Saving… / Saved locally / Unsaved changes" feedback — previously only sheets and docs had live autosave state, and docs carried a 50-line inline copy. Slides, forms, diagrams, and calendar HTML upgraded from an empty `<span class="save-status">` to the full indicator DOM (dot + text). Docs main.ts replaces its inline implementation with a one-line call. 8 new jsdom tests pin the wiring contract (saving→saved transitions, dot class flips, offline "Saved locally" fallback, ydoc-origin echo filtering). (#689) 18 21

+4 -4

src/css/app.css

reviewed

··· 156 156 --color-text: oklch(0.88 0.01 75); 157 157 --color-text-muted: #938e89; 158 158 --color-text-muted: oklch(0.65 0.01 75); 159 159 - --color-text-faint: #66635e; 160 160 - --color-text-faint: oklch(0.50 0.008 75); 159 159 + --color-text-faint: #837e78; 160 160 + --color-text-faint: oklch(0.62 0.008 75); 161 161 --color-text-secondary: #938e89; 162 162 --color-text-secondary: oklch(0.65 0.01 75); 163 163 --color-bg-secondary: #181612; ··· 251 251 --color-text: oklch(0.88 0.01 75); 252 252 --color-text-muted: #938e89; 253 253 --color-text-muted: oklch(0.65 0.01 75); 254 254 - --color-text-faint: #66635e; 255 255 - --color-text-faint: oklch(0.50 0.008 75); 254 254 + --color-text-faint: #837e78; 255 255 + --color-text-faint: oklch(0.62 0.008 75); 256 256 --color-text-secondary: #938e89; 257 257 --color-text-secondary: oklch(0.65 0.01 75); 258 258 --color-bg-secondary: #181612;

+9 -9

src/index.html

reviewed

··· 39 39 <span class="brand-name">Tools</span> 40 40 <span class="brand-badge">E2EE</span> 41 41 <span style="flex:1"></span> 42 42 - <span class="user-badge" id="user-badge" title="Click to change name"></span> 43 43 - <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode"></button> 42 42 + <span class="user-badge" id="user-badge" title="Click to change name" role="button" tabindex="0" aria-label="Change display name"></span> 43 43 + <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode"></button> 44 44 </div> 45 45 <div class="landing-actions"> 46 46 <div class="new-dropdown" id="new-dropdown"> ··· 90 90 <div class="doc-breadcrumbs" id="breadcrumbs"></div> 91 91 <div class="doc-toolbar-actions"> 92 92 <div class="search-box" id="search-box"> 93 93 - <input type="text" class="search-input" id="search-input" placeholder="Search documents..." /> 94 94 - <button class="search-clear" id="search-clear" title="Clear search">&times;</button> 93 93 + <input type="text" class="search-input" id="search-input" placeholder="Search documents..." aria-label="Search documents" /> 94 94 + <button class="search-clear" id="search-clear" title="Clear search" aria-label="Clear search">&times;</button> 95 95 </div> 96 96 <div class="sort-dropdown" id="sort-dropdown"> 97 97 <button class="sort-btn" id="sort-btn">Sort: <span id="sort-label">Last updated</span></button> ··· 161 161 162 162 <!-- Username prompt modal --> 163 163 <div class="modal-backdrop" id="username-modal" style="display:none;"> 164 164 - <div class="modal username-modal" role="dialog" aria-modal="true"> 165 165 - <h2>Welcome to Tools</h2> 164 164 + <div class="modal username-modal" role="dialog" aria-modal="true" aria-labelledby="username-modal-title"> 165 165 + <h2 id="username-modal-title">Welcome to Tools</h2> 166 166 <p>Choose a display name for collaboration cursors.</p> 167 167 <input type="text" class="username-input" id="username-input" placeholder="Your name" maxlength="50" autofocus /> 168 168 <div class="username-modal-actions"> ··· 174 174 175 175 <!-- Folder name modal --> 176 176 <div class="modal-backdrop" id="folder-modal" style="display:none;"> 177 177 - <div class="modal folder-modal" role="dialog" aria-modal="true"> 177 177 + <div class="modal folder-modal" role="dialog" aria-modal="true" aria-labelledby="folder-modal-title"> 178 178 <h2 id="folder-modal-title">New Folder</h2> 179 179 <input type="text" class="folder-name-input" id="folder-name-input" placeholder="Folder name" maxlength="100" /> 180 180 <div class="folder-modal-actions"> ··· 186 186 187 187 <!-- Move to folder modal --> 188 188 <div class="modal-backdrop" id="move-modal" style="display:none;"> 189 189 - <div class="modal move-modal" role="dialog" aria-modal="true"> 190 190 - <h2>Move to Folder</h2> 189 189 + <div class="modal move-modal" role="dialog" aria-modal="true" aria-labelledby="move-modal-title"> 190 190 + <h2 id="move-modal-title">Move to Folder</h2> 191 191 <div class="move-folder-list" id="move-folder-list"></div> 192 192 <div class="move-modal-actions"> 193 193 <button class="btn-secondary" id="move-cancel">Cancel</button>

+4

src/slides/event-handlers.ts

reviewed

··· 327 327 tabNotes.addEventListener('click', () => { 328 328 tabNotes.classList.add('slides-panel-tab--active'); 329 329 tabAnims.classList.remove('slides-panel-tab--active'); 330 330 + tabNotes.setAttribute('aria-selected', 'true'); 331 331 + tabAnims.setAttribute('aria-selected', 'false'); 330 332 contentNotes.style.display = ''; 331 333 contentAnims.style.display = 'none'; 332 334 }); 333 335 tabAnims.addEventListener('click', () => { 334 336 tabAnims.classList.add('slides-panel-tab--active'); 335 337 tabNotes.classList.remove('slides-panel-tab--active'); 338 338 + tabAnims.setAttribute('aria-selected', 'true'); 339 339 + tabNotes.setAttribute('aria-selected', 'false'); 336 340 contentAnims.style.display = ''; 337 341 contentNotes.style.display = 'none'; 338 342 });

+5 -5

src/slides/index.html

reviewed

··· 79 79 80 80 <!-- Right: Notes & Animations panel --> 81 81 <div class="slides-notes-panel" id="notes-panel"> 82 82 - <div class="slides-panel-tabs"> 83 83 - <button class="slides-panel-tab slides-panel-tab--active" id="tab-notes" data-tab="notes">Notes</button> 84 84 - <button class="slides-panel-tab" id="tab-animations" data-tab="animations">Animations</button> 82 82 + <div class="slides-panel-tabs" role="tablist" aria-label="Slide notes and animations"> 83 83 + <button class="slides-panel-tab slides-panel-tab--active" id="tab-notes" data-tab="notes" role="tab" aria-selected="true" aria-controls="tab-content-notes">Notes</button> 84 84 + <button class="slides-panel-tab" id="tab-animations" data-tab="animations" role="tab" aria-selected="false" aria-controls="tab-content-animations">Animations</button> 85 85 </div> 86 86 - <div class="slides-tab-content" id="tab-content-notes"> 86 86 + <div class="slides-tab-content" id="tab-content-notes" role="tabpanel" aria-labelledby="tab-notes"> 87 87 <textarea class="slides-notes-input" id="notes-input" placeholder="Add speaker notes..."></textarea> 88 88 </div> 89 89 - <div class="slides-tab-content" id="tab-content-animations" style="display:none"> 89 89 + <div class="slides-tab-content" id="tab-content-animations" role="tabpanel" aria-labelledby="tab-animations" style="display:none"> 90 90 <div class="slides-anim-list" id="anim-list"></div> 91 91 <div class="slides-anim-controls" id="anim-controls" style="display:none"> 92 92 <select id="anim-effect-select"></select>

+85

tests/slides-panel-tabs-a11y.test.ts

reviewed

··· 1 1 + // @vitest-environment jsdom 2 2 + import { describe, it, expect, beforeEach } from 'vitest'; 3 3 + 4 4 + /** 5 5 + * Regression: slides panel tabs (Notes / Animations) must keep `aria-selected` 6 6 + * in sync with the active class so screen readers announce the current tab. 7 7 + */ 8 8 + 9 9 + function mount() { 10 10 + document.body.innerHTML = ` 11 11 + <div class="slides-panel-tabs" role="tablist"> 12 12 + <button class="slides-panel-tab slides-panel-tab--active" id="tab-notes" 13 13 + data-tab="notes" role="tab" aria-selected="true" aria-controls="tab-content-notes">Notes</button> 14 14 + <button class="slides-panel-tab" id="tab-animations" 15 15 + data-tab="animations" role="tab" aria-selected="false" aria-controls="tab-content-animations">Animations</button> 16 16 + </div> 17 17 + <div id="tab-content-notes" role="tabpanel" aria-labelledby="tab-notes"></div> 18 18 + <div id="tab-content-animations" role="tabpanel" aria-labelledby="tab-animations" style="display:none"></div> 19 19 + `; 20 20 + } 21 21 + 22 22 + // Duplicate the panel-tab wiring from event-handlers.ts so the test does not 23 23 + // require pulling the whole slides module tree into jsdom. 24 24 + function setupPanelTabs(): void { 25 25 + const tabNotes = document.getElementById('tab-notes'); 26 26 + const tabAnims = document.getElementById('tab-animations'); 27 27 + const contentNotes = document.getElementById('tab-content-notes'); 28 28 + const contentAnims = document.getElementById('tab-content-animations'); 29 29 + if (!tabNotes || !tabAnims || !contentNotes || !contentAnims) return; 30 30 + 31 31 + tabNotes.addEventListener('click', () => { 32 32 + tabNotes.classList.add('slides-panel-tab--active'); 33 33 + tabAnims.classList.remove('slides-panel-tab--active'); 34 34 + tabNotes.setAttribute('aria-selected', 'true'); 35 35 + tabAnims.setAttribute('aria-selected', 'false'); 36 36 + (contentNotes as HTMLElement).style.display = ''; 37 37 + (contentAnims as HTMLElement).style.display = 'none'; 38 38 + }); 39 39 + tabAnims.addEventListener('click', () => { 40 40 + tabAnims.classList.add('slides-panel-tab--active'); 41 41 + tabNotes.classList.remove('slides-panel-tab--active'); 42 42 + tabAnims.setAttribute('aria-selected', 'true'); 43 43 + tabNotes.setAttribute('aria-selected', 'false'); 44 44 + (contentAnims as HTMLElement).style.display = ''; 45 45 + (contentNotes as HTMLElement).style.display = 'none'; 46 46 + }); 47 47 + } 48 48 + 49 49 + describe('slides panel tabs — a11y', () => { 50 50 + beforeEach(() => { 51 51 + document.body.innerHTML = ''; 52 52 + }); 53 53 + 54 54 + it('keeps aria-selected in sync when switching from Notes to Animations', () => { 55 55 + mount(); 56 56 + setupPanelTabs(); 57 57 + 58 58 + const notes = document.getElementById('tab-notes')!; 59 59 + const anims = document.getElementById('tab-animations')!; 60 60 + 61 61 + expect(notes.getAttribute('aria-selected')).toBe('true'); 62 62 + expect(anims.getAttribute('aria-selected')).toBe('false'); 63 63 + 64 64 + anims.click(); 65 65 + 66 66 + expect(anims.getAttribute('aria-selected')).toBe('true'); 67 67 + expect(notes.getAttribute('aria-selected')).toBe('false'); 68 68 + expect(anims.classList.contains('slides-panel-tab--active')).toBe(true); 69 69 + expect(notes.classList.contains('slides-panel-tab--active')).toBe(false); 70 70 + }); 71 71 + 72 72 + it('keeps aria-selected in sync when switching back to Notes', () => { 73 73 + mount(); 74 74 + setupPanelTabs(); 75 75 + 76 76 + const notes = document.getElementById('tab-notes')!; 77 77 + const anims = document.getElementById('tab-animations')!; 78 78 + 79 79 + anims.click(); 80 80 + notes.click(); 81 81 + 82 82 + expect(notes.getAttribute('aria-selected')).toBe('true'); 83 83 + expect(anims.getAttribute('aria-selected')).toBe('false'); 84 84 + }); 85 85 + });