logan
a2ff0aed4c
It looked identical in both states, so the only way to tell what pressing it would do was to look at the other side of the window and infer it -- and for anyone not looking there was nothing to infer from: no aria-expanded, no aria-controls, no drawn state. The state is reflected *from the panel* rather than kept beside the click. This button is not the only thing that opens the queue -- now-playing-view sets the same attribute, because it hides the bar the button lives in -- so a flag maintained by the click handler would be right until something else opened the panel and then quietly wrong. The panel's `open` attribute stays the one fact; a MutationObserver reflects it. Refs #26
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { test, expect } from '../support/fixtures.js';
|
|
|
|
/**
|
|
* The queue button says whether the queue is open.
|
|
*
|
|
* It used to look identical in both states, so the only way to tell
|
|
* what pressing it would do was to look at the other side of the window
|
|
* and infer it — and for anyone not looking at all there was nothing to
|
|
* infer from: no `aria-expanded`, no `aria-controls`, no pressed state.
|
|
*
|
|
* The state is reflected *from the panel*, not kept beside the click,
|
|
* because the button is not the only thing that opens the queue —
|
|
* `now-playing-view` sets the same attribute, since it hides the bar
|
|
* this button lives in. A flag maintained by the click handler would be
|
|
* right until something else opened the panel and then quietly wrong,
|
|
* which is the second test here.
|
|
*/
|
|
test.describe('the queue toggle', () => {
|
|
test('reports open and closed, and names what it controls', async ({
|
|
app,
|
|
}) => {
|
|
const toggle = app.locator('#queue-button');
|
|
|
|
await expect(toggle).toHaveAttribute('aria-controls', 'queue-panel');
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
|
|
|
await toggle.click();
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
|
|
|
|
// The state is not only in the accessibility tree: a control that
|
|
// announces a state it does not draw is half a fix.
|
|
//
|
|
// Background rather than colour, because the pointer is still on
|
|
// the button after the click and `:hover` paints it the same accent
|
|
// the open state does -- so a colour comparison here passes on the
|
|
// broken build and proves nothing.
|
|
const [open, closed] = await toggle.evaluate((el) => {
|
|
const now = getComputedStyle(el).backgroundColor;
|
|
|
|
el.setAttribute('aria-expanded', 'false');
|
|
const shut = getComputedStyle(el).backgroundColor;
|
|
|
|
el.setAttribute('aria-expanded', 'true');
|
|
|
|
return [now, shut];
|
|
});
|
|
|
|
expect(open).not.toBe(closed);
|
|
|
|
await toggle.click();
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
test('follows the panel when something else opens it', async ({ app }) => {
|
|
const toggle = app.locator('#queue-button');
|
|
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
|
|
|
// Exactly what `now-playing-view`'s queue button does.
|
|
await app.evaluate(() =>
|
|
document.getElementById('queue-panel')?.setAttribute('open', ''),
|
|
);
|
|
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
|
|
});
|
|
});
|