@luigisbox/luma 0.0.0-stage → 0.2.0

package/a11y/audit.mjs

@@ -0,0 +1,735 @@
+// The flows of `yarn luma a11y`: drives an integration's real widgets in a page
+// (any Playwright page where the integration runs: the command's own browser,
+// or the fake shop of Luma's browser tests) and
+// checks each state:
+//
+//   autocomplete  open, the keyboard selection, no results, closed, focus gone,
+//                 forced colours
+//   search, plp   shown; a filter ticked from the keyboard; the sort menu; phone
+//                 width with the filter drawer; reflow at 320 px; prefers-contrast:
+//                 more; forced colours; reduced motion
+//   recommender   inline: shown, keyboard, reflow, contrast, forced colours
+//
+// axe-core (WCAG 2.0–2.2 A/AA) on Luma's own roots in every state; the host
+// page's own issues separately (informational). Never adds to a cart, a
+// wishlist or a comparison: nothing is clicked or pressed on tiles, and the
+// recommender popup (opened by an add-to-cart click) is not exercised.
+import { ROOTS, runAxe } from './axe.mjs';
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+/** Text that marks a control we must never operate. */
+const UNSAFE = /cart|basket|bag|wish|compare|košík|kosik|porovn|merkliste|warenkorb|vergleich/i;
+
+/** The focused element across shadow roots, as a short description; null on <body>. */
+const ACTIVE = () => {
+  let a = document.activeElement;
+  while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+  if (!a || a === document.body || a === document.documentElement) return null;
+  const cls = typeof a.className === 'string' && a.className.trim() ? `.${a.className.trim().split(/\s+/).slice(0, 3).join('.')}` : '';
+  return `${a.localName}${a.id ? `#${a.id}` : ''}${cls}`;
+};
+
+/**
+ * @param {import('playwright-core').Page} page
+ * @param {{
+ *   goto: (path: string) => Promise<unknown>,
+ *   results: import('./report.mjs').Results,
+ *   paths?: string[],
+ *   query?: string,
+ *   only?: string[],
+ *   log?: (s: string) => void,
+ * }} opts
+ */
+export const audit = async (page, opts) => {
+  const R = opts.results;
+  const log = opts.log ?? (() => {});
+  const query = opts.query || 'a';
+  const only = (w) => !opts.only?.length || opts.only.includes(w);
+  // The autocomplete alone needs one page.
+  const paths = (opts.paths?.length ? opts.paths : ['/']).slice(0, opts.only?.length === 1 && opts.only[0] === 'autocomplete' ? 1 : undefined);
+  page.on('dialog', (d) => d.dismiss().catch(() => {}));
+
+  let path = '';
+  const ctx = (widget, state) => ({ widget, state, page: path });
+  const desktop = () => page.setViewportSize({ width: 1280, height: 800 });
+
+  /** Loads a path; Luma's config once it booted (null if it did not). */
+  const load = async (p) => {
+    path = p;
+    log(`page ${p}`);
+    await desktop();
+    await opts.goto(p);
+    return booted();
+  };
+  const booted = async () => {
+    const cfg = await page
+      .waitForFunction(() => /** @type {any} */ (window).__lbx?.config, null, { timeout: 15000 })
+      .then((h) => h.jsonValue())
+      .catch(() => null);
+    if (!cfg) R.note(`${path}: Luma did not boot (no window.__lbx.config): is the bundle loading, is the integration enabled?`);
+    return cfg;
+  };
+  const healthErrors = async () => {
+    const errs = await page.evaluate(() => /** @type {any} */ (window).__lbx?.health?.errors ?? []).catch(() => []);
+    for (const e of errs.slice(0, 5)) R.note(`${path}: Luma reported an error: ${typeof e === 'string' ? e : JSON.stringify(e).slice(0, 300)}`);
+  };
+  /** The host page's own issues (everything but our roots): informational. */
+  const hostAxe = async () => {
+    const r = await runAxe(page, { exclude: ROOTS }).catch((e) => (R.note(`${path}: axe on the host page failed: ${e.message}`), null));
+    if (r) R.host(r, path);
+  };
+  /** axe on our roots in one state. */
+  const ours = async (c, include, rules = {}) => {
+    const r = await runAxe(page, { include, rules }).catch((e) => (R.note(`${c.page} ${c.widget} ${c.state}: axe failed: ${e.message}`), null));
+    if (r) R.axe(r, c);
+  };
+  const active = () => page.evaluate(ACTIVE).catch(() => null);
+  /** Whether the focused element (across shadow roots) is inside `sel`. */
+  const focusIn = (sel) =>
+    page.evaluate((sel) => {
+      let a = document.activeElement;
+      while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+      if (!a || a === document.body) return false;
+      for (let n = a; n; n = n.parentElement ?? /** @type {any} */ (n.getRootNode()).host ?? null) if (n.matches?.(sel)) return true;
+      return false;
+    }, sel);
+
+  // ---------------------------------------------------------------- autocomplete
+
+  const autocomplete = async (cfg) => {
+    const sel = cfg._global?.inputSelector || 'input[name=q]';
+    // The first visible one: a closed modal's or drawer's input may come first (in a shadow root, or Playwright's order across them).
+    const input = page.locator(sel).filter({ visible: true }).first();
+    if (!(await input.isVisible().catch(() => false))) {
+      // A phone-only or collapsed header: the input of the desktop layout.
+      return R.skip('autocomplete', `the search input ${sel} (_global.inputSelector) is not visible on ${path}`);
+    }
+    const OVERLAY = '[data-lbx="ac-overlay"]';
+    const NAMES = ['role', 'aria-expanded', 'aria-controls', 'aria-activedescendant', 'aria-autocomplete', 'aria-owns', 'aria-haspopup'];
+    const aria = () => input.evaluate((n, names) => Object.fromEntries(names.filter((a) => n.hasAttribute(a)).map((a) => [a, n.getAttribute(a)])), NAMES);
+    const before = await aria();
+    const open = () => page.evaluate((s) => !!document.querySelector(`${s}:popover-open`), OVERLAY).catch(() => false);
+    const options = page.locator(`${OVERLAY} [role=option]`);
+    log('  autocomplete');
+
+    await input.focus();
+    await sleep(100);
+    // Typed as a shopper types; the status region speaks once typing pauses.
+    await input.pressSequentially(query, { delay: 60 });
+    const shown = await options.first().waitFor({ state: 'visible', timeout: 10000 }).then(() => true, () => false);
+    if (!shown) {
+      return R.skip('autocomplete', `no suggestions for "${query}" within 10 s (pass a query the catalog has: --query)`);
+    }
+    let c = ctx('autocomplete', 'open');
+    const a1 = await aria();
+    const problems = [];
+    if (a1.role !== 'combobox') problems.push(`role="${a1.role ?? ''}" (expected combobox)`);
+    if (a1['aria-expanded'] !== 'true') problems.push(`aria-expanded="${a1['aria-expanded'] ?? ''}" while open (expected true)`);
+    if (!a1['aria-autocomplete']) problems.push('no aria-autocomplete');
+    const html = await input.evaluate((n) => n.outerHTML.slice(0, 200));
+    if (problems.length) R.fail('combobox-role', c, 'The search input is not exposed as a combobox while the dropdown is open', [{ target: sel, html, summary: problems.join('; ') }]);
+    else R.pass('combobox-role', c);
+    const controls = a1['aria-controls'];
+    if (!controls || !(await page.evaluate((id) => !!document.getElementById(id), controls))) R.fail('combobox-controls', c, 'aria-controls does not name the dropdown on the page', [{ target: sel, html, summary: `aria-controls="${controls ?? ''}"` }]);
+    else R.pass('combobox-controls', c);
+    await ours(c, [OVERLAY], { 'scrollable-region-focusable': false });
+
+    // The status region: the count once typing paused.
+    const said = await page
+      .waitForFunction(
+        (s) => {
+          const h = document.querySelector(s);
+          const st = (h?.shadowRoot ?? h)?.querySelector('[role=status], [aria-live]');
+          return st?.textContent?.trim() || '';
+        },
+        OVERLAY,
+        { timeout: 3000 },
+      )
+      .then((h) => h.jsonValue(), () => '');
+    if (!said) R.fail('status-message', c, 'The number of suggestions is not announced (no text in a status region of the dropdown)', [{ target: OVERLAY }]);
+    else R.pass('status-message', c);
+
+    // The keyboard selection.
+    await input.press('ArrowDown');
+    await input.press('ArrowDown');
+    await sleep(150);
+    c = ctx('autocomplete', 'keyboard selection');
+    const sel1 = await page.evaluate((s) => {
+      const h = document.querySelector(s);
+      const root = h?.shadowRoot ?? h;
+      const opts = [...(root?.querySelectorAll('[role=option]') ?? [])];
+      const on = opts.filter((o) => o.getAttribute('aria-selected') === 'true');
+      return { count: on.length, id: on[0]?.id ?? '', shadow: !!h?.shadowRoot, html: on[0]?.outerHTML.slice(0, 200) ?? '' };
+    }, OVERLAY);
+    const focusStays = await input.evaluate((n) => {
+      let a = document.activeElement;
+      while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+      return a === n;
+    });
+    if (!focusStays) R.fail('combobox-focus', c, 'The arrow keys moved focus out of the search input', [{ target: (await active()) ?? 'body' }]);
+    else R.pass('combobox-focus', c);
+    const a2 = await aria();
+    // An input in a shadow root (a web-component header) cannot reference the
+    // light-DOM dropdown's option by id (ids do not cross shadow boundaries):
+    // Luma points at it by element reflection there (ariaActiveDescendantElement).
+    const reflected = await input.evaluate((n, s) => {
+      const h = document.querySelector(s);
+      const on = (h?.shadowRoot ?? h)?.querySelector('[role=option][aria-selected=true]');
+      return n.getRootNode() !== document && 'ariaActiveDescendantElement' in n && !!on && /** @type {any} */ (n).ariaActiveDescendantElement === on;
+    }, OVERLAY);
+    if (sel1.count !== 1) R.fail('combobox-active-option', c, `After ArrowDown ${sel1.count} options have aria-selected="true" (expected exactly one)`, [{ target: `${OVERLAY} [role=option]` }]);
+    else if (!sel1.shadow && !reflected && (a2['aria-activedescendant'] !== sel1.id || !sel1.id))
+      R.fail('combobox-active-option', c, 'aria-activedescendant on the input does not point at the selected option', [{ target: `${OVERLAY} [aria-selected=true]`, html: sel1.html, summary: `aria-activedescendant="${a2['aria-activedescendant'] ?? ''}", option id="${sel1.id}"` }]);
+    else R.pass('combobox-active-option', c);
+    await ours(c, [OVERLAY], { 'scrollable-region-focusable': false });
+
+    // Forced colours: the selected row must still look selected.
+    await page.emulateMedia({ forcedColors: 'active' });
+    await sleep(150);
+    c = ctx('autocomplete', 'forced colours');
+    const distinct = await page.evaluate((s) => {
+      const h = document.querySelector(s);
+      const root = h?.shadowRoot ?? h;
+      const on = root?.querySelector('[role=option][aria-selected=true]');
+      const off = root?.querySelector('[role=option]:not([aria-selected=true])');
+      if (!on || !off) return null;
+      const look = (e) => {
+        const cs = getComputedStyle(e);
+        return [cs.backgroundColor, cs.color, cs.outlineStyle === 'none' ? 'none' : `${cs.outlineStyle}${cs.outlineWidth}`, cs.borderTopStyle + cs.borderLeftStyle + cs.borderLeftWidth, cs.boxShadow].join('|');
+      };
+      return { same: look(on) === look(off), html: on.outerHTML.slice(0, 200) };
+    }, OVERLAY);
+    if (distinct?.same) R.fail('forced-colors-selection', c, 'In forced colours (Windows contrast themes) the keyboard-selected suggestion looks like the others', [{ target: `${OVERLAY} [role=option][aria-selected=true]`, html: distinct.html }]);
+    else if (distinct) R.pass('forced-colors-selection', c);
+    await ours(c, [OVERLAY], { 'scrollable-region-focusable': false, 'color-contrast': false });
+    await page.emulateMedia({ forcedColors: 'none' });
+
+    // prefers-contrast: more
+    await page.emulateMedia({ contrast: 'more' });
+    await sleep(150);
+    await ours(ctx('autocomplete', 'prefers-contrast: more'), [OVERLAY], { 'scrollable-region-focusable': false });
+    await page.emulateMedia({ contrast: 'no-preference' });
+
+    // No results.
+    await input.fill('');
+    await input.pressSequentially('zzqxjvw', { delay: 40 });
+    await sleep(1500);
+    if (await open()) await ours(ctx('autocomplete', 'no results'), [OVERLAY], { 'scrollable-region-focusable': false });
+
+    // Escape closes ours; Tab away puts the input's ARIA back.
+    await input.fill('');
+    await input.pressSequentially(query, { delay: 40 });
+    await options.first().waitFor({ state: 'visible', timeout: 8000 }).catch(() => {});
+    await input.press('Escape');
+    await sleep(200);
+    c = ctx('autocomplete', 'closed');
+    const a3 = await aria();
+    if (a3['aria-expanded'] === 'true' || (await open())) R.fail('combobox-escape', c, 'Escape did not close the dropdown', [{ target: sel, html: await input.evaluate((n) => n.outerHTML.slice(0, 200)) }]);
+    else R.pass('combobox-escape', c);
+    await input.press('Tab');
+    await sleep(300);
+    // A page with nothing else to focus (a stub page) wraps Tab back to the input: leave it for real.
+    if (await input.evaluate((n) => document.activeElement === n)) {
+      await input.evaluate((n) => /** @type {HTMLElement} */ (n).blur());
+      await sleep(300);
+    }
+    c = ctx('autocomplete', 'focus left the input');
+    const a4 = await aria();
+    if (JSON.stringify(a4) !== JSON.stringify(before)) {
+      // What tells the causes apart: an input in a shadow root, and whether Luma saw focus leave (its dropdown still open, aria-expanded still ours).
+      const where = await input.evaluate((n) => {
+        const root = n.getRootNode();
+        let a = document.activeElement;
+        while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+        return { shadow: root !== document, sameRoot: !!a && a !== n && a.getRootNode() === root && root !== document, focus: a ? a.tagName.toLowerCase() + (a.className ? `.${String(a.className).trim().split(/\s+/).join('.')}` : '') : 'none' };
+      });
+      const still = a4['aria-expanded'] === 'true' || (await open());
+      const why = [
+        where.shadow ? `the input is in a shadow root${where.sameRoot ? `, focus moved to ${where.focus} in the same shadow root` : ''}` : '',
+        still ? 'the dropdown was still open (Luma did not see focus leave)' : '',
+      ].filter(Boolean);
+      R.fail('combobox-restore', c, 'Once focus left the input, its ARIA attributes were not as the host had them', [{ target: sel, summary: `before ${JSON.stringify(before)}, after ${JSON.stringify(a4)}${why.length ? `; ${why.join('; ')}` : ''}` }]);
+    }
+    else R.pass('combobox-restore', c);
+  };
+
+  // ---------------------------------------------------------------- listings
+
+  const LISTING = 'lbx-search, lbx-plp';
+  /** A listing shown and settled (not busy, with its total), or null. */
+  const listingShown = async (timeout = 15000) => {
+    // A page of the listing gets its element at boot (hidden until rendered); other pages never do.
+    const there = await page.waitForSelector(LISTING, { state: 'attached', timeout: Math.min(timeout, 3000) }).then(() => true, () => false);
+    if (!there) return null;
+    const ok = await page
+      .waitForFunction(
+        (s) => {
+          const el = /** @type {HTMLElement | null} */ (document.querySelector(s));
+          return !!el && el.checkVisibility() && el.getAttribute('aria-busy') === 'false' && /\d/.test(el.getAttribute('data-total') ?? '');
+        },
+        LISTING,
+        { timeout },
+      )
+      .then(() => true, () => false);
+    return ok ? page.evaluate((s) => document.querySelector(s)?.localName.replace('lbx-', '') ?? null, LISTING) : null;
+  };
+  const settled = async () => {
+    await sleep(150);
+    await page.waitForFunction((s) => document.querySelector(s)?.getAttribute('aria-busy') === 'false', LISTING, { timeout: 10000 }).catch(() => {});
+    await sleep(200);
+  };
+
+  /** Starts recording what a listing's status region says. */
+  const recordStatus = (root) =>
+    page.evaluate((root) => {
+      const w = /** @type {any} */ (window);
+      ((w.__lbx ??= {}).a11y ??= {}).said = [];
+      const el = document.querySelector(`${root} [data-lbx-a11y] [role=status]`) ?? document.querySelector(`${root} [role=status], ${root} [aria-live]`);
+      if (!el) return false;
+      new MutationObserver(() => el.textContent?.trim() && w.__lbx.a11y.said.push(el.textContent.trim())).observe(el, { childList: true, characterData: true, subtree: true });
+      return true;
+    }, root);
+
+  /**
+   * Tab through `root` from its start: every stop's focus must be visible; an
+   * element that acts as a control must be focusable; a checkbox hidden behind
+   * a drawn box must keep focus.
+   */
+  const keyboardWalk = async (c, root, max = 300) => {
+    const pre = await page.evaluate((root) => {
+      const r = document.querySelector(root);
+      if (!r) return null;
+      const w = /** @type {any} */ (window);
+      const all = [...r.querySelectorAll('*')];
+      const visible = (e) => e.checkVisibility({ visibilityProperty: true }) && e.getBoundingClientRect().width > 0 && e.getBoundingClientRect().height > 0;
+      const look = (e) => {
+        if (!e) return '';
+        const cs = getComputedStyle(e);
+        return [cs.outlineStyle === 'none' ? 'none' : `${cs.outlineStyle} ${cs.outlineWidth} ${cs.outlineColor}`, cs.boxShadow, cs.backgroundColor, cs.borderTopColor + cs.borderBottomColor, cs.borderBottomWidth, cs.color, cs.textDecorationLine].join('|');
+      };
+      // Unfocused looks of every focusable element (and the parts that draw a custom control's focus).
+      const focusable = all.filter((e) => /** @type {HTMLElement} */ (e).tabIndex >= 0 && !(/** @type {any} */ (e).disabled) && visible(e));
+      ((w.__lbx ??= {}).a11y ??= {}).walk = { els: focusable, looks: focusable.map((e) => [look(e), look(e.parentElement), look(e.nextElementSibling)].join('#')), look: (e) => [look(e), look(e.parentElement), look(e.nextElementSibling)].join('#') };
+      const html = (e) => e.outerHTML.slice(0, 200);
+      // Controls by role that cannot get focus.
+      const roles = 'button, link, checkbox, radio, switch, slider, spinbutton, combobox'.split(', ');
+      const unfocusable = all
+        .filter((e) => roles.includes(e.getAttribute('role') ?? '') && /** @type {HTMLElement} */ (e).tabIndex < 0 && e.getAttribute('aria-disabled') !== 'true' && !e.closest('[aria-hidden=true], [inert]') && visible(e))
+        .map(html);
+      // Checkboxes and radios not rendered (display:none / visibility:hidden) whose label is shown: not reachable by keyboard.
+      const hidden = all
+        .filter((e) => e.matches('input[type=checkbox], input[type=radio]') && !e.closest('[aria-hidden=true], [inert]'))
+        .filter((e) => {
+          const cs = getComputedStyle(e);
+          if (cs.display !== 'none' && cs.visibility !== 'hidden') return false;
+          const label = e.closest('label') ?? (e.id ? r.querySelector(`label[for="${CSS.escape(e.id)}"]`) : null);
+          return !!label && visible(label) && /** @type {HTMLElement} */ (label).tabIndex < 0;
+        })
+        .map(html);
+      return { unfocusable, hidden, count: focusable.length };
+    }, root);
+    if (!pre) return;
+    if (pre.unfocusable.length) R.fail('not-focusable', c, 'Controls (by their role) that the keyboard cannot reach', pre.unfocusable.slice(0, 8).map((h) => ({ target: tagOf(h), html: h })));
+    else R.pass('not-focusable', c);
+    if (pre.hidden.length) R.fail('hidden-control', c, 'Checkboxes or radios hidden with display:none / visibility:hidden behind a drawn box: not reachable by keyboard', pre.hidden.slice(0, 8).map((h) => ({ target: tagOf(h), html: h })));
+    else if (pre.count) R.pass('hidden-control', c);
+    // Tab from the start of the root.
+    await page.evaluate((root) => {
+      const r = /** @type {HTMLElement} */ (document.querySelector(root));
+      if (r.tabIndex < 0 && !r.hasAttribute('tabindex')) r.setAttribute('tabindex', '-1');
+      r.focus({ preventScroll: true });
+    }, root);
+    const invisible = new Map();
+    let stops = 0;
+    for (; stops < max; stops++) {
+      await page.keyboard.press('Tab');
+      const s = await page.evaluate((root) => {
+        let a = document.activeElement;
+        while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+        const r = document.querySelector(root);
+        if (!a || !r || !r.contains(a)) return { inside: false };
+        const w = /** @type {any} */ (window).__lbx?.a11y?.walk;
+        const i = w.els.indexOf(a);
+        const now = w.look(a);
+        return { inside: true, same: i >= 0 && w.looks[i] === now, known: i >= 0, html: a.outerHTML.slice(0, 200) };
+      }, root);
+      if (!s.inside) break;
+      if (s.known && s.same && !invisible.has(s.html)) invisible.set(s.html, true);
+    }
+    if (invisible.size) R.fail('focus-visible', c, 'Keyboard focus is not visible on these controls (nothing in their look changes when they get focus)', [...invisible.keys()].slice(0, 8).map((h) => ({ target: tagOf(h), html: h })));
+    else if (stops) R.pass('focus-visible', c);
+    return stops;
+  };
+
+  /** A filter we may operate: in the facets, not on a tile, never anything cart-like. */
+  const pickFilter = (root) =>
+    page.evaluate(
+      ({ root, unsafe }) => {
+        const r = document.querySelector(root);
+        if (!r) return null;
+        const bad = new RegExp(unsafe, 'i');
+        const shown = (e) => {
+          const label = e.closest('label') ?? (e.id ? r.querySelector(`label[for="${CSS.escape(e.id)}"]`) : null);
+          return [e, label].some((x) => x && x.checkVisibility({ visibilityProperty: true }) && x.getBoundingClientRect().height > 0);
+        };
+        const ok = (e) => !e.closest('[data-lbx-list], [data-lbx-menu]') && shown(e) && !bad.test(`${e.textContent} ${e.closest('label')?.textContent ?? ''} ${e.getAttribute('aria-label') ?? ''} ${e.className}`);
+        const groups = [
+          '[data-facet] input[type=checkbox]:not(:checked), input[type=checkbox][data-facet]:not(:checked)',
+          '[role=checkbox][aria-checked=false]',
+          'fieldset input[type=checkbox]:not(:checked), [role=group] input[type=checkbox]:not(:checked)',
+          '[data-facet] a[href], fieldset a[href]',
+        ];
+        for (const g of groups) {
+          const el = [...r.querySelectorAll(g)].find(ok);
+          if (el) {
+            const all = [...r.querySelectorAll('*')];
+            return { index: all.indexOf(el), html: el.outerHTML.slice(0, 200), kind: el.matches('input') ? 'input' : el.getAttribute('role') === 'checkbox' ? 'role' : 'link' };
+          }
+        }
+        return null;
+      },
+      { root, unsafe: UNSAFE.source },
+    );
+  const nth = (root, index) => page.locator(`${root} *`).nth(index);
+
+  const listing = async (route) => {
+    const root = `lbx-${route}`;
+    log(`  ${route}`);
+    let c = ctx(route, 'shown');
+    // A named region (Luma's; a template must not take the name away).
+    const name = await page.evaluate((root) => {
+      const r = document.querySelector(root);
+      return { role: r?.getAttribute('role'), label: r?.getAttribute('aria-label') || r?.getAttribute('aria-labelledby') || '' };
+    }, root);
+    if (name.role !== 'region' || !name.label) R.fail('region-name', c, 'The listing is not a named region', [{ target: root, summary: JSON.stringify(name) }]);
+    else R.pass('region-name', c);
+    await ours(c, [root]);
+    await keyboardWalk(ctx(route, 'keyboard (Tab through)'), root);
+
+    // A filter, from the keyboard.
+    c = ctx(route, 'filter applied (keyboard)');
+    const f = await pickFilter(root);
+    if (!f) R.skip(route, `no filter control found in ${root} (checkboxes or links in [data-facet] / fieldsets)`);
+    else {
+      const recording = await recordStatus(root);
+      const state = () => page.evaluate((root) => `${location.href} ${document.querySelector(root)?.getAttribute('data-total')} ${document.querySelector(root)?.getAttribute('aria-busy')}`, root);
+      const was = await state();
+      const el = nth(root, f.index);
+      let moved = false;
+      if (await el.evaluate((e) => /** @type {HTMLElement} */ (e).tabIndex >= 0 && getComputedStyle(e).display !== 'none').catch(() => false)) {
+        await el.focus();
+        await page.keyboard.press(f.kind === 'link' ? 'Enter' : 'Space');
+        moved = await page.waitForFunction(({ root, was }) => `${location.href} ${document.querySelector(root)?.getAttribute('data-total')} ${document.querySelector(root)?.getAttribute('aria-busy')}` !== was, { root, was }, { timeout: 6000 }).then(() => true, () => false);
+      }
+      if (!moved) {
+        R.fail('keyboard-filter', c, 'A filter could not be applied from the keyboard', [{ target: tagOf(f.html), html: f.html }]);
+        // Go on with the mouse, so the states after it are still checked.
+        const target = (await el.evaluate((e) => getComputedStyle(e).display !== 'none' && e.checkVisibility())) ? el : el.locator('xpath=ancestor::label[1]');
+        await target.click({ timeout: 5000 }).catch(() => {});
+      } else R.pass('keyboard-filter', c);
+      await settled();
+      if (moved) {
+        if (!(await active())) R.fail('focus-lost', c, 'After the filter re-rendered the listing, focus was lost to the page (<body>)', [{ target: tagOf(f.html), html: f.html }]);
+        else R.pass('focus-lost', c);
+      }
+      if (recording) {
+        const said = await page.waitForFunction(() => /** @type {any} */ (window).__lbx?.a11y?.said?.length > 0, null, { timeout: 3000 }).then(() => true, () => false);
+        if (!said && (await state()) !== was) R.fail('status-message', c, 'The new result count was not announced after the filter', [{ target: `${root} [data-lbx-a11y]` }]);
+        else if (said) R.pass('status-message', c);
+      } else R.fail('status-message', c, 'The listing has no status region (Luma\'s [data-lbx-a11y] was removed or hidden)', [{ target: root }]);
+      await ours(c, [root]);
+    }
+
+    // The sort menu (desktop and phone).
+    const menu = async (c) => {
+      const m = await page.evaluate((root) => {
+        const all = [...document.querySelectorAll(`${root} [data-lbx-menu]`)].filter((e) => e.checkVisibility());
+        for (const mn of all) {
+          const toggles = [...mn.querySelectorAll('[data-lbx-toggle]')];
+          const button = toggles.find((t) => t.hasAttribute('aria-haspopup')) ?? toggles[0];
+          if (button && button.checkVisibility()) return { menu: [...document.querySelectorAll(`${root} [data-lbx-menu]`)].indexOf(mn), button: toggles.indexOf(button), html: button.outerHTML.slice(0, 200) };
+        }
+        return null;
+      }, root);
+      if (!m) return false;
+      const button = page.locator(`${root} [data-lbx-menu]`).nth(m.menu).locator('[data-lbx-toggle]').nth(m.button);
+      await button.focus();
+      await page.keyboard.press('Enter');
+      await sleep(300);
+      if ((await button.getAttribute('aria-expanded')) !== 'true') R.fail('menu-expanded', c, 'The menu button does not say it is open (aria-expanded)', [{ target: tagOf(m.html), html: m.html }]);
+      else R.pass('menu-expanded', c);
+      const inside = await page.evaluate(
+        ({ root, i }) => {
+          let a = document.activeElement;
+          while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+          const mn = document.querySelectorAll(`${root} [data-lbx-menu]`)[i];
+          return !!a && !!mn?.contains(a) && !a.matches('[data-lbx-toggle][aria-haspopup], [data-lbx-toggle]:first-child');
+        },
+        { root, i: m.menu },
+      );
+      if (!inside) R.fail('menu-focus', c, 'Opened from the keyboard, focus did not move into the menu', [{ target: tagOf(m.html), html: m.html, summary: `focus on ${await active()}` }]);
+      else R.pass('menu-focus', c);
+      await ours(c, [root]);
+      await page.keyboard.press('Escape');
+      await sleep(250);
+      const closed = (await button.getAttribute('aria-expanded')) !== 'true';
+      const back = await button.evaluate((b) => document.activeElement === b);
+      if (!closed || !back) R.fail('menu-escape', c, `Escape ${!closed ? 'did not close the menu' : 'did not return focus to the menu button'}`, [{ target: tagOf(m.html), html: m.html }]);
+      else R.pass('menu-escape', c);
+      return true;
+    };
+    const hadMenu = await menu(ctx(route, 'sort menu (keyboard)'));
+
+    // Phone width: the layout, the sort menu there, the filter drawer.
+    await page.setViewportSize({ width: 375, height: 740 });
+    await sleep(500);
+    await ours(ctx(route, 'phone width (375 px)'), [root]);
+    const hadPhoneMenu = await menu(ctx(route, 'sort menu (phone)'));
+    if (!hadMenu && !hadPhoneMenu) R.skip(route, 'no sort menu ([data-lbx-menu] with a [data-lbx-toggle]) on the page');
+    c = ctx(route, 'filter drawer (phone)');
+    const opener = await page.evaluate((root) => {
+      const all = [...document.querySelectorAll(`${root} [data-lbx-drawer="open"]`)];
+      const i = all.findIndex((e) => e.checkVisibility() && e.getBoundingClientRect().height > 0);
+      return i < 0 ? null : { i, html: all[i].outerHTML.slice(0, 200) };
+    }, root);
+    if (!opener) R.skip(route, 'no filter drawer opener ([data-lbx-drawer="open"]) visible at 375 px');
+    else {
+      const o = page.locator(`${root} [data-lbx-drawer="open"]`).nth(opener.i);
+      await o.focus();
+      await page.keyboard.press('Enter');
+      await sleep(500);
+      const panel = page.locator(`${root} [data-lbx-drawer-panel]`).first();
+      if (!(await panel.count())) R.fail('drawer-dialog', c, 'The drawer has no [data-lbx-drawer-panel]: while open it is not a modal dialog, focus is not moved in or kept there', [{ target: tagOf(opener.html), html: opener.html }]);
+      else {
+        const d = await panel.evaluate((p) => ({ role: p.getAttribute('role'), modal: p.getAttribute('aria-modal'), name: p.getAttribute('aria-label') || p.getAttribute('aria-labelledby') || '', html: p.outerHTML.slice(0, 200), stops: p.querySelectorAll('a[href], button, input, select, textarea, [tabindex="0"]').length }));
+        if (d.role !== 'dialog' || d.modal !== 'true' || !d.name) R.fail('drawer-dialog', c, 'The open drawer is not a named modal dialog', [{ target: '[data-lbx-drawer-panel]', html: d.html, summary: `role=${d.role} aria-modal=${d.modal} name=${JSON.stringify(d.name)}` }]);
+        else R.pass('drawer-dialog', c);
+        let trapped = await focusIn('[data-lbx-drawer-panel]');
+        if (trapped) {
+          for (let i = 0; i < Math.min(d.stops, 60) + 2 && trapped; i++) {
+            await page.keyboard.press('Tab');
+            trapped = await focusIn('[data-lbx-drawer-panel]');
+          }
+        }
+        if (!trapped) R.fail('drawer-focus', c, 'Focus is not kept inside the open drawer (it did not move in, or Tab left it)', [{ target: '[data-lbx-drawer-panel]', html: d.html, summary: `focus on ${await active()}` }]);
+        else R.pass('drawer-focus', c);
+        await ours(c, [root]);
+        await page.keyboard.press('Escape');
+        await sleep(400);
+        const closed = await panel.evaluate((p) => p.getAttribute('aria-modal') !== 'true' || !p.checkVisibility());
+        const back = await o.evaluate((b) => document.activeElement === b);
+        if (!closed || !back) R.fail('drawer-escape', c, `Escape ${!closed ? 'did not close the drawer' : 'did not return focus to the button that opened it'}`, [{ target: tagOf(opener.html), html: opener.html }]);
+        else R.pass('drawer-escape', c);
+      }
+    }
+
+    await reflow(ctx(route, 'reflow (320 px)'), root);
+    await desktop();
+    await sleep(300);
+    await mediaStates(route, root);
+  };
+
+  /** 1.4.10: at 320 px nothing of ours past the viewport (a scrolling row of its own excepted). */
+  const reflow = async (c, root) => {
+    await page.setViewportSize({ width: 320, height: 640 });
+    await sleep(600);
+    const past = await page.evaluate((root) => {
+      const r = document.querySelector(root);
+      if (!r) return [];
+      const vw = document.documentElement.clientWidth;
+      const out = [];
+      for (const n of r.querySelectorAll('*')) {
+        const b = n.getBoundingClientRect();
+        if (b.width <= 1 || b.height <= 1 || !n.checkVisibility()) continue;
+        if (b.right <= vw + 1 && b.left >= -1) continue;
+        if (n.closest('[data-lbx-a11y], .lbx-sr-only')) continue;
+        // Inside a container that scrolls or clips on its own (a carousel), which itself fits: allowed.
+        let clipped = false;
+        for (let p = n.parentElement; p && p !== r.parentElement && !clipped; p = p.parentElement) {
+          if (getComputedStyle(p).overflowX === 'visible') continue;
+          const pb = p.getBoundingClientRect();
+          clipped = pb.right <= vw + 1 && pb.left >= -1;
+        }
+        if (clipped) continue;
+        // Report the outermost offender only.
+        if (out.some((o) => o.el.contains(n))) continue;
+        out.push({ el: n, html: n.outerHTML.slice(0, 200), right: Math.round(b.right) });
+        if (out.length > 6) break;
+      }
+      return out.map(({ html, right }) => ({ html, right, vw }));
+    }, root);
+    if (past.length) R.fail('reflow', c, 'At 320 CSS px wide, parts of the widget extend past the viewport (horizontal scrolling)', past.map((p) => ({ target: tagOf(p.html), html: p.html, summary: `right edge at ${p.right} px, viewport ${p.vw} px` })));
+    else R.pass('reflow', c);
+  };
+
+  /** prefers-contrast: more, forced colours, reduced motion. */
+  const mediaStates = async (widget, root) => {
+    await page.emulateMedia({ contrast: 'more' });
+    await sleep(300);
+    let c = ctx(widget, 'prefers-contrast: more');
+    await ours(c, [root]);
+    await ringCheck(c, root);
+    await page.emulateMedia({ contrast: 'no-preference', forcedColors: 'active' });
+    await sleep(300);
+    c = ctx(widget, 'forced colours');
+    // The visitor's theme sets the colours there (the emulation does not repaint the author's, so
+    // axe's contrast would only repeat the normal mode's): what matters is that states stay visible.
+    await ours(c, [root], { 'color-contrast': false });
+    await ringCheck(c, root);
+    // A custom-drawn checkbox: checked and unchecked must still differ.
+    const boxes = await page.evaluate((root) => {
+      const r = document.querySelector(root);
+      if (!r) return null;
+      const drawn = (i) => {
+        const cs = getComputedStyle(i);
+        return cs.opacity === '0' || cs.display === 'none' || i.getBoundingClientRect().width <= 1 || cs.appearance === 'none';
+      };
+      const on = [...r.querySelectorAll('input[type=checkbox]:checked')].find(drawn);
+      const off = [...r.querySelectorAll('input[type=checkbox]:not(:checked)')].find(drawn);
+      if (!on || !off) return null;
+      const look = (i) => {
+        const parts = [i, i.nextElementSibling, i.parentElement].filter(Boolean);
+        return parts
+          .flatMap((e) => [getComputedStyle(e), getComputedStyle(e, '::before'), getComputedStyle(e, '::after')])
+          .map((cs) => [cs.backgroundColor, cs.backgroundImage, cs.borderTopColor, cs.borderTopWidth, cs.outlineStyle, cs.content, cs.color, cs.boxShadow, cs.maskImage].join('|'))
+          .join('#');
+      };
+      return { same: look(on) === look(off), html: (on.nextElementSibling ?? on).outerHTML.slice(0, 200) };
+    }, root);
+    if (boxes?.same) R.fail('forced-colors-selection', c, 'In forced colours a ticked custom checkbox looks like an unticked one (its fill or tick is dropped)', [{ target: tagOf(boxes.html), html: boxes.html }]);
+    else if (boxes) R.pass('forced-colors-selection', c);
+    await page.emulateMedia({ forcedColors: 'none', reducedMotion: 'reduce' });
+    await sleep(300);
+    c = ctx(widget, 'reduced motion');
+    const moving = await page.evaluate((root) => {
+      const r = document.querySelector(root);
+      if (!r) return [];
+      const MOTION = /transform|translate|left|top|right|bottom|margin|scale|rotate|^all$/;
+      const out = [];
+      for (const e of [r, ...r.querySelectorAll('*')]) {
+        const cs = getComputedStyle(e);
+        const secs = (s) => Math.max(...s.split(',').map((x) => parseFloat(x) * (x.trim().endsWith('ms') ? 0.001 : 1)));
+        const anim = cs.animationName !== 'none' && secs(cs.animationDuration) > 0.01;
+        const props = cs.transitionProperty.split(',').map((x) => x.trim());
+        const durs = cs.transitionDuration.split(',').map((x) => secs(x));
+        const trans = props.some((p, i) => MOTION.test(p) && (durs[i % durs.length] ?? 0) > 0.01);
+        const smooth = cs.scrollBehavior === 'smooth' && e.scrollWidth > e.clientWidth;
+        if (anim || trans || smooth) out.push({ html: e.outerHTML.slice(0, 160), what: anim ? `animation ${cs.animationName}` : trans ? `transition ${cs.transitionProperty} ${cs.transitionDuration}` : 'scroll-behavior: smooth' });
+        if (out.length > 5) break;
+      }
+      return out;
+    }, root);
+    if (moving.length) R.fail('reduced-motion', c, 'Motion continues under prefers-reduced-motion: reduce', moving.map((m) => ({ target: tagOf(m.html), html: m.html, summary: m.what })));
+    else R.pass('reduced-motion', c);
+    await page.emulateMedia({ reducedMotion: 'no-preference' });
+  };
+
+  /** Under the contrast modes, focus of ours keeps a ring (a site's outline reset cannot remove it there). */
+  const ringCheck = async (c, root) => {
+    await page.evaluate((root) => /** @type {HTMLElement} */ (document.querySelector(root))?.focus({ preventScroll: true }), root);
+    await page.keyboard.press('Tab');
+    const ring = await page.evaluate((root) => {
+      let a = document.activeElement;
+      while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+      if (!a || !document.querySelector(root)?.contains(a)) return null;
+      const cs = getComputedStyle(a);
+      return { ok: (cs.outlineStyle !== 'none' && parseFloat(cs.outlineWidth) >= 1) || cs.boxShadow !== 'none', html: a.outerHTML.slice(0, 200), outline: `${cs.outlineStyle} ${cs.outlineWidth}` };
+    }, root);
+    if (ring && !ring.ok) R.fail('focus-visible', c, 'No focus ring in this mode', [{ target: tagOf(ring.html), html: ring.html, summary: `outline: ${ring.outline}` }]);
+    else if (ring) R.pass('focus-visible', c);
+  };
+
+  // ---------------------------------------------------------------- recommenders
+
+  const recommender = async () => {
+    // Inline boxes load when they near the viewport: scroll down in steps.
+    let found = false;
+    for (let i = 0; i < 30 && !found; i++) {
+      found = await page.evaluate(() => [...document.querySelectorAll('lbx-reco')].some((r) => r.getAttribute('data-state') === 'ready' && r.querySelector('a[href]')));
+      if (!found) {
+        await page.mouse.wheel(0, 600);
+        await sleep(400);
+      }
+    }
+    if (!found) return false;
+    const n = await page.locator('lbx-reco[data-state=ready]').count();
+    for (let i = 0; i < n; i++) {
+      const id = await page.locator('lbx-reco[data-state=ready]').nth(i).getAttribute('data-lbx');
+      const root = `lbx-reco[data-lbx="${id}"]`;
+      const widget = `recommender ${id?.replace(/^reco-/, '') ?? i}`;
+      log(`  ${widget}`);
+      await page.locator(root).scrollIntoViewIfNeeded();
+      let c = ctx(widget, 'shown');
+      const named = await page.evaluate((root) => {
+        const r = document.querySelector(root);
+        const region = [r, ...(r?.querySelectorAll('section, [role=region]') ?? [])].find((e) => e && (e.getAttribute('role') === 'region' || e.localName === 'section'));
+        return !!region && !!(region.getAttribute('aria-label') || region.getAttribute('aria-labelledby'));
+      }, root);
+      if (!named) R.fail('region-name', c, 'The recommender is not a named region (a section named by its title)', [{ target: root }]);
+      else R.pass('region-name', c);
+      await ours(c, [root]);
+      await keyboardWalk(ctx(widget, 'keyboard (Tab through)'), root, 80);
+      await reflow(ctx(widget, 'reflow (320 px)'), root);
+      await desktop();
+      await sleep(300);
+      await mediaStates(widget, root);
+    }
+    return true;
+  };
+
+  // ---------------------------------------------------------------- the run
+
+  let searchSeen = false;
+  let recoSeen = false;
+  let recoConfigured = false;
+  let first = true;
+  for (const p of paths) {
+    const cfg = await load(p);
+    if (!cfg) continue;
+    await hostAxe();
+    if (first && cfg.autocomplete && only('autocomplete')) await autocomplete(cfg);
+    let route = await listingShown(first && !opts.paths?.length ? 4000 : 15000);
+    if (route && only(route)) {
+      if (route === 'search') searchSeen = true;
+      await listing(route);
+    } else if (opts.paths?.length && !route && !cfg.recommenders) R.note(`${p}: none of Luma's listings was shown (not a search or category page of the integration, or handed back to the host)`);
+    // The search page, from the header's search form (as the shopper gets there), once.
+    if (first && !searchSeen && cfg.search && only('search') && !paths.slice(1).some((x) => /[?&]q=/.test(x))) {
+      const sel = cfg._global?.inputSelector || 'input[name=q]';
+      const input = page.locator(sel).first();
+      if (await input.isVisible().catch(() => false)) {
+        await desktop();
+        await input.fill(query);
+        await input.press('Escape').catch(() => {});
+        await input.press('Enter');
+        await page.waitForLoadState('load').catch(() => {});
+        await booted();
+        path = await page.evaluate(() => location.pathname + location.search);
+        log(`page ${path} (the search form)`);
+        route = await listingShown();
+        if (route === 'search') {
+          searchSeen = true;
+          await hostAxe();
+          await listing('search');
+        } else R.skip('search', `the search form led to ${path}, where Luma's search listing was not shown`);
+      }
+    }
+    if (cfg.recommenders && Object.keys(cfg.recommenders).length && only('recommender')) {
+      recoConfigured = true;
+      if (await recommender()) recoSeen = true;
+    }
+    await healthErrors();
+    first = false;
+  }
+  if (only('recommender') && recoConfigured && !recoSeen) R.skip('recommender', 'no inline recommender rendered on the pages checked (pass a product page: yarn luma a11y /some-product)');
+  if (only('recommender') && recoConfigured) R.skip('recommender popup', 'opens on an add-to-cart click, which this command never makes');
+};
+
+/** `<tag class="a b">` → `tag.a.b` (for a finding's target when the node has no selector). */
+const tagOf = (html) => {
+  const m = /^<([\w-]+)([^>]*)>/.exec(html ?? '');
+  if (!m) return 'node';
+  const id = /\bid="([^"]+)"/.exec(m[2])?.[1];
+  const cls = /\bclass="([^"]+)"/.exec(m[2])?.[1]?.trim().split(/\s+/).slice(0, 3).join('.');
+  return `${m[1]}${id ? `#${id}` : ''}${cls ? `.${cls}` : ''}`;
+};