Put the menu drag handle next to the summary instead of inside it
A button inside a summary is an interactive element in an interactive element; screen readers announce it unreliably. The handle keeps its look and its mouse, touch and arrow key behaviour. Also corrects the anchor hints and waits for the menu error in the admin check. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
24c1d9c871
commit
5d55a65c22
7 files changed
+43
-11
No files matched your search
@@ -143,7 +143,7 @@ try {
|
||||
await page.getByRole('button', { name: 'Link hinzufügen', exact: true }).click();
|
||||
assert.equal((await menuSave()).status(), 422);
|
||||
assert.equal(await entries.last().locator('[data-key="url"]').inputValue(), 'javascript:alert(1)');
|
||||
assert.equal(await page.locator('#menu-error').isVisible(), true);
|
||||
await page.locator('#menu-error').waitFor({ state: 'visible' });
|
||||
await entries.last().locator('summary').click();
|
||||
await entries.last().getByLabel('Adresse', { exact: true }).fill('/#kontakt');
|
||||
assert.equal((await menuSave()).status(), 200);
|
||||
@@ -155,7 +155,7 @@ try {
|
||||
await page.getByLabel('Name des Menüs').fill('QA lokaler Stand');
|
||||
assert.equal((await menuSave()).status(), 409);
|
||||
assert.equal(await page.getByLabel('Name des Menüs').inputValue(), 'QA lokaler Stand');
|
||||
assert.equal(await page.locator('#menu-error').isVisible(), true);
|
||||
await page.locator('#menu-error').waitFor({ state: 'visible' });
|
||||
checks.push({ name: 'menu search by keyboard, add/nest/remove/undo/save, invalid URL and conflict retain input', passed: true });
|
||||
|
||||
await page.goto(origin + '/admin/forms');
|
||||
|
||||
@@ -1189,6 +1189,8 @@ try {
|
||||
await page.locator('dialog.page-dialog [role="option"]').first().click();
|
||||
await page.locator('dialog.page-dialog').waitFor({ state: 'detached' });
|
||||
assert.match(await page.locator('#link-url').inputValue(), /^\/[a-z0-9\-/]*$/);
|
||||
await page.locator('#link-label').fill('Eigener Prüflink');
|
||||
await page.locator('#menu-add-url').click();
|
||||
await page.locator('#menu-search').focus();
|
||||
await page.locator('#menu-search-results [role="option"]').first().click();
|
||||
await page.locator('#menu-add-page').click();
|
||||
@@ -1196,11 +1198,21 @@ try {
|
||||
const sprungziel = neuerEintrag.getByLabel('Sprungziel', { exact: true });
|
||||
assert.equal(await sprungziel.evaluate(node => node.tagName), 'SELECT', 'the anchor is a choice');
|
||||
assert.equal(await sprungziel.locator('option').first().textContent(), 'Seitenanfang');
|
||||
// Nur die neuen Felder: die Zusammenfassung der Menüeinträge trägt seit jeher einen Ziehknopf
|
||||
// (nested-interactive), das ist eine eigene, bekannte Baustelle.
|
||||
// Die ganze Seite: seit der Ziehknopf neben der Zusammenfassung steht, gibt es keinen Knopf
|
||||
// mehr in einem Knopf.
|
||||
await neuerEintrag.locator('summary').click();
|
||||
const menuAxe = await new AxeBuilder({ page }).include('#menu-items .menu-entry:last-child .menu-entry-fields').include('.menu-add').withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze();
|
||||
assert.deepEqual(menuAxe.violations.map(v => v.id), [], 'anchor choice and link field');
|
||||
await axe('menu editor');
|
||||
await page.screenshot({ path: 'reports/editor/menu-editor.png' });
|
||||
assert.equal(await neuerEintrag.locator('summary [data-menu-drag]').count(), 0, 'no button inside the summary');
|
||||
// Ziehknopf per Tastatur: Pfeil nach oben verschiebt den Eintrag.
|
||||
const eintraege = page.locator('#menu-items .menu-entry');
|
||||
const anzahl = await eintraege.count();
|
||||
assert.ok(anzahl >= 2);
|
||||
const titel = await neuerEintrag.locator('.menu-entry-title').textContent();
|
||||
await eintraege.nth(anzahl - 1).locator('[data-menu-drag]').focus();
|
||||
await page.keyboard.press('ArrowUp');
|
||||
assert.equal(await eintraege.nth(anzahl - 2).locator('.menu-entry-title').textContent(), titel, 'the entry moved up');
|
||||
assert.equal(await eintraege.nth(anzahl - 2).locator('[data-menu-drag]').evaluate(node => node === document.activeElement), true, 'the handle keeps focus');
|
||||
checks.push({ name: 'menu: page search for own links, anchors as a choice', passed: true });
|
||||
// Beitrag: vorhandene Kategorien stehen zum Anklicken am Feld.
|
||||
await page.goto(origin + '/admin/posts');
|
||||
|
||||
Reference in new issue
Block a user