diff --git a/.gitignore b/.gitignore index 8ec11ab..cba02b2 100644 --- a/.gitignore +++ b/.gitignore @@ -66,6 +66,11 @@ output.txt.txt !docs/*.png !docs/*.gif !docs/*.webp +# …and curated docs/ subfolder assets (e.g. accessibility before/after shots). +!docs/**/*.png +!docs/**/*.jpg +!docs/**/*.gif +!docs/**/*.webp # Reports and temp files reports/ diff --git a/docs/a11y/focus-after.png b/docs/a11y/focus-after.png new file mode 100644 index 0000000..7c9938a Binary files /dev/null and b/docs/a11y/focus-after.png differ diff --git a/docs/a11y/focus-before.png b/docs/a11y/focus-before.png new file mode 100644 index 0000000..d5cf76b Binary files /dev/null and b/docs/a11y/focus-before.png differ diff --git a/docs/a11y/login-after.png b/docs/a11y/login-after.png new file mode 100644 index 0000000..cc2571d Binary files /dev/null and b/docs/a11y/login-after.png differ diff --git a/docs/a11y/login-before.png b/docs/a11y/login-before.png new file mode 100644 index 0000000..bb76ea4 Binary files /dev/null and b/docs/a11y/login-before.png differ diff --git a/static/index.html b/static/index.html index 8b232f2..5c68606 100644 --- a/static/index.html +++ b/static/index.html @@ -921,7 +921,12 @@ -
+
+ +

Odysseus

Odysseus Chat
Rename
Copy Chat
PDF
Save to Documents
@@ -2254,6 +2259,7 @@ + diff --git a/static/js/a11y.js b/static/js/a11y.js new file mode 100644 index 0000000..814472d --- /dev/null +++ b/static/js/a11y.js @@ -0,0 +1,165 @@ +// Accessibility enhancements for keyboard + screen-reader users. +// +// Several primary controls in Odysseus are authored as click-only
s +// (most notably the whole sidebar navigation: New Chat, Search, Brain, +// Calendar, Compare, Cookbook, Deep Research, Gallery, Library, Notes, +// Tasks, Theme, plus the account row).
s are not in the tab order and +// are not announced as buttons, so keyboard and screen-reader users cannot +// reach or operate them. +// +// This module enhances those rows in place — making them focusable +// (tabindex=0), announcing them as buttons when it's safe to do so, and +// activating them with Enter / Space — without changing how they look or +// how they behave for mouse users. The visible focus ring already exists in +// style.css (`.list-item:focus-visible`); it simply never fired because the +// rows were never focusable. + +(function () { + 'use strict'; + + // Click-as-button rows we want reachable by keyboard. + var ROW_SELECTOR = ['#sidebar .list-item', '#user-bar-profile'].join(','); + + // Native interactive descendants. If a row contains one of these we must + // NOT give the row role="button" — a button inside a button is invalid + // (axe "nested-interactive") and confuses screen readers. Such rows still + // become focusable + Enter/Space-activatable, just without the role. + var NESTED_INTERACTIVE = + 'a[href],button,input,select,textarea,[contenteditable="true"],[tabindex]:not([tabindex="-1"])'; + + function enhanceRow(el) { + if (!el || el.nodeType !== 1 || el.dataset.a11yEnhanced === '1') return; + var tag = el.tagName; + // Leave genuine native controls alone. + if (tag === 'BUTTON' || tag === 'A' || tag === 'INPUT' || + tag === 'SELECT' || tag === 'TEXTAREA') return; + + el.dataset.a11yEnhanced = '1'; + if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0'); + el.setAttribute('data-a11y-activatable', '1'); + + if (!el.querySelector(NESTED_INTERACTIVE) && !el.hasAttribute('role')) { + el.setAttribute('role', 'button'); + } + + // Guarantee an accessible name. Visible text normally supplies it; fall + // back to the title attribute for icon-only rows. + if (!el.getAttribute('aria-label') && + !(el.textContent || '').trim() && + el.getAttribute('title')) { + el.setAttribute('aria-label', el.getAttribute('title')); + } + } + + function enhanceAll(root) { + (root || document).querySelectorAll(ROW_SELECTOR).forEach(enhanceRow); + } + + // ---- Modal dialogs ----------------------------------------------------- + // Odysseus modals are plain
boxes. Marking + // them as ARIA dialogs lets screen readers announce them as dialogs and + // exempts their content from the "all content in landmarks" rule. We also + // normalize the modal title to heading level 2 (one below the page

) + // so heading order stays valid no matter which tag the markup uses. + var titleSeq = 0; + // Each modal "kind" is a container selector plus where to find its title + // heading. Standard modals use .modal-content/.modal-header; the docked + // Notes pane uses its own markup. + var MODAL_KINDS = [ + { + sel: '.modal-content', + heading: '.modal-header h1, .modal-header h2, .modal-header h3, ' + + '.modal-header h4, .modal-header h5, .modal-header h6' + }, + { sel: '.notes-pane', heading: '.notes-pane-title' } + ]; + var MODAL_SEL = MODAL_KINDS.map(function (k) { return k.sel; }).join(','); + + function enhanceModal(mc, headingSel) { + if (!mc || mc.nodeType !== 1 || mc.dataset.a11yDialog === '1') return; + mc.dataset.a11yDialog = '1'; + if (!mc.hasAttribute('role')) mc.setAttribute('role', 'dialog'); + if (!mc.hasAttribute('aria-modal')) mc.setAttribute('aria-modal', 'true'); + + var heading = headingSel && mc.querySelector(headingSel); + if (heading) { + if (!heading.id) heading.id = 'a11y-modal-title-' + (++titleSeq); + if (!mc.hasAttribute('aria-labelledby')) { + mc.setAttribute('aria-labelledby', heading.id); + } + // Modal titles sit one level below the page

; normalize so heading + // order stays valid regardless of the tag the markup happens to use. + if (!heading.hasAttribute('aria-level')) heading.setAttribute('aria-level', '2'); + } + } + + function enhanceModals(root) { + var scope = root || document; + MODAL_KINDS.forEach(function (k) { + scope.querySelectorAll(k.sel).forEach(function (mc) { enhanceModal(mc, k.heading); }); + }); + } + + function headingSelFor(el) { + for (var i = 0; i < MODAL_KINDS.length; i++) { + if (el.matches(MODAL_KINDS[i].sel)) return MODAL_KINDS[i].heading; + } + return null; + } + + // Delegated keyboard activation. We only act when the focused element is + // itself an enhanced row (keydown targets the focused element), so a press + // on a nested native button is left to the browser's own handling. + document.addEventListener('keydown', function (e) { + if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return; + var el = e.target; + if (!el || !el.matches || !el.matches('[data-a11y-activatable]')) return; + e.preventDefault(); // Space would otherwise scroll the page + el.click(); + }); + + function init() { + enhanceAll(document); + enhanceModals(document); + + // Sidebar content is re-rendered as the user navigates (session lists, + // tool sub-rows, etc.). Watch for new rows and enhance them too. + var sidebar = document.getElementById('sidebar'); + if (sidebar && 'MutationObserver' in window) { + new MutationObserver(function (muts) { + for (var i = 0; i < muts.length; i++) { + var added = muts[i].addedNodes; + for (var j = 0; j < added.length; j++) { + var n = added[j]; + if (n.nodeType !== 1) continue; + if (n.matches && n.matches(ROW_SELECTOR)) enhanceRow(n); + if (n.querySelectorAll) enhanceAll(n); + } + } + }).observe(sidebar, { childList: true, subtree: true }); + } + + // Some modals (Notes, Tasks, …) are injected at runtime, usually as + // direct children of . Catch those without paying for a deep + // subtree observer over the whole document. + if ('MutationObserver' in window) { + new MutationObserver(function (muts) { + for (var i = 0; i < muts.length; i++) { + var added = muts[i].addedNodes; + for (var j = 0; j < added.length; j++) { + var n = added[j]; + if (n.nodeType !== 1) continue; + if (n.matches && n.matches(MODAL_SEL)) enhanceModal(n, headingSelFor(n)); + if (n.querySelector && n.querySelector(MODAL_SEL)) enhanceModals(n); + } + } + }).observe(document.body, { childList: true }); + } + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/static/js/notes.js b/static/js/notes.js index 362986a..3af86a3 100644 --- a/static/js/notes.js +++ b/static/js/notes.js @@ -1118,11 +1118,11 @@ export function openPanel() {

Notes

- - @@ -1214,7 +1214,7 @@ export function openPanel() { const syncArchiveBtn = () => { archiveBtn.classList.toggle('active', _showingArchived); archiveBtn.title = _showingArchived ? 'Exit archive' : 'View archive'; - archiveBtn.style.opacity = _showingArchived ? '1' : '0.6'; + archiveBtn.style.opacity = _showingArchived ? '1' : '0.8'; // Swap to an X while in archive view so it doubles as a close-back- // to-active-notes toggle. archiveBtn.innerHTML = _showingArchived ? CLOSE_ICON : ARCHIVE_ICON; @@ -2022,12 +2022,12 @@ function _renderQuickAdd(body) { // drawing happens in the expanded form). The pill that's active steers // both the placeholder and the type the form opens in. wrap.innerHTML = ` -
- -
@@ -2046,7 +2046,9 @@ function _renderQuickAdd(body) { seg.classList.toggle('is-todo', t === 'todo'); seg.classList.toggle('is-note', t === 'note'); seg.querySelectorAll('.notes-quick-type-pill').forEach(p => { - p.classList.toggle('active', p.dataset.type === t); + const on = p.dataset.type === t; + p.classList.toggle('active', on); + p.setAttribute('aria-pressed', on ? 'true' : 'false'); }); input.placeholder = t === 'note' ? 'Add a note…' : 'Add a to-do…'; }; diff --git a/static/js/tasks.js b/static/js/tasks.js index 6dcf249..262410b 100644 --- a/static/js/tasks.js +++ b/static/js/tasks.js @@ -2401,7 +2401,7 @@ function _renderMainView() {

Scheduled prompts and actions that run automatically. Results appear in a dedicated session.

- diff --git a/static/js/theme.js b/static/js/theme.js index 14b2ee7..d11b812 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1495,6 +1495,9 @@ function _initSynapse() { const canvas = document.createElement('canvas'); canvas.id = 'synapse-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1588,6 +1591,9 @@ function _initRain() { const canvas = document.createElement('canvas'); canvas.id = 'rain-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1660,6 +1666,9 @@ function _initConstellations() { const canvas = document.createElement('canvas'); canvas.id = 'constellations-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1763,6 +1772,9 @@ function _initPerlinFlow() { const canvas = document.createElement('canvas'); canvas.id = 'perlin-flow-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1818,6 +1830,9 @@ function _initPetals() { const canvas = document.createElement('canvas'); canvas.id = 'petals-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1872,6 +1887,9 @@ function _initSparkles() { const canvas = document.createElement('canvas'); canvas.id = 'sparkles-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); @@ -1927,6 +1945,9 @@ function _initEmbers() { const canvas = document.createElement('canvas'); canvas.id = 'embers-canvas'; canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;'; + // Decorative background effect — hide from assistive tech so screen readers + // don't announce an empty canvas and axe's "region" rule doesn't flag it. + canvas.setAttribute('aria-hidden', 'true'); document.body.prepend(canvas); const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); diff --git a/static/login.html b/static/login.html index 53de22c..5bf80cc 100644 --- a/static/login.html +++ b/static/login.html @@ -150,16 +150,23 @@ color: var(--fg); font-size: 0.95rem; font-family: 'Fira Code', monospace; } input:focus { outline: none; border-color: var(--red); } + /* Clear, visible focus ring for keyboard users on every focusable control. */ + input:focus-visible, a:focus-visible, button:focus-visible { + outline: 2px solid var(--red); + outline-offset: 2px; + } button { width: 100%; /* Asymmetric vertical padding nudges the label 1px down while keeping the button's total height the same as 0.7rem all-around. */ padding: calc(0.7rem + 1px) 0.7rem calc(0.7rem - 1px); border: none; border-radius: 6px; - background: var(--red); color: #fff; font-size: 1rem; cursor: pointer; + /* Darken the brand red slightly so #fff label text clears the WCAG AA + 4.5:1 contrast threshold (plain --red #e06c75 only reaches ~3.2:1). */ + background: color-mix(in srgb, var(--red) 78%, #000); color: #fff; font-size: 1rem; cursor: pointer; font-weight: 600; font-family: 'Fira Code', monospace; } - button:hover { background: color-mix(in srgb, var(--red) 85%, black); } + button:hover { background: color-mix(in srgb, var(--red) 66%, black); } button:disabled { opacity: 0.5; cursor: not-allowed; } .error { color: #e55; font-size: 0.85rem; margin-bottom: 0.75rem; display: none; } .toggle { text-align: center; margin-top: calc(1rem + 4px); font-size: 0.85rem; color: color-mix(in srgb, var(--fg) 50%, transparent); } @@ -185,7 +192,17 @@ align-items: center; justify-content: center; font-size: 0; margin: 0; color: transparent; } - .remember-toggle .remember-check { display: none; } + /* Visually hide the native checkbox but keep it in the accessibility tree + and keyboard-focusable (display:none would drop it from tab order). It + overlays the dot so a click/tap still toggles it. */ + .remember-toggle .remember-check { + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; margin: 0; + opacity: 0; cursor: pointer; + } + .remember-toggle .remember-check:focus-visible + .remember-dot { + outline: 2px solid var(--red); outline-offset: 2px; + } .remember-toggle .remember-dot { display: block; width: 10px; height: 10px; min-width: 10px; min-height: 10px; border-radius: 50%; @@ -223,21 +240,21 @@ -
- +
+

+ Odysseus +

-
+
@@ -266,9 +283,9 @@ Don't have an account? Sign up
-
+

-
+