/** * Qin_A11yFixes — 共用 CSS 修复层 * * 每一条都由 上的 data-a11y-* 属性守卫，属性由 apply-flags.js * 按后台开关写入。这样一个 CSS 文件就能逐项开关，不必拆成多个静态资源。 * * 只针对 Luma 从 2.3 到 2.4 都没变过的稳定 class。 * 加新规则前先确认选择器在两个版本上都存在。 * * 尽量避免 !important；只有在压过 Luma 自身的 outline:none 等 * 高特异性声明时才使用，并在该行注明原因。 */ /* ── 焦点指示 · WCAG SC 2.4.7 / 2.4.11 ──────────────────────── */ /* * Luma 在多处用 outline:none 抹掉了焦点样式，键盘用户会完全看不到 * 自己在哪。这里统一补回。用 :focus-visible 而非 :focus， * 避免鼠标点击时也出现焦点环。 */ /* * 双色焦点环：内侧 2px 白 + 外侧 2px 蓝。 * * 不要按「这块背景是深色/浅色」去分别指定颜色——六个站的主题背景各不相同， * 猜错就等于没有焦点指示。之前这里给 .navigation 和 .page-footer 硬写了 * 白色描边（按 Luma 默认的深色导航栏），结果在浅灰底导航上完全看不见。 * * 双环任何底色都成立：白环在深底上可见，蓝环在浅底上可见。 * 这也是 WCAG 2.2 SC 2.4.13 推荐的做法。 */ html[data-a11y-focus-visible] a:focus-visible, html[data-a11y-focus-visible] button:focus-visible, html[data-a11y-focus-visible] input:focus-visible, html[data-a11y-focus-visible] select:focus-visible, html[data-a11y-focus-visible] textarea:focus-visible, html[data-a11y-focus-visible] summary:focus-visible, html[data-a11y-focus-visible] [tabindex]:focus-visible { /* !important：需要压过 Luma 的 outline:none */ outline: 2px solid #1b44e8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important; } /* * 主导航是特例，纯 CSS 解决不了。 * * Luma 的主导航是 jQuery UI Menu，用 aria-activedescendant 虚拟焦点： * DOM 焦点自始至终留在外层