jonathan/ISR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: proper WCAG heading structure for day sections

Browse Source 
Wrap the disclosure button in <h2> per the WAI-ARIA accordion pattern.
Screen readers now announce a heading level 2 for each day and users
can navigate between days with the H key. The button's accessible name
comes from its text content (date + meta), not a redundant aria-label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jonathan
2026-05-20 16:02:28 +02:00
parent 0309faa993
commit d3ded71873
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web.py
+10 -9
View File
@@ -690,6 +690,7 @@ button.cut:hover:not(:disabled){background:#1e3a8a}
button.day-hl{color:var(--green);border-color:#166534;background:#052e16;font-size:11px} button.day-hl{color:var(--green);border-color:#166534;background:#052e16;font-size:11px}
button.day-hl:hover:not(:disabled){background:#0a3d1f} button.day-hl:hover:not(:disabled){background:#0a3d1f}
button.day-hl:disabled{opacity:.5;cursor:default} button.day-hl:disabled{opacity:.5;cursor:default}
h2.day-heading{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;flex:1 1 auto}
.day-hl-container{background:var(--bg);border:1px solid var(--brd);border-top:none;padding:8px 12px 12px} .day-hl-container{background:var(--bg);border:1px solid var(--brd);border-top:none;padding:8px 12px 12px}
table.day-table{width:100%;border-collapse:collapse;border:1px solid var(--brd);border-top:none} table.day-table{width:100%;border-collapse:collapse;border:1px solid var(--brd);border-top:none}
svg.day-timeline{display:block;width:100%;height:22px} svg.day-timeline{display:block;width:100%;height:22px}
@@ -1112,14 +1113,15 @@ function renderFiles(files) {
headBar.className = 'day-heading-bar' + (expanded ? ' open' : ''); headBar.className = 'day-heading-bar' + (expanded ? ' open' : '');
headBar.id = 'dayhead-' + dayId; headBar.id = 'dayhead-' + dayId;
headBar.innerHTML = ` headBar.innerHTML = `
<button class="day-toggle" id="daytgl-${dayId}" <h2 class="day-heading">
aria-expanded="${expanded}" <button class="day-toggle" id="daytgl-${dayId}"
aria-controls="daytbl-${dayId}" aria-expanded="${expanded}"
aria-label="${expanded ? 'Collapse' : 'Expand'} ${esc(day)}"> aria-controls="daytbl-${dayId}">
<span class="day-arrow" aria-hidden="true">${expanded ? '▼' : '▶'}</span> <span class="day-arrow" aria-hidden="true">${expanded ? '▼' : '▶'}</span>
<strong>${esc(day)}</strong> ${esc(day)}
<span class="day-meta">${fileStr}${durStr}${sizeStr}</span> <span class="day-meta">${fileStr}${durStr}${sizeStr}</span>
</button> </button>
</h2>
${canHl ? `<button class="day-hl" id="dayhln-${dayId}" ${canHl ? `<button class="day-hl" id="dayhln-${dayId}"
aria-label="Show day highlights for ${esc(day)}">★ Highlights</button>` : ''}`; aria-label="Show day highlights for ${esc(day)}">★ Highlights</button>` : ''}`;
section.appendChild(headBar); section.appendChild(headBar);
@@ -1227,7 +1229,6 @@ function renderFiles(files) {
dayExpanded.set(dayId, nowExp); dayExpanded.set(dayId, nowExp);
const tgl = document.getElementById('daytgl-' + dayId); const tgl = document.getElementById('daytgl-' + dayId);
tgl.setAttribute('aria-expanded', nowExp); tgl.setAttribute('aria-expanded', nowExp);
tgl.setAttribute('aria-label', (nowExp ? 'Collapse' : 'Expand') + ' ' + day);
tgl.querySelector('.day-arrow').textContent = nowExp ? '▼' : '▶'; tgl.querySelector('.day-arrow').textContent = nowExp ? '▼' : '▶';
headBar.classList.toggle('open', nowExp); headBar.classList.toggle('open', nowExp);
document.getElementById('daytbl-' + dayId).hidden = !nowExp; document.getElementById('daytbl-' + dayId).hidden = !nowExp;