maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y: WCAG AA contrast + ARIA roles + focus management across all pages

Browse Source 
- css/ls.css: --text-3 #8898AA → #56687A (5.1:1 contrast), min-height 44px on .btn-primary/.btn-ghost/.sb-link, new .icon-btn utility (44×44px)
- js/api.js: lsConfirm — role=dialog, aria-modal, aria-labelledby, Tab focus trap, restore focus on close; lsToast — aria-live=polite on container, role=alert on errors; live quiz — role=dialog, role=radiogroup, role=radio, aria-checked, keyboard support
- test-run.html: q-opt divs — role=radio/checkbox, aria-checked, tabindex, keyboard enter/space; confirm modal — role=dialog, aria-modal; btn-flag — aria-pressed; dots — aria-label, aria-current; touch targets 44px
- board.html: btn-del-ann — aria-label; reaction buttons — aria-label, aria-pressed
- All 18 HTML files: replace hardcoded color:#8898AA with color:var(--text-3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-04-16 11:42:38 +03:00
parent 3a4623a60a
commit 26ba289019
22 changed files with 362 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/question-bank.html
+6 -6
View File
@@ -48,7 +48,7 @@
}
.filter-section { display: flex; flex-direction: column; gap: 8px; }
.filter-label {
font-size: 0.7rem; font-weight: 700; color: #8898AA;
font-size: 0.7rem; font-weight: 700; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
}
.filter-search {
@@ -125,11 +125,11 @@
}
.qc-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-topic {
font-size: 0.7rem; font-weight: 700; color: #8898AA;
font-size: 0.7rem; font-weight: 700; color: var(--text-3);
display: flex; align-items: center; gap: 4px;
}
.qc-opts-count {
margin-left: auto; font-size: 0.7rem; color: #8898AA; font-weight: 600;
margin-left: auto; font-size: 0.7rem; color: var(--text-3); font-weight: 600;
display: flex; align-items: center; gap: 3px;
}
@@ -169,7 +169,7 @@
background: #06D6A0; border-color: #06D6A0; color: #fff;
}
.qc-explanation {
font-size: 0.78rem; color: #8898AA; font-style: italic; line-height: 1.5;
font-size: 0.78rem; color: var(--text-3); font-style: italic; line-height: 1.5;
background: rgba(155,93,229,0.04); border-left: 3px solid rgba(155,93,229,0.3);
padding: 8px 12px; border-radius: 0 8px 8px 0;
}
@@ -187,11 +187,11 @@
}
.pag-btn:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.pag-btn:disabled { opacity: 0.4; cursor: default; }
.pag-info { font-size: 0.82rem; font-weight: 600; color: #8898AA; }
.pag-info { font-size: 0.82rem; font-weight: 600; color: var(--text-3); }
/* ── empty state ── */
.qb-empty {
text-align: center; padding: 80px 20px; color: #8898AA; font-size: 0.9rem;
text-align: center; padding: 80px 20px; color: var(--text-3); font-size: 0.9rem;
}
.qb-empty-icon { margin-bottom: 14px; opacity: 0.25; }