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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user