Skip to content

fix(a11y): contrast and focus in every theme - #6

Merged
hazeliscoding merged 3 commits into
mainfrom
fix/a11y-contrast
Oct 10, 2026
Merged

hazeliscoding merged 3 commits into
mainfrom
fix/a11y-contrast

Conversation

@hazeliscoding

Copy link
Copy Markdown
Owner

The second v1.1.1 item from the 2026-10-10 accessibility audit.

Focus

  • What changed: a FocusOutline token, an inset accent ring, now shows keyboard focus. It replaces Fluent's square white outline, which sat on top of each control's own focus border.
  • Where: buttons, list rows, tabs, segments, Quick save's tiles, and the prompt's title and description, which used to show focus only as a faint fill.
  • The focused list row wears the hover fill and the ring, so it no longer looks like a picked one.
  • The Switch draws its edge in Text1 instead, since an accent ring would vanish on its accent track.
  • Found while building: Avalonia 12.1.3 draws no box shadow on a border whose thickness differs by side. So the focused row's border goes all round, and tabs carry the ring on an outer border.

Contrast

  • Control edges: a new ControlBorderBrush reaches 3:1 on every background. It's the faintest step from Border3 toward Text3 that does. Text boxes, dropdowns, the library's checkboxes and the editor's empty rating pips use it.
  • Tags and danger buttons reach 4.5:1 on their own tint.
    • Tone text is nudged in eight palettes: Darcula, Gruvbox Dark, Dracula, Nord, Solarized Dark, Prompuff Light (mint), Solarized Light and Catppuccin Latte.
    • Danger buttons sat below 4.5:1 even at rest in Gruvbox Dark, Nord and Dracula.
  • Danger hover shows in the button's edge. It used to be white on solid red, at 2.3–3.4:1.
  • Counts on the active sidebar row use Text2. Text2 is nudged in Darcula, Gruvbox Dark and Solarized Dark to reach 4.5:1 on Bg4.
  • The picked segment (Cards/List, theme, density, release channel, Changes/Full text, MCP client) gets the accent's fill and edge with Text1. It used to sit at 1.01:1 in Prompuff Light.

Tests

  • New ThemeTests case: for all thirteen themes, it reads each pair from the resources that theme actually resolves.
    • Control edges and the accent at 3:1 on Bg0–Bg3 and the inset.
    • Each tone's text on its own tint over Bg1–Bg3.
    • Text2 on Bg4.
    • Text1 on the accent tint.
  • The token check that compares Prompuff's own themes with Tokens.axaml now covers ControlBorderBrush and the mint text too.
  • Looked at: screenshots of the library in cards and list view, the editor, a dialog, Settings and Prompuff Light.

…corners

Buttons wore Fluent's square white outline on top of their own focus border, list rows looked the same focused as picked, and the prompt's title and description showed focus only as a faint fill. Focus is now a FocusOutline token, an inset accent ring, on buttons, rows, tabs, segments, Quick save's tiles and the title and description. The Switch draws its edge in body text instead, since an accent ring would vanish on its accent track. Avalonia draws no box shadow on a border that differs by side, so the focused row's border goes all round, and tabs carry the ring on an outer border.
…tes in every theme

Text boxes, dropdowns and checkboxes use a new ControlBorderBrush, the faintest step from Border3 toward Text3 that reaches 3:1 on every background. Tags and danger buttons now read at 4.5:1 on their own tint, through small nudges to tone text in eight palettes. The counts on the active sidebar row use Text2, nudged in Darcula, Gruvbox Dark and Solarized Dark to reach 4.5:1 on Bg4. A danger button's hover shows in its edge instead of white on red. The picked option in a segmented control gets the accent's fill and edge. Empty rating pips use Border3, or the control edge where they can be clicked. ThemeTests holds all thirteen themes to these pairs.
@hazeliscoding
hazeliscoding merged commit 47452bd into main Oct 10, 2026
3 checks passed
@hazeliscoding
hazeliscoding deleted the fix/a11y-contrast branch October 10, 2026 23:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant