a11y: WCAG AA contrast + ARIA roles + focus management across all pages
- 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
+10
-10
@@ -27,12 +27,12 @@
|
||||
.cl-avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #fff; }
|
||||
.cl-info { flex: 1; min-width: 0; }
|
||||
.cl-name { font-size: 0.88rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
|
||||
.cl-meta { font-size: 0.73rem; color: #8898AA; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.cl-meta { font-size: 0.73rem; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.cl-chevron { color: #cbd5e1; flex-shrink: 0; transition: color 0.15s; }
|
||||
.cl-item.active .cl-chevron { color: var(--violet); }
|
||||
.cl-item:hover .cl-chevron { color: #94a3b8; }
|
||||
.cl-works-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }
|
||||
.cl-empty-side { padding: 40px 16px; text-align: center; color: #8898AA; font-size: 0.8rem; line-height: 1.6; }
|
||||
.cl-empty-side { padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 0.8rem; line-height: 1.6; }
|
||||
|
||||
/* Right: class detail */
|
||||
.cl-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
|
||||
@@ -47,7 +47,7 @@
|
||||
.cl-placeholder-icon { width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08)); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
|
||||
.cl-placeholder-icon svg { width: 32px; height: 32px; stroke: var(--violet); stroke-width: 1.6; }
|
||||
.cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: #0F172A; }
|
||||
.cl-placeholder-sub { font-size: 0.82rem; color: #8898AA; max-width: 220px; line-height: 1.6; }
|
||||
.cl-placeholder-sub { font-size: 0.82rem; color: var(--text-3); max-width: 220px; line-height: 1.6; }
|
||||
.cl-detail-wrap { padding: 28px 32px 60px; flex: 1; }
|
||||
|
||||
.btn-primary { padding: 10px 24px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: transform var(--tr); }
|
||||
@@ -392,7 +392,7 @@
|
||||
.works-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
|
||||
.works-chip {
|
||||
padding: 4px 14px; border-radius: 99px; border: 1.5px solid rgba(15,23,42,0.1);
|
||||
background: #fff; color: #8898AA;
|
||||
background: #fff; color: var(--text-3);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
|
||||
cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
@@ -420,10 +420,10 @@
|
||||
.work-body { flex: 1; min-width: 0; }
|
||||
.work-student { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
|
||||
.work-assign { font-size: 0.76rem; color: var(--violet); font-weight: 600; margin-bottom: 3px; }
|
||||
.work-file { font-size: 0.74rem; color: #8898AA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.work-file { font-size: 0.74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.work-msg { font-size: 0.76rem; color: #3D4F6B; margin-top: 5px; line-height: 1.4; font-style: italic; }
|
||||
.work-note { font-size: 0.74rem; color: #059652; margin-top: 4px; font-style: italic; }
|
||||
.work-meta { font-size: 0.70rem; color: #8898AA; white-space: nowrap; flex-shrink: 0; text-align: right; }
|
||||
.work-meta { font-size: 0.70rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; text-align: right; }
|
||||
.work-status {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 2px 9px; border-radius: 99px; font-size: 0.70rem; font-weight: 700;
|
||||
@@ -2359,7 +2359,7 @@
|
||||
|
||||
let html = `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px">
|
||||
<div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A">
|
||||
Курсы класса <span style="color:#8898AA;font-weight:600">(${(courses||[]).length})</span>
|
||||
Курсы класса <span style="color:var(--text-3);font-weight:600">(${(courses||[]).length})</span>
|
||||
</div>
|
||||
${available.length ? `<button class="btn-ghost" onclick="openAssignCourseModal()" style="font-size:0.8rem">
|
||||
<i data-lucide="plus" style="width:13px;height:13px;vertical-align:-2px"></i> Добавить курс
|
||||
@@ -2367,7 +2367,7 @@
|
||||
</div>`;
|
||||
|
||||
if (!(courses||[]).length) {
|
||||
html += `<div style="text-align:center;padding:40px;color:#8898AA;font-size:0.85rem;background:#fff;border-radius:16px;border:1.5px dashed rgba(155,93,229,0.15)">
|
||||
html += `<div style="text-align:center;padding:40px;color:var(--text-3);font-size:0.85rem;background:#fff;border-radius:16px;border:1.5px dashed rgba(155,93,229,0.15)">
|
||||
Нет назначенных курсов. Нажмите «Добавить курс», чтобы назначить курс классу.
|
||||
</div>`;
|
||||
} else {
|
||||
@@ -2380,7 +2380,7 @@
|
||||
<span style="font-size:1.6rem">${c.coverEmoji || LS.icon('book-open',20)}</span>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-size:0.9rem;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
|
||||
<div style="font-size:0.74rem;color:#8898AA;margin-top:2px">${esc(SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '')} · ${c.lessonCount} уроков</div>
|
||||
<div style="font-size:0.74rem;color:var(--text-3);margin-top:2px">${esc(SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '')} · ${c.lessonCount} уроков</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
|
||||
<div style="width:80px;height:5px;border-radius:99px;background:rgba(15,23,42,0.07)">
|
||||
@@ -2438,7 +2438,7 @@
|
||||
<div style="font-family:'Unbounded',sans-serif;font-size:0.92rem;font-weight:800;margin-bottom:20px">Назначить курс классу</div>
|
||||
<div id="assign-course-sel-wrap"></div>
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:4px">
|
||||
<button id="assign-cancel-btn" style="padding:10px 22px;border:1.5px solid rgba(15,23,42,0.15);border-radius:999px;background:transparent;font-family:Manrope,sans-serif;font-size:0.88rem;font-weight:600;color:#8898AA;cursor:pointer">Отмена</button>
|
||||
<button id="assign-cancel-btn" style="padding:10px 22px;border:1.5px solid rgba(15,23,42,0.15);border-radius:999px;background:transparent;font-family:Manrope,sans-serif;font-size:0.88rem;font-weight:600;color:var(--text-3);cursor:pointer">Отмена</button>
|
||||
<button id="assign-confirm-btn" style="padding:10px 28px;border:none;border-radius:999px;background:var(--violet);color:#fff;font-family:Manrope,sans-serif;font-size:0.88rem;font-weight:700;cursor:pointer">Назначить</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Reference in New Issue
Block a user