Masthead: a setting to show the breadcrumb only on hover, collapsed to a thin line otherwise #832

New issue

Closed

opened 2026-10-10 15:50:06 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 15:50:06 +00:00

Owner

Depends on #831. A second setting: the breadcrumb is collapsed to a line a few pixels high and expands, with an animation, while the pointer is over it.

What exists today

Nothing of the kind. The conventions it has to fit:

Motion is wrapped in @media (prefers-reduced-motion: no-preference) (assets/css/app.css:823, :1601), with a global kill switch for reduce (:2272-2280); scripts read lessMotion (static/js/app.js:765).
Postulo's tooltips show on hover after 300 ms or at once on focus, close on Escape and stay while the pointer moves onto them (SC 1.4.13, app.js:4697-4800).
--header-height is measured with a ResizeObserver and drives scroll-padding-top and the sticky sidebars.

What would change

A Profile boolean beside the breadcrumb's, shown only when the breadcrumb is on.
CSS that collapses the breadcrumb and expands it on :hover and :focus-within, with the collapsed links out of the tab order (inert or visibility: hidden), and Escape collapsing it again.

Decisions

Touch screens have no hover, and a few-pixel line is not a 24×24 target (SC 2.5.8). Recommended: on a coarse pointer the line is a 24-pixel-high handle that opens it on tap, or the setting is simply ignored there.
Layout. Animating the header's own height would re-measure --header-height every frame and move the sticky sidebars and the scroll padding. Recommended: the expanded breadcrumb is drawn as an overlay below the line (out of the header's flow), so the reserved height stays the line's.
Forced colours. The line needs a real border, not a background, to be seen under forced-colors: active.
Reduced motion. With reduce the breadcrumb opens and closes without the transition (the global switch already does this; the new rule goes under no-preference like the others).

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

Depends on #831. A second setting: the breadcrumb is collapsed to a line a few pixels high and expands, with an animation, while the pointer is over it. ## What exists today Nothing of the kind. The conventions it has to fit: - Motion is wrapped in `@media (prefers-reduced-motion: no-preference)` (`assets/css/app.css:823`, `:1601`), with a global kill switch for `reduce` (`:2272-2280`); scripts read `lessMotion` (`static/js/app.js:765`). - Postulo's tooltips show on hover after 300 ms **or at once on focus**, close on Escape and stay while the pointer moves onto them (SC 1.4.13, `app.js:4697-4800`). - `--header-height` is measured with a ResizeObserver and drives `scroll-padding-top` and the sticky sidebars. ## What would change - A `Profile` boolean beside the breadcrumb's, shown only when the breadcrumb is on. - CSS that collapses the breadcrumb and expands it on `:hover` **and** `:focus-within`, with the collapsed links out of the tab order (`inert` or `visibility: hidden`), and Escape collapsing it again. ## Decisions - **Touch screens have no hover**, and a few-pixel line is not a 24×24 target (SC 2.5.8). Recommended: on a coarse pointer the line is a 24-pixel-high handle that opens it on tap, or the setting is simply ignored there. - **Layout.** Animating the header's own height would re-measure `--header-height` every frame and move the sticky sidebars and the scroll padding. Recommended: the expanded breadcrumb is drawn as an overlay below the line (out of the header's flow), so the reserved height stays the line's. - **Forced colours.** The line needs a real border, not a background, to be seen under `forced-colors: active`. - **Reduced motion.** With `reduce` the breadcrumb opens and closes without the transition (the global switch already does this; the new rule goes under `no-preference` like the others). Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 15:50:06 +00:00

tiagoagueda added the

accessibility

interface

enhancement

labels

2026-10-10 15:50:06 +00:00

tiagoagueda self-assigned this

2026-10-11 10:52:48 +00:00

tiagoagueda commented

2026-10-11 17:43:36 +00:00