Two environments nobody has looked at: Windows High Contrast beyond the fields, and print #277

New issue

Closed

opened 2026-09-18 20:34:55 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-18 20:34:55 +00:00

Owner

From an accessibility read of the stylesheet on 2026-09-18. Both themes are checked by axe on every page; these two rendering modes are not run by anything.

Forced colours: borderless buttons become words, and the funnel bars vanish

#227 gave fields a Highlight outline under forced-colors: active (assets/css/app.css:811-819), and that is the only forced-colours rule. Preflight zeroes every border (border: 0 solid), .btn (app.css:222-226) adds none, so .btn-primary, .btn-danger, .btn-ghost, .menu-item (:600-604), .nav-link (:228), .chip-remove and .col-handle are drawn as bare ButtonText on Canvas: "Save", "Download PDF", "Sign out" and the theme switch look like ordinary words. .btn-secondary survives because it has a border (:269).

progress.funnel-bar (app.css:642-670) has appearance: none, no border, and a track and value that are background colours only, so forced colours repaint both to Canvas; the funnel widget (widgets/funnel.html:19-20) and the report's cadence bars (applications/report.html:174-175) keep their numbers and lose the chart.

Fix: one block:

@media (forced-colors: active) {
  .btn, .menu-item, .nav-link, .chip-remove { border: 1px solid ButtonText; }
  progress.funnel-bar { border: 1px solid CanvasText; }
  progress.funnel-bar::-webkit-progress-value,
  progress.funnel-bar::-moz-progress-bar { forced-color-adjust: none; background: Highlight; }
}

Check: page.emulate_media(forced_colors="active") on one list page and the report, asserting a button's computed border and a bar's value colour.

Print: no stylesheet at all

There is no @media print and no print: utility anywhere in assets/css/app.css or the templates. base.html:2 stamps data-theme="dark" on the root for a dark profile and color-scheme follows it, browsers drop backgrounds when printing, so an application, a company page, the calendar or an interview list printed from a dark profile comes out as near-white text on white. .scroll-x (app.css:413-415) clips a table or the board to the on-screen strip. Only Insights has a print route of its own (applications/report.html:33-36).

Fix: an @media print block that resets the palette to black on white for :root[data-theme="dark"], sets .scroll-x { overflow: visible }, and hides the header, the skip link, the footer and .page-alert. Check: page.emulate_media(media="print") on a dark profile: body colour dark on light, a table's box no wider than its content.

From an accessibility read of the stylesheet on 2026-09-18. Both themes are checked by axe on every page; these two rendering modes are not run by anything. ## Forced colours: borderless buttons become words, and the funnel bars vanish #227 gave fields a `Highlight` outline under `forced-colors: active` (`assets/css/app.css:811-819`), and that is the only forced-colours rule. Preflight zeroes every border (`border: 0 solid`), `.btn` (`app.css:222-226`) adds none, so `.btn-primary`, `.btn-danger`, `.btn-ghost`, `.menu-item` (`:600-604`), `.nav-link` (`:228`), `.chip-remove` and `.col-handle` are drawn as bare `ButtonText` on `Canvas`: "Save", "Download PDF", "Sign out" and the theme switch look like ordinary words. `.btn-secondary` survives because it has a border (`:269`). `progress.funnel-bar` (`app.css:642-670`) has `appearance: none`, no border, and a track and value that are background colours only, so forced colours repaint both to `Canvas`; the funnel widget (`widgets/funnel.html:19-20`) and the report's cadence bars (`applications/report.html:174-175`) keep their numbers and lose the chart. **Fix:** one block: ```css @media (forced-colors: active) { .btn, .menu-item, .nav-link, .chip-remove { border: 1px solid ButtonText; } progress.funnel-bar { border: 1px solid CanvasText; } progress.funnel-bar::-webkit-progress-value, progress.funnel-bar::-moz-progress-bar { forced-color-adjust: none; background: Highlight; } } ``` **Check:** `page.emulate_media(forced_colors="active")` on one list page and the report, asserting a button's computed border and a bar's value colour. ## Print: no stylesheet at all There is no `@media print` and no `print:` utility anywhere in `assets/css/app.css` or the templates. `base.html:2` stamps `data-theme="dark"` on the root for a dark profile and `color-scheme` follows it, browsers drop backgrounds when printing, so an application, a company page, the calendar or an interview list printed from a dark profile comes out as near-white text on white. `.scroll-x` (`app.css:413-415`) clips a table or the board to the on-screen strip. Only *Insights* has a print route of its own (`applications/report.html:33-36`). **Fix:** an `@media print` block that resets the palette to black on white for `:root[data-theme="dark"]`, sets `.scroll-x { overflow: visible }`, and hides the header, the skip link, the footer and `.page-alert`. **Check:** `page.emulate_media(media="print")` on a dark profile: body colour dark on light, a table's box no wider than its content.

tiagoagueda added this to the 0.5.0 milestone

2026-09-18 20:34:55 +00:00

tiagoagueda added the

accessibility

bug

labels

2026-09-18 20:34:55 +00:00

tiagoagueda referenced this issue from a commit

2026-09-19 00:28:36 +00:00

Draw the buttons and the bars under forced colours, and the page on paper

tiagoagueda closed this issue

2026-09-19 00:28:36 +00:00