Accessibility and narrow screens: focus rings, a skip link, named landmarks and aria-current, scrolling tab bars and tables, and WCAG AA text contrast in both themes checked by a test 756fe44a0f4d

//! Text contrast (hub spec §6.13): every text colour of each theme meets

//! WCAG AA (4.5:1) on every surface it is drawn on, and text never uses

//! `--dim`, which is for rules and decoration.

use std::collections::HashMap;

fn css() -> String {

    std::fs::read_to_string(concat!(env!("CARGO_MANIFEST_DIR"), "/../../templates/style.css")).unwrap()

}

/// `--name:#rrggbb` pairs of the block that starts with `selector`.

fn theme(css: &str, selector: &str) -> HashMap<String, String> {

    let start = css.find(selector).unwrap_or_else(|| panic!("{selector} missing"));

    let body = &css[start..start + css[start..].find('}').unwrap()];

    let mut out = HashMap::new();

    for part in body.split("--").skip(1) {

        let Some((name, rest)) = part.split_once(':') else { continue };

        let value = rest.trim_start();

        let valid = !name.is_empty() && name.chars().all(|c| c.is_ascii_alphanumeric() || c == '-');

        if valid && value.len() >= 7 && value.starts_with('#') && value[1..7].chars().all(|c| c.is_ascii_hexdigit()) {

            out.insert(name.to_string(), value[..7].to_lowercase());

        }

    }

    out

}

fn luminance(hex: &str) -> f64 {

    let c = |i: usize| {

        let x = u8::from_str_radix(&hex[i..i + 2], 16).unwrap() as f64 / 255.0;

        if x <= 0.03928 {

            x / 12.92

        } else {

            ((x + 0.055) / 1.055).powf(2.4)

        }

    };

    0.2126 * c(1) + 0.7152 * c(3) + 0.0722 * c(5)

}

fn ratio(a: &str, b: &str) -> f64 {

    let (x, y) = (luminance(a), luminance(b));

    (x.max(y) + 0.05) / (x.min(y) + 0.05)

}

#[test]

fn text_meets_aa_in_both_themes() {

    let css = css();

    let mut failures = Vec::new();

    for (name, sel) in [("dark", ":root {"), ("light", ":root[data-theme=\"light\"] {")] {

        let t = theme(&css, sel);

        let mut text: Vec<&str> = vec!["ink", "mute", "acc", "ok", "bad", "warn"];

        text.extend(t.keys().filter(|k| k.starts_with("sy-")).map(String::as_str));

        for fg in text {

            for bg in ["bg", "panel", "soft"] {

                let r = ratio(&t[fg], &t[bg]);

                if r < 4.5 {

                    failures.push(format!("{name}: --{fg} on --{bg} is {r:.2}:1"));

                }

            }

        }

        for (fg, bg) in [("band-ink", "band"), ("add-ink", "add"), ("del-ink", "del"), ("now-ink", "now")] {

            let r = ratio(&t[fg], &t[bg]);

            if r < 4.5 {

                failures.push(format!("{name}: --{fg} on --{bg} is {r:.2}:1"));

            }

        }

    }

    assert!(failures.is_empty(), "below WCAG AA:\n{}", failures.join("\n"));

}

#[test]

fn text_does_not_use_dim() {

    let css = css();

    let offenders: Vec<&str> = css.lines().filter(|l| l.contains("color: var(--dim)") && !l.contains("border")).collect();

    assert!(offenders.is_empty(), "--dim is too faint for text:\n{}", offenders.join("\n"));

}

    // Landmarks, skip link, current tab (hub spec §6.13).

    assert!(o.contains("<a class=\"skip\" href=\"#main\">") && o.contains("<main id=\"main\""));

    assert!(o.contains("aria-label=\"Site\"") && o.contains("aria-label=\"Repository\"") && o.contains("aria-label=\"Account\""));

    assert!(o.contains("class=\"on\" aria-current=\"page\">Code</a>"), "the current tab is announced");

    let here = f.split("class=\"here\" aria-current=\"page\">").nth(1).unwrap_or("");

`/` focuses search, `g c` / `g p` / `g i` jump to Code, Proposals, Issues, `y` on a tree or file page switches to its permalink, `?` shows the sheet. Every interactive element is reachable by keyboard and shows a visible focus ring; a "Skip to content" link comes first; the header, site band, repository and settings tabs are named navigation landmarks, and the current tab carries `aria-current`. Colour is never the only carrier of meaning (glyphs accompany every status colour). Text meets WCAG AA (4.5:1) on every surface in both themes, checked by a test over the theme variables; `--dim` is for rules and decoration, never text. Under 760 pixels the tab bars and wide tables scroll sideways instead of breaking the layout, sectioned pages stack their section list above the content, and the header search hides (the `/` key and the search page remain).

<a class="skip" href="#main">Skip to content</a>

  <nav aria-label="Account">

<nav class="band" aria-label="Site">

</nav>

<main id="main" tabindex="-1"{% block mainclass %}{% endblock %}>

<nav class="tabs" aria-label="Repository">

    <a href="{{ repo.url }}"{% if tab == "code" %} class="on" aria-current="page"{% endif %}>Code</a>

    <a href="{{ repo.url }}/changes/{{ repo.default_bookmark }}"{% if tab == "changes" %} class="on" aria-current="page"{% endif %}>Changes</a>

    <a href="{{ repo.url }}/proposals"{% if tab == "proposals" %} class="on" aria-current="page"{% endif %}>Proposals{% if repo.open_proposals > 0 %} <span class="count-chip">{{ repo.open_proposals }}</span>{% endif %}</a>

    <a href="{{ repo.url }}/issues"{% if tab == "issues" %} class="on" aria-current="page"{% endif %}>Issues{% if repo.open_issues > 0 %} <span class="count-chip">{{ repo.open_issues }}</span>{% endif %}</a>

    <a href="{{ repo.url }}/flow"{% if tab == "flow" %} class="on" aria-current="page"{% endif %}>Flow</a>

    <a href="{{ repo.url }}/bookmarks"{% if tab == "bookmarks" %} class="on" aria-current="page"{% endif %}>Bookmarks</a>

    <a href="{{ repo.url }}/releases"{% if tab == "releases" %} class="on" aria-current="page"{% endif %}>Releases</a>

    <a href="{{ repo.url }}/tags"{% if tab == "tags" %} class="on" aria-current="page"{% endif %}>Tags</a>

    <a href="{{ repo.url }}/conflicts"{% if tab == "conflicts" %} class="on" aria-current="page"{% endif %}>Conflicts</a>

    <a href="{{ repo.url }}/trust"{% if tab == "trust" %} class="on" aria-current="page"{% endif %}>Trust</a>

    <a href="{{ repo.url }}/pushes"{% if tab == "pushes" %} class="on" aria-current="page"{% endif %}>Pushes</a>

    {% if repo.can_maintain() %}<a href="{{ repo.url }}/settings"{% if tab == "settings" %} class="on" aria-current="page"{% endif %}>Settings</a>{% endif %}

</nav>

<nav class="tabs" aria-label="Settings"><div class="tabs-in">

  <a href="/settings"{% if on == "profile" %} class="on" aria-current="page"{% endif %}>Profile</a>

  <a href="/settings/security"{% if on == "security" %} class="on" aria-current="page"{% endif %}>Security</a>

  <a href="/settings/keys"{% if on == "keys" %} class="on" aria-current="page"{% endif %}>Keys</a>

  <a href="/settings/tokens"{% if on == "tokens" %} class="on" aria-current="page"{% endif %}>Tokens</a>

</div></nav>

  --sy-kw:#7fb4ff; --sy-str:#8ff0d8; --sy-num:#9fd3ff; --sy-cmt:#7a86a4; --sy-fn:#00e0f0; --sy-ty:#c6a0ff; --sy-var:#e6ecf7; --sy-const:#b48cff;

  --bg:#f4f7fc; --panel:#ffffff; --soft:#e9eef8; --ink:#1b2333; --mute:#5f6a81; --line:#d6dded; --dim:#b3bccf;

  --acc:#0064e0; --acc-2:#00b8d4; --band:#0b3f9e; --band-ink:#ffffff; --band-acc:#9ff3ff; --band-line:rgba(255,255,255,.25); --now:#0064e0; --now-ink:#ffffff;

  --ok:#1a7850; --bad:#c62d47; --warn:#6b3fd1;

  --sy-kw:#0b4fc9; --sy-str:#1a7850; --sy-num:#1e63b8; --sy-cmt:#606b81; --sy-fn:#007394; --sy-ty:#7a3fd1; --sy-var:#1b2333; --sy-const:#6b3fd1;

.dim { color: var(--mute); }

.sig-unsigned { color: var(--mute); }

table.code td.n { width: 1%; min-width: 3em; text-align: right; color: var(--mute); user-select: none; cursor: pointer; padding-right: 12px; }

details.linecomment summary { list-style: none; cursor: pointer; color: var(--mute); font-size: 12px; padding: 0 4px; }

.file-side .glyph { color: var(--mute); font-size: 10px; }

table.code td.blame .before { color: var(--mute); margin-left: 4px; }

/* Accessibility and narrow screens (hub spec §6.13). */

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.band a:focus-visible, .tabs a:focus-visible { outline-offset: -2px; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--acc); color: var(--bg); font-weight: 600; }

.skip:focus { top: 8px; }

main:focus { outline: none; }

@media (max-width: 760px) {

  .tabs-in { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

  .tabs-in > * { flex-shrink: 0; }

  .band { overflow-x: auto; white-space: nowrap; }

  main table.list, main table.flow-runs { display: block; overflow-x: auto; }

  .sectioned { grid-template-columns: 1fr; }

  .section-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }

  header .find { display: none; }

}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }