Web UI: navigation, Juniper-derived design system, accessibility floor

One shared stylesheet (static/app.css) replaces the two ad-hoc style
blocks, with tokens drawn from the mascot drawing: sky background,
cream game-board cards inside confident outlines with flat offset
shadows, hair-purple for brand and actions, shirt-green for go,
bow-tie orange for danger, pipe-fitting gold for trim, jeans navy for
chrome — and the rainbow game path as a stripe under the header, the
one loud element. Accent colors split into object and *-ink variants
so text on light surfaces holds AA contrast.

Navigation: both pages share a header with brand-home link, a Primary
nav with aria-current, and tally counts that link to the lists they
count (dashboard tallies deep-link into the review catalog; review
tallies jump to their sections). Accessibility: skip link, landmark
nav, polite live region for stage activity, status role on banners,
the dropzone is a real button, candidate rows are focusable and
activate with Enter/Space, focus-visible ring throughout, reduced
motion respected.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-02 17:21:14 -04:00
parent 6ecdd43ed2
commit d3cf0c6151
6 changed files with 432 additions and 367 deletions
+29
View File
@@ -185,3 +185,32 @@ def test_dashboard_and_review_pages_serve(tmp_path):
web = _app(_cfg(tmp_path))
assert "Pipeline" in web.get("/").text
assert "bggpipe" in web.get("/review").text
# -- design system + navigation -----------------------------------------
def test_stylesheet_is_served_and_linked_by_both_pages(tmp_path):
web = _app(_cfg(tmp_path))
css = web.get("/static/app.css")
assert css.status_code == 200
assert css.headers["content-type"].startswith("text/css")
assert "--accent" in css.text # the token layer, not an empty file
for path in ("/", "/review"):
assert 'href="/static/app.css"' in web.get(path).text
def test_both_pages_carry_navigation_and_skip_link(tmp_path):
web = _app(_cfg(tmp_path))
for path, current in (("/", 'href="/"'), ("/review", 'href="/review"')):
html = web.get(path).text
assert 'nav aria-label="Primary"' in html
assert f'<a {current} aria-current="page"' in html.replace("\n", " ") or (
current in html and 'aria-current="page"' in html
)
assert 'class="skip"' in html
def test_activity_region_announces_politely(tmp_path):
html = _app(_cfg(tmp_path)).get("/").text
assert 'aria-live="polite"' in html