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:
@@ -15,7 +15,7 @@
|
||||
font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
|
||||
color: #0F172A; margin-bottom: 6px;
|
||||
}
|
||||
.page-sub { font-size: 0.82rem; color: #8898AA; margin-bottom: 24px; }
|
||||
.page-sub { font-size: 0.82rem; color: var(--text-3); margin-bottom: 24px; }
|
||||
|
||||
/* ── top bar with class selector ── */
|
||||
.hw-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
|
||||
@@ -28,7 +28,7 @@
|
||||
.hw-sf-btn {
|
||||
padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(15,23,42,0.1);
|
||||
background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem;
|
||||
font-weight: 600; color: #8898AA; cursor: pointer; transition: all .15s;
|
||||
font-weight: 600; color: var(--text-3); cursor: pointer; transition: all .15s;
|
||||
}
|
||||
.hw-sf-btn:hover { border-color: var(--violet); color: var(--violet); }
|
||||
.hw-sf-btn.active { background: rgba(155,93,229,0.08); border-color: var(--violet); color: var(--violet); }
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
.hw-card-body { flex: 1; min-width: 0; }
|
||||
.hw-card-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.hw-card-meta { font-size: 0.75rem; color: #8898AA; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
|
||||
.hw-card-meta { font-size: 0.75rem; color: var(--text-3); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
|
||||
.hw-card-note { font-size: 0.78rem; color: #3D4F6B; background: rgba(15,23,42,0.03); padding: 8px 12px; border-radius: 10px; margin-top: 8px; line-height: 1.5; }
|
||||
.hw-card-note strong { color: #0F172A; }
|
||||
.hw-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
||||
@@ -99,9 +99,9 @@
|
||||
.hw-upload-area:hover, .hw-upload-area.dragover {
|
||||
border-color: var(--violet); background: rgba(155,93,229,0.02);
|
||||
}
|
||||
.hw-upload-icon { color: #8898AA; margin-bottom: 8px; }
|
||||
.hw-upload-icon { color: var(--text-3); margin-bottom: 8px; }
|
||||
.hw-upload-text { font-size: 0.85rem; font-weight: 600; color: #3D4F6B; margin-bottom: 4px; }
|
||||
.hw-upload-hint { font-size: 0.72rem; color: #8898AA; }
|
||||
.hw-upload-hint { font-size: 0.72rem; color: var(--text-3); }
|
||||
|
||||
/* review modal (inline) */
|
||||
.hw-review-panel {
|
||||
@@ -118,7 +118,7 @@
|
||||
.hw-review-panel textarea { min-height: 60px; resize: vertical; }
|
||||
|
||||
/* empty state */
|
||||
.hw-empty { text-align: center; padding: 60px 20px; color: #8898AA; }
|
||||
.hw-empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
|
||||
.hw-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.3; }
|
||||
.hw-empty-text { font-size: 0.88rem; font-weight: 600; }
|
||||
|
||||
@@ -164,13 +164,13 @@
|
||||
accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt" />
|
||||
<div style="display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;align-items:flex-end">
|
||||
<div style="flex:1;min-width:200px">
|
||||
<label style="font-size:.72rem;font-weight:700;color:#8898AA;display:block;margin-bottom:4px">Задание (необязательно)</label>
|
||||
<label style="font-size:.72rem;font-weight:700;color:var(--text-3);display:block;margin-bottom:4px">Задание (необязательно)</label>
|
||||
<select id="hw-assignment-sel" class="hw-class-sel" style="width:100%">
|
||||
<option value="">— Без привязки к заданию —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px">
|
||||
<label style="font-size:.72rem;font-weight:700;color:#8898AA;display:block;margin-bottom:4px">Комментарий</label>
|
||||
<label style="font-size:.72rem;font-weight:700;color:var(--text-3);display:block;margin-bottom:4px">Комментарий</label>
|
||||
<input type="text" id="hw-message" class="hw-class-sel" style="width:100%" placeholder="Опишите работу…" />
|
||||
</div>
|
||||
<button class="hw-btn hw-btn-primary" id="hw-submit-btn" onclick="submitHomework()" disabled>
|
||||
|
||||
Reference in New Issue
Block a user