diff --git a/site/app.js b/site/app.js index 4092ae744..d2f1a8e14 100644 --- a/site/app.js +++ b/site/app.js @@ -124,11 +124,12 @@ var statusClass = p.status.replace(/ /g, '-'); var roman = toRoman(p.id); var num = String(p.id).padStart(2, '0'); - html += '
'; - html += '' + roman + '.'; - html += '
' + escapeHtml(p.name) + '
'; - html += '' + done + ' / ' + total + ''; - html += '' + num + ''; + var label = 'Phase ' + num + ': ' + p.name + ', ' + done + ' of ' + total + ' lessons complete'; + html += '
'; + html += ''; + html += '
' + escapeHtml(p.name) + '
'; + html += ''; + html += ''; html += '
'; } grid.innerHTML = html; @@ -179,16 +180,34 @@ var row = e.target.closest('.toc-row, .phase-card'); if (row) { var idx = parseInt(row.getAttribute('data-phase'), 10); - if (!isNaN(idx)) openModal(idx); + if (!isNaN(idx)) openModal(idx, row); } }); + // Keyboard activation for the role="button" phase rows. + document.addEventListener('keydown', function (e) { + if (e.key !== 'Enter' && e.key !== ' ') return; + var row = e.target.closest && e.target.closest('.toc-row, .phase-card'); + if (!row || !row.hasAttribute('data-phase')) return; + e.preventDefault(); + var idx = parseInt(row.getAttribute('data-phase'), 10); + if (!isNaN(idx)) openModal(idx, row); + }); + closeBtn.addEventListener('click', closeModal); overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(); }); document.addEventListener('keydown', function (e) { - if (e.key === 'Escape') closeModal(); + if (!overlay.classList.contains('open')) return; + if (e.key === 'Escape') { + e.preventDefault(); + closeModal(); + return; + } + if (e.key === 'Tab') { + trapTab(e, overlay); + } }); var resetBtn = document.getElementById('modalReset'); @@ -202,12 +221,37 @@ } } + function getFocusables(root) { + // getClientRects().length is more reliable than offsetParent for visibility: + // offsetParent returns null for position: fixed elements even when visible. + return Array.prototype.slice.call(root.querySelectorAll( + 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' + )).filter(function (el) { return el.getClientRects().length > 0; }); + } + + function trapTab(e, container) { + var f = getFocusables(container); + if (!f.length) return; + var first = f[0]; + var last = f[f.length - 1]; + var active = document.activeElement; + if (e.shiftKey && active === first) { + e.preventDefault(); + last.focus(); + } else if (!e.shiftKey && active === last) { + e.preventDefault(); + first.focus(); + } + } + var currentPhaseIdx = -1; + var lastModalTrigger = null; - function openModal(idx) { + function openModal(idx, triggerEl) { var p = PHASES[idx]; if (!p) return; currentPhaseIdx = idx; + lastModalTrigger = triggerEl || document.activeElement; document.getElementById('modalPhaseNum').textContent = 'PHASE ' + String(p.id).padStart(2, '0'); document.getElementById('modalTitle').textContent = p.name; @@ -215,8 +259,14 @@ renderModalLessons(p); - document.getElementById('modalOverlay').classList.add('open'); + var overlay = document.getElementById('modalOverlay'); + overlay.classList.add('open'); + overlay.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; + + // Move focus into the dialog so screen readers and keyboards land there. + var closeBtn = document.getElementById('modalClose'); + if (closeBtn) closeBtn.focus(); } function renderModalLessons(p) { @@ -238,11 +288,13 @@ if (userComplete) statusClass = 'complete'; html += '
'; - html += ''; + html += ''; if (l.url) { html += '' + escapeHtml(l.name) + ''; } else { - html += '' + escapeHtml(l.name) + ''; + // Unreleased lesson: render as plain text rather than a non-functional + // so it isn't announced or focused as a link. + html += '' + escapeHtml(l.name) + ''; } html += '' + escapeHtml(l.type) + ''; html += '' + escapeHtml(l.lang) + ''; @@ -306,21 +358,41 @@ } function closeModal() { - document.getElementById('modalOverlay').classList.remove('open'); + var overlay = document.getElementById('modalOverlay'); + overlay.classList.remove('open'); + overlay.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; + if (lastModalTrigger && typeof lastModalTrigger.focus === 'function') { + try { lastModalTrigger.focus(); } catch (_) {} + } + lastModalTrigger = null; } function initCopyButton() { var btn = document.getElementById('copyBtn'); var code = document.getElementById('cloneCmd'); + var status = document.getElementById('copyStatus'); if (!btn || !code) return; var originalLabel = btn.textContent; var revertTimer = null; btn.addEventListener('click', function () { navigator.clipboard.writeText(code.textContent).then(function () { btn.textContent = '✓'; + // Announce via a dedicated live region — the button's aria-label + // overrides its textContent, so AT won't hear "✓" otherwise. + // Clear first, then set on the next frame so repeated clicks + // produce a fresh AT announcement (live regions debounce identical text). + if (status) { + status.textContent = ''; + window.requestAnimationFrame(function () { + status.textContent = 'Command copied to clipboard'; + }); + } if (revertTimer) clearTimeout(revertTimer); - revertTimer = setTimeout(function () { btn.textContent = originalLabel; }, 1500); + revertTimer = setTimeout(function () { + btn.textContent = originalLabel; + if (status) status.textContent = ''; + }, 1500); }); }); } diff --git a/site/catalog.html b/site/catalog.html index c82e1173f..1924b3092 100644 --- a/site/catalog.html +++ b/site/catalog.html @@ -112,20 +112,28 @@ } .catalog-table th { + text-align: left; + padding: 0; + border-bottom: 2px solid var(--border); + white-space: nowrap; + } + + .catalog-table th .sort-btn { + width: 100%; + text-align: left; + background: none; + border: 0; + padding: 14px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; - text-align: left; - padding: 14px 16px; - border-bottom: 2px solid var(--border); color: var(--text-muted); cursor: pointer; user-select: none; - white-space: nowrap; transition: color 0.2s; } - .catalog-table th:hover { + .catalog-table th .sort-btn:hover { color: var(--accent); } @@ -229,10 +237,10 @@ Catalog Roadmap Glossary - + - … +
@@ -257,26 +265,29 @@

Lesson Catalog

Every lesson across all 20 phases. Search, filter, sort.

- - + + -
-
+
- - - - - + + + + + @@ -448,7 +459,8 @@

Lesson Catalog

statusSelect.addEventListener('change', render); document.querySelectorAll('.catalog-table th[data-sort]').forEach(function (th) { - th.addEventListener('click', function () { + var btn = th.querySelector('.sort-btn'); + var handler = function () { var col = th.getAttribute('data-sort'); if (sortCol === col) { sortDir = sortDir * -1; @@ -456,12 +468,18 @@

Lesson Catalog

sortCol = col; sortDir = 1; } - document.querySelectorAll('.catalog-table th .sort-arrow').forEach(function (a) { - a.textContent = ''; + document.querySelectorAll('.catalog-table th[data-sort]').forEach(function (otherTh) { + otherTh.setAttribute('aria-sort', 'none'); + var arrow = otherTh.querySelector('.sort-arrow'); + if (arrow) arrow.textContent = ''; }); - th.querySelector('.sort-arrow').textContent = sortDir === 1 ? ' \u25B2' : ' \u25BC'; + th.setAttribute('aria-sort', sortDir === 1 ? 'ascending' : 'descending'); + var arrow = th.querySelector('.sort-arrow'); + if (arrow) arrow.textContent = sortDir === 1 ? ' \u25B2' : ' \u25BC'; render(); - }); + }; + if (btn) btn.addEventListener('click', handler); + else th.addEventListener('click', handler); }); render(); diff --git a/site/glossary.html b/site/glossary.html index ddd949f95..ad5bca607 100644 --- a/site/glossary.html +++ b/site/glossary.html @@ -180,10 +180,10 @@ CatalogRoadmapGlossary - + - … + @@ -208,9 +208,10 @@

AI Glossary

What people say vs what things actually mean

- + +
-
+
diff --git a/site/index.html b/site/index.html index 142afcf72..f944a47f7 100644 --- a/site/index.html +++ b/site/index.html @@ -580,9 +580,9 @@ CatalogRoadmapGlossary - + - … + @@ -630,29 +630,29 @@

AI Engineering
from Scratch

Finished Lessons - + 0 / 0
Phases - + 0 / 0
Languages - + 4
Glossary Terms - + ···
-
-
Curriculum · 20 phases · 435 lessons
+
+

Curriculum · 20 phases · 435 lessons

Tap a phase to expand its lessons. Each one ships when its math, code, and test are all written.
@@ -662,9 +662,9 @@

AI Engineering
from Scratch

-
diff --git a/site/lesson.html b/site/lesson.html index 7258e12e1..910791e64 100644 --- a/site/lesson.html +++ b/site/lesson.html @@ -1577,10 +1577,10 @@ CatalogRoadmapGlossary - + - … + - +
Phase Lesson Type Language Status