fix(a11y): add a skip link, demote the subtitle, and size the sort arrow

a11y.30: `<main id="main-content">` existed and nothing linked to it,
so a keyboard user walked the library filter, the search box, the job
indicator and eleven nav items before reaching content, on every
navigation. Two things in it are load-bearing and only checkable
against the running document: the link is out of flow in *both* states,
because `body` is a grid with named areas and an in-flow extra child is
auto-placed into one of them; and `<main>` needs tabindex="-1", or the
fragment link moves the scroll, leaves the tab sequence where it was,
and looks like it worked.

a11y.29: `<h1>` followed by `<h3>` for type size. An `hgroup` takes one
heading plus paragraphs, so a `<p>` is also what it was meant to hold.

a11y.34: the sort arrow was 10px, below the type scale's own floor,
with a comment acknowledging it. Half of that finding was closed by
Phase 1 — the direction is announced now, via aria-sort — and the other
half is one declaration.

And the state that landed in: the hgroup measured 67px inside a 64px
bar, so dropping the h3's bottom margin shortened the block, moved the
flex-centred pair down, and clipped the subtitle's descenders. The
overflow was pre-existing; `margin-block: 0` on the title is the fix,
pinned by a new layout-overflow case.
This commit is contained in:
2026-08-13 02:09:44 -04:00
parent 2b41c27616
commit 9d420cda0a
5 changed files with 169 additions and 4 deletions
@@ -943,7 +943,13 @@ export class TrackList
}
.sort-arrow {
font-size: 10px; /* intentionally sub-token: tiny sort indicator */
/* a11y.34. Was 10px, below the type scale's own floor, with a
comment acknowledging it. The finding's stated harm — "the sort
direction is a 10px glyph or nothing" — is half closed already:
Phase 1 gave these cells an aria-sort, so it is announced. What
is left is a sighted user reading it, and nothing in the header
needs it to be smaller than the smallest text in the app. */
font-size: var(--yj-text-xs, 11px);
flex-shrink: 0;
color: var(--yj-accent-text, #ffd43b);
}