PR #37 - forrtproject/flora-explorer

From the second usability review of 21 October 2026. This was an agent-led review using simulated perspectives, not recruited participants. GPT 6.1 Sol implemented the changes; Claude reviewed them. This PR fixes C20, the dark-mode colour pair from C08, and the chart font from C19.

Changes

Focus:
- 3 px focus rings with at least 3:1 contrast, including on the dark top bar;
- paging keeps focus on the paging control, marks the current page with aria-current and names the Previous/Next buttons;
- mobile Browse paging moves focus to the results heading.
Citation originals table: real <button>s inside the headers, aria-sort on the sorted column, sort buttons at least 24×24 px, and named empty headers.
Forced colours: selected chips, the active tab and the citation mini-bars stay distinguishable.
Targets and axe: info icons, glossary terms, sort buttons, footer links, evidence toggles and the close button are at least 24 px. Info icons have a proper role, source links are underlined and named, and low-contrast text is fixed.
Status regions: mobile result counts, Trends counts and analysis chip changes are announced, without duplicate announcements.
Landmarks: a skip link, header, nav and footer landmarks, an h1 per panel, and chart-specific region names. Duplicate button names are made unique.
Reduced motion: prefers-reduced-motion turns off Chart.js animation, CSS transitions and smooth scrolling.
Mobile tooltips: the definition sheet closes on scroll.
C08, dark mode: Successful is now #86efac (was #4ade80) and Failed #ed7465 (was #f08a7c). The simulated deuteranopia ΔE rises from 6.5 to 24.1, and both colours keep at least 5.7:1 contrast. Badges and citation mini-bars now use the theme tokens.
Chart.js font: Chart.js now uses the site font, Source Sans 3.

Verification

axe-core 4.14 on 7 tabs × 2 themes: 57 → 0 rule violations and 29 → 0 serious affected nodes. The mobile citation dialog has 0 violations.
Four new browser scenarios; full suite passes locally (20/20).
No page overflow at 1280 or 390 px in either theme.

For review

The wider colour-semantics problem (red and purple each carrying several meanings) belongs to the small-groups proposal PR. Screen-reader speech has not been checked with NVDA or VoiceOver.

🤖 Generated with Claude Code

Summary by cubic

Improves dashboard accessibility for keyboard and screen-reader users with clearer focus, navigation, and status updates. It also respects reduced-motion and forced-colors preferences and improves outcome-color contrast in dark mode.

Accessibility

Adds a skip link, named landmarks and chart controls, accessible sort and paging state, and single announcements for result counts and filter changes.
Announces filter changes by group label; state restored from a shared URL stays silent.
Adds the reproduction browse kind, normalizes invalid URL kinds, and names sort buttons with aria-pressed state.
Keeps focus useful after paging and moves it to the results heading on mobile.
Uses theme tokens for outcome colors and the site font for charts, and closes mobile tooltips on scroll.

Verification

Adds browser coverage for keyboard access, announcements, display preferences, and color contrast. The full suite passes locally, and axe reports no violations across seven tabs and both themes.

Summary by CodeRabbit

Accessibility
- Improved keyboard navigation, focus management, skip links, landmarks, headings, labels, live announcements, and pagination status.
- Added clearer accessible names for charts, tables, filters, controls, citations, and data-source links.
- Added visible focus indicators, larger interaction targets, reduced-motion support, and forced-colors support.
Bug Fixes
- Improved mobile pagination scrolling and tooltip behavior.
- Validated browse filters and clarified zero-result, trend, and reproduction labels.
- Preserved focus during table sorting, pagination, and rerendering.
Style
- Updated light and dark chart colors, badge contrast, and theme-aware outcome styling.