Bounty #427: Add keyboard skip link and focus styles

[dekacchi]

/claim #427

Bounty #427

Summary:

• add a site-wide skip-to-content link before the header
• label the primary navigation and expose a focus target on main content
• add visible keyboard focus styles for common interactive elements

Evidence / distinctness:

• This targets global keyboard navigation and accessibility, not the existing MRWK bounty: site UX and functional improvements #427 work around bounty, wallet, ledger, proof, account filters, or links.
• I did not find an open equivalent PR adding a skip link or shared focus-navigation treatment.
• The normal mouse layout is unchanged because the skip link is hidden until focused.

Validation:

• uv run --extra dev python -m pytest tests/test_hub.py tests/test_public_routes.py -q -> 7 passed
• uv run --extra dev python -m pytest -q -> 416 passed
• uv run --extra dev ruff check app tests/test_hub.py -> passed
• uv run --extra dev ruff format --check tests/test_hub.py -> passed
• git diff --check -> passed

Summary by CodeRabbit

• New Features

  • Added skip-to-content link for improved keyboard navigation
  • Enhanced keyboard focus visibility with consistent outline styling across interactive elements

• Tests

  • Added test coverage for accessibility features including skip link presence and focus styling verification

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7948d33f-fe87-4774-bbb1-01742dd9e260

📥 Commits

Reviewing files that changed from the base of the PR and between d8532d4 and ae21596.

📒 Files selected for processing (3)

• app/static/style.css
• app/templates/base.html
• tests/test_hub.py

---

📝 Walkthrough

Walkthrough

The PR adds keyboard navigation accessibility through a skip-to-content link. It introduces skip-link markup and a focus-targeted main element in the HTML template, adds corresponding CSS focus visibility and skip-link styling, and includes tests that verify both the HTML structure and CSS rules are present.

Changes

Keyboard Navigation Skip-Link

Layer / File(s)	Summary
Skip-link and main target markup app/templates/base.html	HTML template adds a "Skip to content" anchor near the top and updates the <main> element with id="content" and tabindex="-1" to serve as the skip-link focus target.
Focus visibility and skip-link CSS app/static/style.css	New CSS rules apply :focus-visible outline styling to interactive elements and add .skip-link styling that hides the link off-screen by default and reveals it on keyboard focus.
Accessibility tests tests/test_hub.py	Updated imports and two new tests: one verifies the home page HTML contains the skip-link and main landmark markup; the other reads the CSS file and asserts the presence of focus and skip-link focus styling rules.

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description includes a summary, evidence of distinctness, and validation test results. However, it does not follow the required template structure with explicit sections for Confusion/bug, bounty capacity, intended files, expected PR size, out of scope, or the test evidence checklist.	Restructure the description to match the template: add explicit sections (Confusion/bug addressed, Bounty capacity checked, Intended files, Expected PR size, Out of scope), and use the test evidence checklist format for validation results.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Bounty #427: Add keyboard skip link and focus styles' is concrete, specific, and directly describes the main changes (skip link and focus styles) in the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Mergework Public Artifact Hygiene	✅ Passed	PR adds keyboard accessibility features (skip link, focus styles) with no investment, price, cash-out, payout, or security claims in code, tests, or description.
Bounty Pr Focus	✅ Passed	Diff matches stated files: CSS adds focus-visible and skip-link; base.html adds skip link and main attributes; tests verify both. Scope appropriately limited to keyboard accessibility.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[xingxi0614-cpu]

Reviewed PR #562 at head ae215964b8ed4624e0fb24623a195ba3eed7f9ea for the public-shell keyboard navigation/accessibility slice.

Code and tests look focused, but I found one evidence/description follow-up before acceptance.

Evidence checked:

• inspected app/templates/base.html, app/static/style.css, and tests/test_hub.py;
• confirmed the template adds a top-of-body skip link pointing to #content;
• confirmed the primary navigation now has aria-label="Primary navigation";
• confirmed <main> exposes id="content" and tabindex="-1" so the skip link has a focusable target;
• confirmed the normal mouse layout is preserved because .skip-link stays translated off-screen until focus;
• confirmed visible focus treatment is added for links, buttons, form controls, summaries, and the main focus target;
• confirmed regression tests cover the skip link, nav label, main focus target, and focus CSS markers.
• confirmed CodeRabbit completed successfully, with the code checks passing, but its description check was inconclusive because the PR body does not follow the bounty template structure.

Follow-up requested:

• Bounty MRWK bounty: site UX and functional improvements #427 asks for concise before/after notes and screenshots for visual layout changes. This PR changes visible keyboard focus behavior and skip-link behavior, but the current PR body has no before/after note or screenshot evidence for the focused skip link/focus outline state.
• Please update the PR description with the expected template sections or at least add before/after notes plus screenshots/GIFs showing the skip link hidden normally and visible on keyboard focus.

Validation run locally:

• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/Scripts/python.exe -m pytest tests/test_hub.py tests/test_public_routes.py -q -> 7 passed
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/Scripts/python.exe -m pytest -q -> 416 passed
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/Scripts/python.exe scripts/docs_smoke.py -> docs smoke ok
• ./.venv/Scripts/python.exe -m ruff check app tests/test_hub.py -> passed
• ./.venv/Scripts/python.exe -m ruff format --check tests/test_hub.py -> 1 file already formatted
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 ./.venv/Scripts/python.exe -m mypy app -> success
• git diff --check origin/main...HEAD -> clean

I do not see a code/test blocker in the reviewed slice; the remaining issue is the missing bounty evidence in the PR description.

[peterxing]

Review for the Bounty #219 review round.

I reviewed PR #562 at head ae215964b8ed4624e0fb24623a195ba3eed7f9ea, focused on the keyboard-navigation accessibility change for Bounty #427.

What I checked:

• app/templates/base.html adds a top-of-body Skip to content link before the header, labels the primary nav, and gives <main> a stable id="content" focus target with tabindex="-1".
• app/static/style.css keeps the skip link off-screen until focus and adds visible :focus-visible outlines for links, buttons, form controls, summaries, and the main focus target.
• tests/test_hub.py covers the rendered shell markers and CSS markers for the skip link and focus treatment.
• Hosted Quality, readiness, docs, and image checks is green on the PR.

Validation run locally on the PR branch:

• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe -m pytest tests\test_hub.py tests\test_public_routes.py -q -> 7 passed
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe -m pytest -q -> 416 passed
• .\.venv\Scripts\python.exe scripts\docs_smoke.py -> docs smoke ok
• .\.venv\Scripts\python.exe -m ruff check app tests\test_hub.py -> all checks passed
• git diff --check origin/main...HEAD -> clean

Result: no code/test blocker found in this slice. The remaining acceptance caveat is evidence quality rather than implementation correctness: because this changes keyboard-visible UI state, maintainers may still want the PR description to include before/after notes or screenshots/GIFs of the focused skip link and focus outline state before awarding Bounty #427.

No secrets, wallet material, payout details, deployment values, private context, private vulnerability details, MRWK price claims, exchange claims, bridge claims, or cash-out claims were used or disclosed.

[Zejia]

Reviewed current head ae215964b8ed4624e0fb24623a195ba3eed7f9ea.

No blocker found. The change is narrow and useful for keyboard users: base.html adds a skip link before the header, labels the primary nav, and makes <main id="content" tabindex="-1"> a real focus target. The CSS hides the skip link until focus and adds visible :focus-visible outlines for common interactive controls plus the main target.

Validation:

• pytest tests/test_hub.py tests/test_public_routes.py -q -> 7 passed
• ruff check tests/test_hub.py -> passed
• ruff format --check tests/test_hub.py -> passed
• git diff --check main...HEAD -> clean

GitHub quality checks are green on this head.

[eliasx45]

Reviewed PR #562 at head ae215964b8ed4624e0fb24623a195ba3eed7f9ea for the Bounty #427 keyboard navigation/accessibility slice.

The implementation itself looks narrow and coherent: app/templates/base.html adds the skip link before the header, labels the primary nav, and makes <main id="content" tabindex="-1"> a valid skip-link target; app/static/style.css keeps the skip link hidden until focus and adds visible :focus-visible outlines; tests/test_hub.py covers the markup and CSS markers.

Blocking acceptance issue:

• Bounty #427 explicitly asks for concise before/after notes and screenshots for visual layout changes. This PR changes keyboard-visible UI state, but the PR body still has no screenshot/GIF evidence or before/after note showing the skip link hidden normally, visible on keyboard focus, and the focus-outline treatment. Multiple prior comments requested the same evidence, and the body has not been updated.
• Because #427 is now closed/filled, the author should either add the required visual evidence to this PR body if maintainers still want to evaluate it under #427, or move/reclaim the work under the active follow-up bounty if that is the intended path.

Validation run locally on this head:

• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe -m pytest tests\test_hub.py tests\test_public_routes.py -q -> 7 passed
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe -m pytest -q -> 416 passed
• .\.venv\Scripts\python.exe -m ruff check app tests\test_hub.py -> all checks passed
• .\.venv\Scripts\python.exe -m ruff format --check tests\test_hub.py -> 1 file already formatted
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe -m mypy app -> success
• PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 .\.venv\Scripts\python.exe scripts\docs_smoke.py -> docs smoke ok
• git diff --check origin/main...HEAD -> clean

No code/test blocker found; requesting changes for the missing bounty-required visual evidence before acceptance.

[ramimbo]

Maintainer cleanup note: holding this for changes. The code slice is focused, but this visible accessibility/UX bounty still needs the requested before/after notes and screenshot or GIF evidence for the skip-link and focus states before maintainer acceptance.