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/classroom.html
+19 -19
View File
@@ -78,7 +78,7 @@
font-family: 'Unbounded',sans-serif; font-size: 1.1rem; font-weight: 800;
color: #fff; margin: 0;
}
.cr-idle p { color: #8898AA; font-size: 0.85rem; margin: 0; max-width: 340px; line-height: 1.6; }
.cr-idle p { color: var(--text-3); font-size: 0.85rem; margin: 0; max-width: 340px; line-height: 1.6; }
.cr-start-btn {
display: flex; align-items: center; gap: 8px;
padding: 12px 28px; border-radius: 99px;
@@ -672,7 +672,7 @@
.mic-off { color: rgba(255,255,255,0.18); }
.cr-p-mute-btn {
background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px;
color: #8898AA; display: flex; align-items: center; opacity: 0; transition: opacity .15s, color .15s;
color: var(--text-3); display: flex; align-items: center; opacity: 0; transition: opacity .15s, color .15s;
}
.cr-participant:hover .cr-p-mute-btn { opacity: 1; }
@@ -733,7 +733,7 @@
display: flex; align-items: center; gap: 4px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px; padding: 2px 7px 2px 5px;
cursor: pointer; font-size: 0.67rem; font-weight: 600; color: #8898AA;
cursor: pointer; font-size: 0.67rem; font-weight: 600; color: var(--text-3);
transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
}
@@ -792,7 +792,7 @@
.cr-msg-row.mine .cr-msg-time { text-align: right; }
.cr-msg-pin-badge { color: #9B5DE5; opacity: 0.8; display: flex; align-items: center; }
.cr-msg-pin-btn {
background: none; border: none; cursor: pointer; color: #8898AA;
background: none; border: none; cursor: pointer; color: var(--text-3);
padding: 1px; border-radius: 4px; display: flex; align-items: center;
opacity: 0; transition: opacity .15s, color .15s;
}
@@ -1030,7 +1030,7 @@
padding: 20px; text-align: center;
}
.cr-no-session svg { width: 32px; height: 32px; stroke: #8898AA; }
.cr-no-session p { font-size: 0.78rem; color: #8898AA; line-height: 1.5; margin: 0; }
.cr-no-session p { font-size: 0.78rem; color: var(--text-3); line-height: 1.5; margin: 0; }
/* ── Modal: start session ── */
.cr-modal-overlay {
@@ -1050,13 +1050,13 @@
font-family: 'Unbounded',sans-serif; font-size: 1rem; font-weight: 800;
color: #fff; margin-bottom: 6px;
}
.cr-modal-sub { font-size: 0.8rem; color: #8898AA; margin-bottom: 20px; }
.cr-modal-sub { font-size: 0.8rem; color: var(--text-3); margin-bottom: 20px; }
.cr-mode-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.cr-mode-tab {
flex: 1; padding: 9px; border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.78rem;
color: var(--text-3); font-family: 'Manrope',sans-serif; font-size: 0.78rem;
font-weight: 700; cursor: pointer; transition: all .15s;
}
.cr-mode-tab.active {
@@ -1064,7 +1064,7 @@
}
.cr-field { margin-bottom: 14px; }
.cr-label { font-size: 0.75rem; font-weight: 700; color: #8898AA; margin-bottom: 6px; display: block; }
.cr-label { font-size: 0.75rem; font-weight: 700; color: var(--text-3); margin-bottom: 6px; display: block; }
.cr-input {
width: 100%; background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px;
@@ -1113,7 +1113,7 @@
.cr-online-empty { padding: 16px 12px; text-align: center; font-size: .8rem; color: #475569; }
.cr-online-refresh {
display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
font-size: .72rem; font-weight: 700; color: #8898AA; cursor: pointer;
font-size: .72rem; font-weight: 700; color: var(--text-3); cursor: pointer;
background: none; border: none; padding: 0; font-family: 'Manrope',sans-serif;
}
.cr-online-refresh:hover { color: #c4b5fd; }
@@ -1135,7 +1135,7 @@
.cr-modal-cancel {
flex: 1; padding: 11px; border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.85rem;
color: var(--text-3); font-family: 'Manrope',sans-serif; font-size: 0.85rem;
font-weight: 700; cursor: pointer; transition: all .15s;
}
.cr-modal-cancel:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
@@ -1199,7 +1199,7 @@
font-family: 'Unbounded',sans-serif; font-size: 1rem; font-weight: 800;
color: #fff; margin: 0;
}
.cr-join-banner p { font-size: 0.82rem; color: #8898AA; margin: 0; line-height: 1.6; }
.cr-join-banner p { font-size: 0.82rem; color: var(--text-3); margin: 0; line-height: 1.6; }
.cr-join-btn {
padding: 11px 32px; border-radius: 99px;
background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
@@ -1835,13 +1835,13 @@
color: #fff; margin: 0 0 8px;
}
.cr-dlg-msg {
font-size: 0.83rem; color: #8898AA; margin: 0 0 24px; line-height: 1.65;
font-size: 0.83rem; color: var(--text-3); margin: 0 0 24px; line-height: 1.65;
}
.cr-dlg-actions { display: flex; gap: 10px; }
.cr-dlg-cancel {
flex: 1; padding: 10px; border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.85rem;
color: var(--text-3); font-family: 'Manrope',sans-serif; font-size: 0.85rem;
font-weight: 700; cursor: pointer; transition: all .15s;
}
.cr-dlg-cancel:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
@@ -1885,7 +1885,7 @@
}
.cr-sp-close {
background: none; border: none; cursor: pointer; padding: 6px;
border-radius: 8px; color: #8898AA; transition: color .15s, background .15s;
border-radius: 8px; color: var(--text-3); transition: color .15s, background .15s;
display: flex; align-items: center;
}
.cr-sp-close:hover { background: rgba(255,255,255,0.07); color: #fff; }
@@ -1894,7 +1894,7 @@
}
.cr-sp-tab {
flex: 1; padding: 10px 6px; font-family: 'Manrope',sans-serif;
font-size: 0.7rem; font-weight: 700; color: #8898AA;
font-size: 0.7rem; font-weight: 700; color: var(--text-3);
background: none; border: none; cursor: pointer;
border-bottom: 2px solid transparent; transition: color .15s;
}
@@ -1908,11 +1908,11 @@
.cr-sp-section { display: flex; flex-direction: column; gap: 10px; }
.cr-sp-section-label {
font-family: 'Manrope',sans-serif; font-size: 0.68rem; font-weight: 700;
color: #8898AA; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.cr-sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cr-sp-row-lbl { font-family: 'Manrope',sans-serif; font-size: 0.82rem; font-weight: 600; color: #c8d0db; flex: 1; line-height: 1.4; }
.cr-sp-row-sub { font-size: 0.69rem; color: #8898AA; margin-top: 2px; }
.cr-sp-row-sub { font-size: 0.69rem; color: var(--text-3); margin-top: 2px; }
/* Toggle */
.cr-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.cr-toggle input { opacity: 0; width: 0; height: 0; }
@@ -1931,7 +1931,7 @@
.cr-seg button {
flex: 1; padding: 7px 8px; border: none; background: none; cursor: pointer;
font-family: 'Manrope',sans-serif; font-size: 0.72rem; font-weight: 700;
color: #8898AA; transition: all .15s;
color: var(--text-3); transition: all .15s;
}
.cr-seg button.active { background: #9B5DE5; color: #fff; border-radius: 6px; }
/* Mic test */
@@ -1946,7 +1946,7 @@
.cr-sp-btn.cyan { border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.08); color: #06D6A0; }
.cr-sp-btn.cyan:hover { background: rgba(6,214,160,0.16); }
.cr-sp-btn.cyan.granted { opacity: 0.6; cursor: default; pointer-events: none; }
.cr-sp-note { font-family: 'Manrope',sans-serif; font-size: 0.72rem; color: #8898AA; line-height: 1.5; }
.cr-sp-note { font-family: 'Manrope',sans-serif; font-size: 0.72rem; color: var(--text-3); line-height: 1.5; }
/* Chat font size */
#cr-messages .cr-msg-text { font-size: 0.82rem; }
.cr-chat-fs-small #cr-messages .cr-msg-text { font-size: 0.74rem; }