yonlu/yellowjacket
1
1
Fork 0
Code Issues 52 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

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

Browse Source 
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:
logan
2026-08-13 02:09:44 -04:00
parent 2b41c27616
commit 9d420cda0a
5 changed files with 169 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.css
+38 -1
View File
@@ -24,6 +24,36 @@ p {
/* I want to set paragraph margins myself */
}
/* a11y.30. 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 — the link would silently take a row from the shell. It is not
`display: none`: a skip link that is not focusable is not a skip
link. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 0.5em 1em;
background-color: var(--yj-accent);
color: var(--yj-accent-fg);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 0;
}
.skip-link:focus {
left: 0;
}
/* The target of that link, so it can take focus at all. `main` is not
focusable by default, and a fragment link to an unfocusable element
moves the scroll and leaves the tab sequence exactly where it was —
which is the whole thing the link exists to change. */
.main-panel:focus {
outline: none;
}
.top-bar {
grid-area: top-bar;
height: 100%;
@@ -46,7 +76,14 @@ ul {
.title {
font-size: 1.5em;
margin-bottom: 0;
/* Both margins, not just the bottom one. The pair is flex-centred
in a 4em bar and the UA gives an h1 a 0.67em top margin, so the
hgroup measured 67px inside 64 and the subtitle's descenders were
clipped by the bar. That was pre-existing; a11y.29 made it
visible by taking the h3's bottom margin away with it, which
shortened the block and moved the whole pair down into the clip.
This is the state that fix landed in. */
margin-block: 0;
}
.subtitle {
frontend/index.html
+8 -2
View File
@@ -10,10 +10,15 @@
</head>
<body>
<!-- a11y.30. First focusable thing in the document, so a keyboard
user is not walked through the header, the library filter, the
search box and eleven nav items on every navigation. -->
<a class="skip-link" href="#main-content">Skip to content</a>
<header class="top-bar">
<hgroup>
<h1 class="title">YellowJacket</h1>
<h3 class="subtitle">Music how it was meant to bee.</h3>
<!-- a11y.29: a heading level was being used for type size. -->
<p class="subtitle">Music how it was meant to bee.</p>
</hgroup>
<library-filter></library-filter>
<search-bar></search-bar>
@@ -23,7 +28,8 @@
<app-sidebar></app-sidebar>
</div>
<div class="content-area">
<main class="main-panel" data-active-view="tracks" data-testid="main-content" id="main-content">
<main class="main-panel" data-active-view="tracks" data-testid="main-content" id="main-content"
tabindex="-1">
<track-list></track-list>
</main>
<queue-panel id="queue-panel"></queue-panel>
frontend/src/components/track-list/track-list.ts
+7 -1
View File
@@ -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);
}