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/teacher-guide.html
+12 -12
View File
@@ -35,7 +35,7 @@
.tg-nav-header { padding: 0 16px 16px; border-bottom: 1px solid rgba(15,23,42,0.08); margin-bottom: 12px; }
.tg-nav-title {
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
color: #8898AA; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 10px;
}
.tg-progress-wrap { margin-bottom: 6px; }
@@ -46,7 +46,7 @@
height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0);
border-radius: 99px; width: 0%; transition: width 0.3s;
}
.tg-progress-text { font-size: 0.68rem; color: #8898AA; margin-top: 5px; }
.tg-progress-text { font-size: 0.68rem; color: var(--text-3); margin-top: 5px; }
/* Search in nav */
.tg-nav-search {
@@ -78,7 +78,7 @@
width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
background: rgba(15,23,42,0.06); display: flex; align-items: center; justify-content: center;
}
.tg-nav-ch-icon svg { width: 13px; height: 13px; color: #8898AA; stroke: #8898AA; }
.tg-nav-ch-icon svg { width: 13px; height: 13px; color: var(--text-3); stroke: var(--text-3); }
.tg-nav-ch-btn.active .tg-nav-ch-icon { background: rgba(155,93,229,0.12); }
.tg-nav-ch-btn.active .tg-nav-ch-icon svg { color: #9B5DE5; stroke: #9B5DE5; }
.tg-nav-ch-label {
@@ -89,7 +89,7 @@
.tg-nav-ch-status svg { width: 14px; height: 14px; color: #06D664; stroke: #06D664; display: none; }
.tg-nav-ch-btn.read .tg-nav-ch-status svg { display: block; }
.tg-nav-ch-chevron { flex-shrink: 0; transition: transform 0.2s; }
.tg-nav-ch-chevron svg { width: 12px; height: 12px; color: #8898AA; stroke: #8898AA; }
.tg-nav-ch-chevron svg { width: 12px; height: 12px; color: var(--text-3); stroke: var(--text-3); }
.tg-nav-chapter.open .tg-nav-ch-chevron { transform: rotate(90deg); }
/* Sub-sections */
@@ -98,7 +98,7 @@
.tg-nav-sec-link {
display: flex; align-items: center; gap: 8px;
padding: 5px 16px 5px 51px;
font-size: 0.74rem; color: #8898AA; text-decoration: none;
font-size: 0.74rem; color: var(--text-3); text-decoration: none;
border-radius: 8px; transition: all 0.15s; cursor: pointer;
}
.tg-nav-sec-link:hover { color: #0F172A; background: rgba(15,23,42,0.04); }
@@ -177,7 +177,7 @@
.tg-chapter-icon svg { width: 24px; height: 24px; color: #9B5DE5; stroke: #9B5DE5; }
.tg-chapter-meta { flex: 1; }
.tg-chapter-num {
font-size: 0.66rem; font-weight: 700; color: #8898AA;
font-size: 0.66rem; font-weight: 700; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;
}
.tg-chapter-title {
@@ -266,9 +266,9 @@
padding: 3px 9px; border-radius: 99px; flex-shrink: 0;
}
.tg-acc-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; flex: 1; }
.tg-acc-desc-short { font-size: 0.78rem; color: #8898AA; }
.tg-acc-desc-short { font-size: 0.78rem; color: var(--text-3); }
.tg-acc-chevron { transition: transform 0.2s; }
.tg-acc-chevron svg { width: 14px; height: 14px; color: #8898AA; stroke: #8898AA; }
.tg-acc-chevron svg { width: 14px; height: 14px; color: var(--text-3); stroke: var(--text-3); }
.tg-acc-item.open .tg-acc-chevron { transform: rotate(180deg); }
.tg-acc-body {
max-height: 0; overflow: hidden;
@@ -283,7 +283,7 @@
.tg-checklist { background: #fff; border: 1.5px solid rgba(15,23,42,0.07); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,0.04); }
.tg-checklist-header { padding: 18px 22px 14px; border-bottom: 1px solid rgba(15,23,42,0.07); display: flex; align-items: center; justify-content: space-between; }
.tg-checklist-title { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #0F172A; }
.tg-checklist-prog { font-size: 0.72rem; color: #8898AA; }
.tg-checklist-prog { font-size: 0.72rem; color: var(--text-3); }
.tg-checklist-bar { height: 4px; background: rgba(15,23,42,0.07); }
.tg-checklist-bar-inner { height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0); width: 0%; transition: width 0.4s; }
.tg-checklist-items { padding: 10px 12px 12px; }
@@ -294,7 +294,7 @@
.tg-cl-item:hover { background: rgba(155,93,229,0.05); }
.tg-cl-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: #9B5DE5; cursor: pointer; flex-shrink: 0; }
.tg-cl-label { flex: 1; font-size: 0.84rem; color: #0F172A; font-weight: 500; }
.tg-cl-item.checked .tg-cl-label { text-decoration: line-through; color: #8898AA; }
.tg-cl-item.checked .tg-cl-label { text-decoration: line-through; color: var(--text-3); }
.tg-cl-link { font-size: 0.72rem; color: #9B5DE5; text-decoration: none; white-space: nowrap; }
.tg-cl-link:hover { text-decoration: underline; }
@@ -339,7 +339,7 @@
}
.tg-tool-icon svg { width: 16px; height: 16px; color: #9B5DE5; stroke: #9B5DE5; }
.tg-tool-name { font-size: 0.8rem; font-weight: 700; color: #0F172A; }
.tg-tool-desc { font-size: 0.7rem; color: #8898AA; margin-top: 1px; }
.tg-tool-desc { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
/* Chapter nav */
.tg-chapter-nav { display: flex; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1.5px solid rgba(15,23,42,0.08); }
@@ -354,7 +354,7 @@
.tg-ch-nav-btn.next { flex-direction: row-reverse; text-align: right; }
.tg-ch-nav-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(155,93,229,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tg-ch-nav-icon svg { width: 16px; height: 16px; color: #9B5DE5; stroke: #9B5DE5; }
.tg-ch-nav-label { font-size: 0.68rem; color: #8898AA; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.tg-ch-nav-label { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.tg-ch-nav-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; margin-top: 2px; }
/* Divider */