logan
dc8db159f9
Two issues over one bar, because they are one relayout. #42's own findings say so: giving wa-slider a label grows it 6px to 14px and moves the transport, which is #23's subject, so doing them in sequence means measuring the bar twice and throwing the first set away. The bar was `320px 1fr auto`, so the transport sat in the middle of what the metadata and the queue button did not use — its centre was ~140px right of the window's at every width. The outer two tracks are the same expression now, so the middle is centred by construction. The side width is the metadata's, capped at a quarter of the bar, and the cap was measured as a regression before it was a decision: reserving the full `--now-playing-width` on both sides is perfectly centred and takes the seek bar's track from 257px to 61px at 800px, and to 0 at 200% text. The control you drag was paying for the symmetry. With the cap it is 246, which is parity. It is a `min()` rather than a breakpoint because that variable is user state — the metadata has a drag handle — and tying both sides to it is also what keeps dragging meaningful; a plain `1fr … 1fr` centres just as well and silently makes the handle a no-op. The volume moved out of `audio-player` into the bar because the transport column has to hold the transport and nothing else, and it joins the queue button in one cell rather than a second column, since the centring compares columns. It is a slider by default and a popup by setting. The stored flag names the *popup*, which is this config's polarity rule — the zero value has to be the intended answer, so an existing config.toml gets the new default with no migration. Inline, the icon is the mute toggle and is named after that action rather than the state, because with the slider beside it there is nothing to disclose; the component tier now covers both presentations rather than whichever is default. Three nested rules in this block began with a bare element selector, which Chrome 120 relaxed and the phone's Chrome 113 **silently drops** — including the ellipsis on the bar's own title and artist, which has therefore never truncated on the device. They are `&`-prefixed now. Filed as #154 for the class and for a check. `bottom-bar.spec.ts` pins both halves separately on purpose: an uncapped build is perfectly centred and fails only the seek-bar width, so a spec asserting centring alone would have passed the regression above. Both were verified by mutation. Closes #23 Closes #42
53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import { test, expect } from '../support/fixtures.js';
|
|
|
|
/**
|
|
* Plan 008 phase 3: the two sliders the audit filed as exemplary have
|
|
* no accessible name.
|
|
*
|
|
* `a11y.md` lists `seek-bar` and `volume-control` under **what is
|
|
* already correct** — "`wa-slider` with `aria-label` and a
|
|
* `valueFormatter`, so the seek position is announced as `3:42` rather
|
|
* than `222`". The formatter is real. The name was not: `wa-slider`
|
|
* puts `role="slider"` on a `<div id="slider" aria-labelledby="label">`
|
|
* inside its own shadow root, and that IDREF — pointing at an empty
|
|
* internal `<label>` — outranks whatever `aria-label` the host carries.
|
|
* Measured with `Accessibility.getFullAXTree` on all eleven views:
|
|
* name `""`, every time. `volume-control` had no `aria-label` at all.
|
|
*
|
|
* It is here rather than only in the component tier for the reason
|
|
* `dialog-names.spec.ts` gives: **only Playwright computes an
|
|
* accessible name.** The Vitest tier can assert the internal label
|
|
* carries the text and the IDREF still resolves to it; it cannot say
|
|
* whether anything would announce it. `getByRole('slider', { name })`
|
|
* matched nothing in this app before the fix.
|
|
*/
|
|
test.describe('a control says what it controls', () => {
|
|
test('the seek bar is announced as Seek', async ({ app }) => {
|
|
await expect(
|
|
app.getByRole('slider', { name: 'Seek' }),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('the volume slider is announced as Volume', async ({ app }) => {
|
|
// No disclosure to open first, and no state to put back afterwards:
|
|
// #42 made the slider inline, so it is simply there. The assertion
|
|
// is unchanged — the *name* is the subject here, and the route to
|
|
// the control got shorter rather than different.
|
|
await expect(
|
|
app.getByRole('slider', { name: 'Volume' }),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('naming the slider did not move the transport', async ({ app }) => {
|
|
// `#slider` takes an 8px margin-block-start the moment a label
|
|
// exists, so the fix that gives it a name also grows it from 6px to
|
|
// 14px unless the margin is put back. Nothing else in this app
|
|
// would fail if it did — the bar would simply sit lower.
|
|
const height = await app
|
|
.getByRole('slider', { name: 'Seek' })
|
|
.evaluate((el) => el.getBoundingClientRect().height);
|
|
|
|
expect(height).toBeLessThan(10);
|
|
});
|
|
});
|