Improve Generate-query modal readability (WCAG AA)¶
Motivation¶
The New Search Generate query from NCBI modal
(SequenceBuilderDialog) had three accessibility/readability defects:
- The unselected strand toggle (
Plus/Minus) was dimmed withopacity: 0.5. Opacity dimming drops the effective text contrast below WCAG AA and conveys the selected state by colour/brightness alone. - The NCBI search-result rows and gene-feature rows used hardcoded
rgba(255,255,255,0.04)backgrounds (andrgba(120,170,255,0.12)for the selected row). These are dark-theme-only: on the light theme's solid-white panels they render as near-invisible rows, losing the card affordance.
User-facing change¶
- The strand toggle now keeps both labels at full, AA-compliant contrast:
the unselected button uses
--text-muted(≈5.4:1 dark / ≈7:1 light) and the selected one is shown with a filled background, focus-coloured border, and bold weight — plusaria-pressedso screen readers get the state, not just a colour cue. - The search-result and feature rows now use the theme-aware
--bg-tertiarysurface, with the selected accession row tinted viacolor-mix(in srgb, var(--accent) 16%, var(--bg-tertiary))and a--border-focusoutline, so the rows are clearly visible in both light and dark themes. Selected rows also exposearia-pressed.
No behaviour change — only styling and ARIA state.
API / IaC diff summary¶
Frontend only: web/src/pages/blastSubmit/SequenceBuilderDialog.tsx. No backend,
no API, no IaC change.
Validation evidence¶
npx eslint src/pages/blastSubmit/SequenceBuilderDialog.tsx— clean.npx vitest run src/pages/blastSubmit/SequenceBuilderDialog.test.ts— 14 passed (pure helpers unaffected).npm run build— succeeds.- Contrast: unselected toggle
--text-mutedon--bg-primary/white meets AA (≥4.5:1) in both themes; previously the 50%-opacity label fell well below AA.