@setsquare/review-sdk 0.0.1 → 0.1.1

package/dist/checks/focus.js

@@ -0,0 +1,1123 @@
+import { FOCUS_APPEARANCE_HELP_URL, FOCUS_NOT_OBSCURED_ENHANCED_HELP_URL, FOCUS_NOT_OBSCURED_MINIMUM_HELP_URL, FOCUS_VISIBLE_HELP_URL, } from '../links.js';
+import { sanitiseSelectors } from '../sanitise.js';
+/**
+ * The focus checks: what happens when an element actually receives focus.
+ *
+ * This is the class of criterion an engine like axe structurally cannot reach.
+ * axe analyses one DOM snapshot; 2.4.11 and 2.4.12 are about the state the
+ * page enters *when something is focused*, which needs a browser being driven.
+ * We have the page, in the worker, mid-run — that is the whole difference, and
+ * it is the reason our own Consent page can argue that a sticky bottom bar
+ * covering the focused element is a textbook 2.4.11 failure. Until this
+ * existed, we were selling a claim our own report could not check.
+ *
+ * **Teardown only, and this is not a detail.** The other dynamic checks also
+ * run inside an awaited explicit `setsquare.scan()`, because injecting and
+ * removing a stylesheet fires no page code. Focusing does. Every `focus()`
+ * here runs the page's own focus, focusin and blur handlers, and a handler
+ * that opens a menu, marks a field dirty or starts a request has already run
+ * by the time we restore anything. Scroll position and the previously focused
+ * element are restored; side effects cannot be. So this runs only where the
+ * test is over and the page is about to be discarded.
+ *
+ * The cost of that choice, stated rather than hidden: a scan of a named state
+ * (`setsquare.scan(page, surface, { state: 'menu-open' })`) carries no focus
+ * evidence. In practice the failures this catches — cookie banners, sticky
+ * headers, chat widgets — are present in every state including the last one,
+ * so teardown sees them. If that turns out to be wrong it should change on
+ * evidence, not on a guess.
+ */
+// @2 added 2.4.7 Focus Visible and 2.4.13 Focus Appearance to the same walk.
+export const SETSQUARE_FOCUS_CHECKS_VERSION = 'setsquare-focus@2';
+export const FOCUS_OBSCURED_RULE_ID = 'setsquare-focus-obscured';
+export const FOCUS_OBSCURED_ENHANCED_RULE_ID = 'setsquare-focus-obscured-enhanced';
+export const FOCUS_VISIBLE_RULE_ID = 'setsquare-focus-visible';
+export const FOCUS_APPEARANCE_RULE_ID = 'setsquare-focus-appearance';
+/**
+ * 2.4.13's two normative numbers, from the SC itself.
+ *
+ * The indicator must be at least as large as a 2 CSS pixel thick perimeter of
+ * the unfocused component, and have a contrast ratio of at least 3:1 between
+ * its focused and unfocused pixels. They are constants here so the finding can
+ * state the threshold it measured against rather than asserting a verdict the
+ * reader has to take on trust.
+ */
+const APPEARANCE_MIN_THICKNESS = 2;
+const APPEARANCE_MIN_CONTRAST = 3;
+/**
+ * How many focusable elements one page's walk will focus.
+ *
+ * A ceiling, not a sample size: the AC for this check is that it "must not be
+ * able to cost a scan", and a data grid with two thousand focusable cells is a
+ * real page. The walk says how many it looked at and whether it stopped early,
+ * so a truncated walk is never reported as a complete one.
+ */
+const MAX_ELEMENTS = 120;
+/** Wall-clock ceiling for the in-page walk, whichever limit bites first. */
+const BUDGET_MS = 1_500;
+const FOCUSABLE = [
+    'a[href]',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+    '[tabindex]',
+    '[contenteditable="true"]',
+].join(',');
+/**
+ * WCAG 2.4.11 Focus Not Obscured (Minimum, AA) and 2.4.12 (Enhanced, AAA).
+ *
+ * One walk, two thresholds — which is why they are one function. 2.4.11 asks
+ * that the focused element is not *entirely* hidden; 2.4.12 that *no part* of
+ * it is. A partly covered element therefore violates 2.4.12 and does not
+ * violate 2.4.11, and the two rules are separate so that stays true in the
+ * evidence rather than only in a comment.
+ *
+ * 2.4.12 is AAA, so its rule is emitted only when the run targets AAA —
+ * the same scoping as the in-page rule pack and axe's own three AAA rules.
+ */
+export async function runFocusNotObscured(page, target) {
+    let walk;
+    try {
+        walk = await page.evaluate(({ selector, maxElements, budgetMs }) => {
+            const startedAt = performance.now();
+            const previouslyFocused = document.activeElement;
+            const scrollX = window.scrollX;
+            const scrollY = window.scrollY;
+            const obscured = [];
+            const ambiguous = [];
+            const indicators = [];
+            let checked = 0;
+            /*
+             * A selector someone can paste into devtools.
+             *
+             * The first version was `tag#id.class`, which on the fixture page
+             * produced the selector `a` — three occluded links collapsing to one
+             * useless row. An id or a class wins when there is one; otherwise it
+             * falls back to a short ancestor path with :nth-child, which is what
+             * axe does and for the same reason. Capped at three steps: past that a
+             * selector is longer than the devtools search box and nobody uses it.
+             *
+             * Structure only. No text content and no accessible name: for this
+             * check the name is not the finding (D13), and page-derived text is the
+             * one thing a selector must not smuggle out.
+             */
+            const step = (el) => {
+                const tag = el.tagName.toLowerCase();
+                if (el.id)
+                    return `${tag}#${el.id}`;
+                if (el.classList.length > 0)
+                    return `${tag}.${el.classList[0]}`;
+                const parent = el.parentElement;
+                if (!parent)
+                    return tag;
+                const index = Array.prototype.indexOf.call(parent.children, el) + 1;
+                return `${tag}:nth-child(${index})`;
+            };
+            const describe = (el) => {
+                const parts = [];
+                let node = el;
+                for (let depth = 0; node && depth < 3; depth += 1) {
+                    parts.unshift(step(node));
+                    // An id or a class is unique enough on its own; stop climbing.
+                    if (node.id || node.classList.length > 0)
+                        break;
+                    node = node.parentElement;
+                    if (!node || node === document.body)
+                        break;
+                }
+                return parts.join(' > ');
+            };
+            /** Does this element paint a background of its own, at full alpha? */
+            const paintsOpaquely = (cs) => {
+                if (cs.backdropFilter && cs.backdropFilter !== 'none')
+                    return true;
+                if (cs.backgroundImage && cs.backgroundImage !== 'none')
+                    return true;
+                const bg = cs.backgroundColor;
+                if (!bg || bg === 'transparent')
+                    return false;
+                /*
+                 * The alpha channel, if there is one — and there usually is not.
+                 *
+                 * The first version matched `rgba?\([^)]*,\s*([\d.]+)\s*\)` and
+                 * compared the capture to 1, which for `rgb(26, 26, 26)` captures the
+                 * BLUE channel. An opaque dark bar therefore read as translucent and
+                 * the fixture page's guaranteed 2.4.11 failure came back as
+                 * needs-review. Found by the fixture, which is the argument for the
+                 * fixture: the unit lane cannot see a computed style.
+                 *
+                 * Components are split on commas, slashes and spaces so both
+                 * `rgba(0, 0, 0, 0.5)` and the modern `rgb(0 0 0 / 50%)` parse. Fewer
+                 * than four components means no alpha, which means opaque.
+                 */
+                const inside = /rgba?\(([^)]+)\)/.exec(bg);
+                if (!inside)
+                    return true;
+                const parts = inside[1].split(/[,/\s]+/).filter(Boolean);
+                if (parts.length < 4)
+                    return true;
+                const alpha = parts[3];
+                return alpha.endsWith('%') ? Number(alpha.slice(0, -1)) === 100 : Number(alpha) === 1;
+            };
+            /*
+             * What is actually covering the focused element, and whether it hides it.
+             *
+             * `elementFromPoint` returns the topmost element, which over a cookie
+             * bar is usually its BUTTON or its paragraph — and a button inside an
+             * opaque bar paints no background of its own. Testing that element
+             * alone reported every real occlusion as a judgement call, which is how
+             * the fixture page found this: the sticky bar came back `incomplete`
+             * instead of `violation`. So walk up from the hit and find the box that
+             * is doing the painting.
+             *
+             * The walk stops at the first ancestor that also contains the focused
+             * element: from there upwards is shared ancestry, which is behind the
+             * element rather than over it.
+             *
+             * `opacity` below 1 anywhere in that chain makes the whole subtree
+             * translucent, so it disqualifies the lot — deliberately conservative.
+             * A decorative overlay at 20% does not hide a focus ring; an opaque bar
+             * does, and only one of those is assertable from geometry.
+             */
+            const coverer = (hit, focused) => {
+                let node = hit;
+                let painted;
+                let translucent = false;
+                while (node && !node.contains(focused)) {
+                    const cs = window.getComputedStyle(node);
+                    if (Number(cs.opacity) < 1)
+                        translucent = true;
+                    if (!painted && paintsOpaquely(cs))
+                        painted = node;
+                    node = node.parentElement;
+                }
+                return {
+                    element: painted ?? hit,
+                    opaque: Boolean(painted) && !translucent,
+                };
+            };
+            /*
+             * Resolve any CSS colour to sRGB, by asking the browser.
+             *
+             * Parsing `rgb()` by hand covered the syntax computed style used to
+             * return, and stopped being enough the moment a stylesheet was
+             * authored in a modern colour space: Tailwind 4 writes `oklch()`, and
+             * Chrome keeps it in computed style rather than converting. The check
+             * then reported a perfectly ordinary focus ring as "painted in a
+             * colour that could not be parsed" — a parser limitation wearing the
+             * costume of an accessibility finding.
+             *
+             * A canvas resolves every syntax there will ever be, because it is the
+             * same code the page is painted with. Memoised on the string, since a
+             * run asks about the same half-dozen colours thousands of times.
+             */
+            const colourCache = new Map();
+            const probe = document.createElement('canvas');
+            probe.width = 1;
+            probe.height = 1;
+            const probeCtx = probe.getContext('2d', { willReadFrequently: true });
+            const rgb = (value) => {
+                if (!value)
+                    return undefined;
+                const trimmed = value.trim();
+                if (colourCache.has(trimmed))
+                    return colourCache.get(trimmed);
+                let resolved;
+                if (probeCtx) {
+                    try {
+                        /*
+                         * An invalid value leaves `fillStyle` unchanged, so it is probed
+                         * from two different sentinels: a real colour lands on the same
+                         * value from both, and a bad one keeps whichever sentinel it
+                         * started from.
+                         */
+                        probeCtx.fillStyle = '#000000';
+                        probeCtx.fillStyle = trimmed;
+                        const fromBlack = probeCtx.fillStyle;
+                        probeCtx.fillStyle = '#ffffff';
+                        probeCtx.fillStyle = trimmed;
+                        if (fromBlack === probeCtx.fillStyle) {
+                            probeCtx.clearRect(0, 0, 1, 1);
+                            probeCtx.fillRect(0, 0, 1, 1);
+                            const data = probeCtx.getImageData(0, 0, 1, 1).data;
+                            resolved = [data[0], data[1], data[2], data[3] / 255];
+                        }
+                    }
+                    catch {
+                        resolved = undefined;
+                    }
+                }
+                if (!resolved) {
+                    // No canvas — a policy blocking it, an exotic document. Fall back
+                    // to the legacy syntax rather than losing the measurement outright.
+                    const inside = /rgba?\(([^)]+)\)/.exec(trimmed);
+                    if (inside) {
+                        const parts = inside[1]
+                            .split(/[,/\s]+/)
+                            .filter(Boolean)
+                            .map((n) => (n.endsWith('%') ? Number(n.slice(0, -1)) / 100 : Number(n)));
+                        if (parts.length >= 3 && !parts.some((n) => Number.isNaN(n))) {
+                            resolved = [parts[0], parts[1], parts[2], parts.length > 3 ? parts[3] : 1];
+                        }
+                    }
+                }
+                colourCache.set(trimmed, resolved);
+                return resolved;
+            };
+            const luminance = (c) => {
+                const chan = (v) => {
+                    const x = v / 255;
+                    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+                };
+                return 0.2126 * chan(c[0]) + 0.7152 * chan(c[1]) + 0.0722 * chan(c[2]);
+            };
+            /** `a·fg + (1−a)·bg`, per channel. The colour a translucent band paints. */
+            const composite = (fg, bg) => {
+                const a = fg[3];
+                if (a >= 1)
+                    return fg;
+                return [
+                    a * fg[0] + (1 - a) * bg[0],
+                    a * fg[1] + (1 - a) * bg[1],
+                    a * fg[2] + (1 - a) * bg[2],
+                    1,
+                ];
+            };
+            const contrastOf = (a, b) => {
+                const la = luminance(a);
+                const lb = luminance(b);
+                const hi = Math.max(la, lb);
+                const lo = Math.min(la, lb);
+                return (hi + 0.05) / (lo + 0.05);
+            };
+            /**
+             * Split a computed `box-shadow` into its shadows.
+             *
+             * Computed style gives `rgb(…) 0px 0px 0px 2px` per shadow, comma
+             * separated — the colour first, then offset-x, offset-y, blur, spread.
+             * Commas appear inside the colour too, so the split is on commas that
+             * are not inside parentheses.
+             */
+            const splitShadows = (value) => {
+                if (!value || value === 'none')
+                    return [];
+                const parts = [];
+                let depth = 0;
+                let current = '';
+                for (const char of value) {
+                    if (char === '(')
+                        depth += 1;
+                    if (char === ')')
+                        depth -= 1;
+                    if (char === ',' && depth === 0) {
+                        parts.push(current);
+                        current = '';
+                        continue;
+                    }
+                    current += char;
+                }
+                parts.push(current);
+                return parts
+                    .map((part) => part.trim())
+                    .filter(Boolean)
+                    .map((part) => {
+                    const colour = rgb(part);
+                    const lengths = (part.replace(/rgba?\([^)]*\)/, '').match(/-?[\d.]+px/g) ?? []).map((n) => parseFloat(n));
+                    return {
+                        colour,
+                        // offset-x, offset-y, blur, spread — blur and spread are the
+                        // third and fourth, and both default to zero when omitted.
+                        blur: lengths[2] ?? 0,
+                        spread: lengths[3] ?? 0,
+                        inset: /\binset\b/.test(part),
+                    };
+                });
+            };
+            /*
+             * The colour actually painted behind an element.
+             *
+             * Walks up until something paints. A gradient or an image gives no
+             * single value, and the honest answer there is that we could not
+             * resolve it — the same answer axe's own contrast rule gives, and for
+             * the same reason. Guessing an average would be inventing a
+             * measurement.
+             */
+            const effectiveBackground = (start) => {
+                let node = start;
+                while (node) {
+                    const cs = window.getComputedStyle(node);
+                    if (cs.backgroundImage && cs.backgroundImage !== 'none') {
+                        return { unresolved: 'the background behind it is an image or a gradient' };
+                    }
+                    const colour = rgb(cs.backgroundColor);
+                    if (colour && colour[3] === 1)
+                        return { colour };
+                    if (colour && colour[3] > 0 && colour[3] < 1) {
+                        return { unresolved: 'the background behind it is semi-transparent' };
+                    }
+                    node = node.parentElement;
+                }
+                // Nothing in the chain painted: the canvas is the browser default,
+                // which we did not observe and will not assume.
+                return { unresolved: 'nothing in the ancestor chain paints a background' };
+            };
+            /*
+             * The properties a focus indicator can be drawn with, including both
+             * pseudo-elements — a custom ring built with `::after` is real, and a
+             * check that ignored it would report a violation against a page that
+             * has an indicator.
+             */
+            const snapshot = (el) => {
+                const take = (pseudo, prefix) => {
+                    const cs = window.getComputedStyle(el, pseudo);
+                    return {
+                        [`${prefix}outline`]: `${cs.outlineStyle} ${cs.outlineWidth} ${cs.outlineColor} ${cs.outlineOffset}`,
+                        [`${prefix}box-shadow`]: cs.boxShadow,
+                        [`${prefix}border`]: `${cs.borderWidth} ${cs.borderStyle} ${cs.borderColor}`,
+                        [`${prefix}background-color`]: cs.backgroundColor,
+                        [`${prefix}content`]: cs.content,
+                        [`${prefix}transform`]: cs.transform,
+                        [`${prefix}opacity`]: cs.opacity,
+                    };
+                };
+                return {
+                    ...take(null, ''),
+                    ...take('::before', '::before '),
+                    ...take('::after', '::after '),
+                };
+            };
+            const all = Array.prototype.slice.call(document.querySelectorAll(selector));
+            const candidates = all.filter((el) => {
+                if (el.hasAttribute('disabled'))
+                    return false;
+                if (el.getAttribute('aria-hidden') === 'true')
+                    return false;
+                if (el.tabIndex < 0)
+                    return false;
+                const cs = window.getComputedStyle(el);
+                if (cs.visibility === 'hidden' || cs.display === 'none')
+                    return false;
+                const rect = el.getBoundingClientRect();
+                return rect.width > 0 && rect.height > 0;
+            });
+            let truncated = candidates.length > maxElements;
+            for (const el of candidates.slice(0, maxElements)) {
+                if (performance.now() - startedAt > budgetMs) {
+                    truncated = true;
+                    break;
+                }
+                /*
+                 * Blur it first, or the "before" is already the "after".
+                 *
+                 * If the element the walk has reached is the one the test left
+                 * focused, its unfocused snapshot is taken while it is focused,
+                 * nothing appears to change, and 2.4.7 reports a page with a perfectly
+                 * good focus ring as having none. Found in a captured envelope: the
+                 * fixture page's `#tinted` button came back as a VIOLATION when the
+                 * walk ran at teardown, having correctly reported needs-review when
+                 * the same walk ran mid-test. The difference was which element
+                 * happened to hold focus.
+                 *
+                 * The reflow is forced explicitly rather than trusted: computed style
+                 * is live, but the blur and the read are in the same task.
+                 */
+                if (document.activeElement === el)
+                    el.blur();
+                void el.offsetHeight;
+                const before = snapshot(el);
+                // Scrolled into view on purpose: focusing scrolls, and the scrolled
+                // position is the state a keyboard user is actually in. Measuring
+                // before the scroll would answer a question nobody is asking.
+                el.focus();
+                if (document.activeElement !== el)
+                    continue;
+                checked += 1;
+                /* ---- 2.4.7 / 2.4.13: what did focusing change, and by how much? ---- */
+                const after = snapshot(el);
+                const changed = Object.keys(after).filter((key) => after[key] !== before[key]);
+                let focusVisible = false;
+                try {
+                    focusVisible = el.matches(':focus-visible');
+                }
+                catch {
+                    // A browser without :focus-visible support cannot tell us, and the
+                    // row is treated as unable to support a violation. Never a throw.
+                }
+                const focusedStyle = window.getComputedStyle(el);
+                /*
+                 * MEASURE THE INDICATOR, BAND BY BAND.
+                 *
+                 * 2.4.13 asks two arithmetic questions: is an area of the indicator
+                 * at least as large as a 2 CSS pixel perimeter of the unfocused
+                 * component, and does that area reach 3:1 "between the same pixels
+                 * in the focused and unfocused states". Both are computable, and an
+                 * earlier version of this check declined to answer either.
+                 *
+                 * It got two things wrong, and they compounded.
+                 *
+                 * It measured only the OUTLINE, so a ring with a box-shadow layer
+                 * was written off as unmeasurable — on the reasoning that a
+                 * multi-layer indicator is not deterministic from computed style.
+                 * That is not true: an outline has a width, an offset and a colour,
+                 * a box-shadow has a spread and a colour, and every one of those is
+                 * in computed style. The bands are adjacent rectangles and their
+                 * areas are arithmetic.
+                 *
+                 * And it compared the indicator against "the colours beside it",
+                 * taking the WORST. The SC says the same pixels in the focused and
+                 * unfocused states, and it asks whether SOME area qualifies — so
+                 * taking the worst layer of a two-layer ring is exactly backwards.
+                 * The light inner band of the recommended two-layer pattern is 1:1
+                 * against the page on purpose; the dark outer band is what carries
+                 * the contrast, and the criterion is met by the dark one.
+                 *
+                 * The upshot: a focus ring built the way the guidance says to build
+                 * one was reported as needing a human, on every focusable element of
+                 * every page. Nothing about it needed a human.
+                 */
+                const rect = el.getBoundingClientRect();
+                const w = rect.width;
+                const h = rect.height;
+                /*
+                 * The SC's bar: the area a 2px band along the component's perimeter
+                 * occupies. `w·h − (w−4)(h−4)` for a 2px inset on all four sides.
+                 */
+                const requiredAreaPx = Math.max(0, Math.round(w * h - Math.max(0, w - 4) * Math.max(0, h - 4)));
+                /** Area of a band lying between `a` and `b` px outside the border box. */
+                const ringArea = (a, b) => Math.max(0, Math.round((w + 2 * b) * (h + 2 * b) - (w + 2 * a) * (h + 2 * a)));
+                /*
+                 * What a band OUTSIDE the element covered before focus: whatever the
+                 * parent paints. An approximation where the ring overlaps a sibling,
+                 * and the standard one — the alternative is reading pixels, which is
+                 * a different product.
+                 */
+                const outsideBefore = el.parentElement
+                    ? effectiveBackground(el.parentElement)
+                    : { unresolved: 'the element has no parent whose background could be resolved' };
+                const layers = [];
+                const addLayer = (kind, thicknessPx, areaPx, focusedColour, beneath) => {
+                    if (thicknessPx <= 0 || areaPx <= 0)
+                        return;
+                    if (!focusedColour) {
+                        layers.push({
+                            kind,
+                            thicknessPx,
+                            areaPx,
+                            contrast: null,
+                            unresolved: 'this band is painted in a colour that could not be parsed',
+                        });
+                        return;
+                    }
+                    // A band with zero alpha paints nothing, so it contributes no area
+                    // rather than an unmeasurable one.
+                    if (focusedColour[3] === 0)
+                        return;
+                    if (!beneath.colour) {
+                        layers.push({
+                            kind,
+                            thicknessPx,
+                            areaPx,
+                            contrast: null,
+                            unresolved: beneath.unresolved ?? 'what this band covers could not be resolved',
+                        });
+                        return;
+                    }
+                    /*
+                     * A TRANSLUCENT band composites onto what it covers, and the
+                     * result is arithmetic rather than a judgement: `a·fg + (1−a)·bg`.
+                     * Declining to measure it was the same mistake as declining to
+                     * measure a two-layer ring — a component library that draws its
+                     * focus ring at 50% alpha (Tailwind's `ring-ring/50`, say) is
+                     * perfectly measurable against a known ground.
+                     */
+                    const painted = composite(focusedColour, beneath.colour);
+                    layers.push({
+                        kind,
+                        thicknessPx,
+                        areaPx,
+                        contrast: contrastOf(painted, beneath.colour),
+                    });
+                };
+                /* --- the outline band --- */
+                let rowUnresolved;
+                if (focusedStyle.outlineStyle === 'auto') {
+                    /*
+                     * The browser's OWN ring. Its painted geometry is engine-specific
+                     * and is not what `outline-width` reports — Chrome says 1px for a
+                     * ring it draws as two bands — so this is the one thing here that
+                     * genuinely cannot be measured from computed style. Named as such
+                     * rather than guessed at.
+                     */
+                    rowUnresolved =
+                        "the indicator is the browser's own ring (outline-style: auto), whose painted " +
+                            'geometry is engine-specific and is not what outline-width reports';
+                }
+                else if (focusedStyle.outlineStyle !== 'none') {
+                    const width = parseFloat(focusedStyle.outlineWidth) || 0;
+                    const offset = parseFloat(focusedStyle.outlineOffset) || 0;
+                    // A negative offset draws the outline OVER the element, so what it
+                    // covers is the element's own background rather than the parent's.
+                    const beneath = offset < 0 ? effectiveBackground(el) : outsideBefore;
+                    addLayer('outline', width, ringArea(Math.max(0, offset), Math.max(0, offset) + width), rgb(focusedStyle.outlineColor), beneath);
+                }
+                /* --- the box-shadow bands --- */
+                for (const shadow of splitShadows(focusedStyle.boxShadow)) {
+                    if (shadow.inset)
+                        continue;
+                    if (shadow.blur > 0) {
+                        // A blurred edge is a gradient, so the band has no single colour
+                        // and no crisp extent. The solid core could be approximated; a
+                        // measurement nobody can reproduce is worse than saying so.
+                        layers.push({
+                            kind: 'box-shadow',
+                            thicknessPx: shadow.spread,
+                            areaPx: ringArea(0, shadow.spread),
+                            contrast: null,
+                            unresolved: 'this band is blurred, so it has no single colour or crisp extent',
+                        });
+                        continue;
+                    }
+                    addLayer('box-shadow', shadow.spread, ringArea(0, shadow.spread), shadow.colour, outsideBefore);
+                }
+                /* --- a border that changed colour --- */
+                const borderWidth = parseFloat(focusedStyle.borderTopWidth) || 0;
+                if (borderWidth > 0 && before['border'] !== after['border']) {
+                    const beforeBorder = rgb(String(before['border'] ?? ''));
+                    addLayer('border', borderWidth, Math.max(0, Math.round(w * h - Math.max(0, w - 2 * borderWidth) * Math.max(0, h - 2 * borderWidth))), rgb(focusedStyle.borderTopColor), beforeBorder
+                        ? { colour: beforeBorder }
+                        : { unresolved: 'the unfocused border colour could not be resolved' });
+                }
+                /* --- a background that changed --- */
+                if (before['background-color'] !== after['background-color']) {
+                    const beforeBg = rgb(String(before['background-color'] ?? ''));
+                    addLayer('background', Math.min(w, h), Math.max(0, Math.round(w * h)), rgb(focusedStyle.backgroundColor), beforeBg
+                        ? { colour: beforeBg }
+                        : { unresolved: 'the unfocused background colour could not be resolved' });
+                }
+                /*
+                 * A ring drawn with a PSEUDO-ELEMENT is the one remaining geometry
+                 * computed style cannot give us. `getComputedStyle(el, '::after')`
+                 * has its colours and its inset, but a pseudo-element has no
+                 * `getBoundingClientRect`, so its painted box needs layout we cannot
+                 * ask for. Real indicator, unmeasurable area — needs-review, and
+                 * narrowly, rather than the whole multi-layer case it used to sweep
+                 * up with it.
+                 */
+                if (layers.length === 0 &&
+                    !rowUnresolved &&
+                    changed.some((key) => key.startsWith('::'))) {
+                    rowUnresolved =
+                        'the indicator is drawn with a ::before or ::after pseudo-element, which has no ' +
+                            'box we can measure from computed style';
+                }
+                const qualifyingAreaPx = layers
+                    .filter((layer) => layer.contrast !== null && layer.contrast >= 3)
+                    .reduce((total, layer) => total + layer.areaPx, 0);
+                indicators.push({
+                    selector: describe(el),
+                    changed,
+                    focusVisible,
+                    requiredAreaPx,
+                    layers,
+                    qualifyingAreaPx,
+                    ...(rowUnresolved ? { unresolved: rowUnresolved } : {}),
+                });
+                /* ---------------- 2.4.11 / 2.4.12: what covers it ---------------- */
+                /*
+                 * Corner samples are inset past the BORDER RADIUS, not by a pixel.
+                 *
+                 * A point one pixel inside the bounding box's corner is OUTSIDE a
+                 * rounded element — nothing is painted there, `elementFromPoint`
+                 * returns whatever is behind, and the check reports the element as
+                 * partly covered by its own background. On a page of rounded buttons
+                 * and cards that is every element, and 2.4.12 fails everywhere.
+                 *
+                 * Found on this repository's own marketing site, where the skip link
+                 * — a rounded box sitting over the header on purpose, at z-index 100
+                 * — was reported as covered by the header behind it. The middle of
+                 * the link hit-tested as the link and its bottom-right corner did
+                 * not, which is the signature of a radius rather than of an overlay.
+                 *
+                 * The edge midpoints need no inset: a radius never reaches them.
+                 */
+                const radius = (value) => {
+                    const trimmed = value.split(' ')[0] ?? '0';
+                    if (trimmed.endsWith('%')) {
+                        return (Number(trimmed.slice(0, -1)) / 100) * Math.min(rect.width, rect.height);
+                    }
+                    return parseFloat(trimmed) || 0;
+                };
+                const focusedCs = window.getComputedStyle(el);
+                const cornerRadius = Math.max(radius(focusedCs.borderTopLeftRadius), radius(focusedCs.borderTopRightRadius), radius(focusedCs.borderBottomLeftRadius), radius(focusedCs.borderBottomRightRadius));
+                /*
+                 * SAMPLE THE LINE BOXES, NOT THE BOUNDING BOX.
+                 *
+                 * `getBoundingClientRect()` of an inline element that WRAPS is the
+                 * union of its line boxes, and a union is not a shape. A link that
+                 * breaks after its first word has a union spanning both lines, most
+                 * of whose area belongs to the text around it — so the sample grid
+                 * puts points on that text and the check hit-tests something it was
+                 * never over.
+                 *
+                 * The ancestor guard below does not save it, because what is at those
+                 * points is a SIBLING: on this repository's own accessibility page at
+                 * 390 CSS pixels, the top-edge midpoint of a wrapped link landed on a
+                 * `<strong>` earlier in the same paragraph. The strong paints no
+                 * background, so it could not be shown to be opaque, and the link was
+                 * reported as needing a person to judge whether its focus ring was
+                 * still visible. The ring was entirely visible; nothing was over it
+                 * at all. Four such findings across two surfaces, in a run that was
+                 * otherwise clean, and none of them visible at 1280 — where the link
+                 * fits on one line and the union IS its shape.
+                 *
+                 * `getClientRects()` returns one rect per line box, so every point
+                 * built from them is on the element. For anything that does not wrap
+                 * it returns a single rect equal to the bounding box and nothing
+                 * about this changes.
+                 *
+                 * At most three boxes, largest first. A paragraph-length link at 320
+                 * can wrap eight times, and nine hit tests per line is a cost with no
+                 * answer attached to it — the widest lines are where an overlay would
+                 * be found anyway.
+                 */
+                const boxes = Array.from(el.getClientRects())
+                    .filter((box) => box.width > 0 && box.height > 0)
+                    .sort((a, b) => b.width * b.height - a.width * a.height)
+                    .slice(0, 3);
+                const sampleBoxes = boxes.length > 0 ? boxes : [rect];
+                const points = [];
+                for (const box of sampleBoxes) {
+                    const inset = Math.min(cornerRadius, box.width / 2 - 1, box.height / 2 - 1) + 1;
+                    const x0 = box.left + inset;
+                    const x1 = box.left + box.width / 2;
+                    const x2 = box.right - inset;
+                    const y0 = box.top + inset;
+                    const y1 = box.top + box.height / 2;
+                    const y2 = box.bottom - inset;
+                    points.push([x0, y0], [x1, box.top + 1], [x2, y0], [box.left + 1, y1], [x1, y1], [box.right - 1, y1], [x0, y2], [x1, box.bottom - 1], [x2, y2]);
+                }
+                let sampled = 0;
+                let covered = 0;
+                let coveredAmbiguously = 0;
+                let by;
+                for (const [x, y] of points) {
+                    // Outside the viewport: not occlusion by another element, so it is
+                    // not evidence either way. Counted as unsampled rather than clean.
+                    if (x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight)
+                        continue;
+                    const hit = document.elementFromPoint(x, y);
+                    if (!hit)
+                        continue;
+                    sampled += 1;
+                    // An ancestor or a descendant is the element's own box, not a
+                    // cover. A label wrapping its input hit-tests as the label, and
+                    // treating that as occlusion would flag every well-formed form.
+                    if (hit === el || el.contains(hit) || hit.contains(el))
+                        continue;
+                    const cover = coverer(hit, el);
+                    if (cover.opaque) {
+                        covered += 1;
+                        by = by ?? cover.element;
+                    }
+                    else {
+                        coveredAmbiguously += 1;
+                        by = by ?? cover.element;
+                    }
+                }
+                if (sampled === 0 || !by)
+                    continue;
+                const positioned = window.getComputedStyle(by).position;
+                const row = {
+                    selector: describe(el),
+                    by: describe(by),
+                    positioned,
+                    entirely: covered === sampled,
+                };
+                if (covered > 0)
+                    obscured.push(row);
+                else if (coveredAmbiguously > 0)
+                    ambiguous.push(row);
+            }
+            // Put the page back where the test left it. Focus handlers that already
+            // fired cannot be put back, which is why this only runs at teardown.
+            if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+                previouslyFocused.focus();
+            }
+            else if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
+            window.scrollTo(scrollX, scrollY);
+            return { checked, found: candidates.length, truncated, obscured, ambiguous, indicators };
+        }, { selector: FOCUSABLE, maxElements: MAX_ELEMENTS, budgetMs: BUDGET_MS });
+    }
+    catch {
+        // Never throws into a customer's test, and never reports a guess in place
+        // of an answer: a walk that could not run produces no evidence at all.
+        return [];
+    }
+    return focusEvidence(walk, target);
+}
+/**
+ * The verdict, as a pure function of the walk.
+ *
+ * 2.4.11 is AA and always assessed; 2.4.12 is AAA and emitted only when the
+ * run targets it — the same scoping as the in-page rule pack and axe's own
+ * three AAA rules.
+ */
+export function focusEvidence(walk, target) {
+    return [
+        minimum(walk),
+        focusVisible(walk),
+        ...(target === 'AAA' ? [enhanced(walk), focusAppearance(walk)] : []),
+    ];
+}
+const MINIMUM_WCAG = { criteria: ['2.4.11'], level: 'AA', versionTags: [] };
+const ENHANCED_WCAG = { criteria: ['2.4.12'], level: 'AAA', versionTags: [] };
+/**
+ * 2.4.11: a violation only where the focused element was covered ENTIRELY, by
+ * something opaque. Anything less is not this criterion's failure — it is
+ * 2.4.12's — and reporting it here would fail a page at AA for something AA
+ * permits.
+ */
+function minimum(walk) {
+    if (walk.checked === 0) {
+        return { inapplicable: { ruleId: FOCUS_OBSCURED_RULE_ID, wcag: MINIMUM_WCAG } };
+    }
+    const hidden = walk.obscured.filter((row) => row.entirely);
+    if (hidden.length > 0) {
+        return {
+            finding: {
+                ruleId: FOCUS_OBSCURED_RULE_ID,
+                status: 'violation',
+                impact: 'serious',
+                wcag: MINIMUM_WCAG,
+                helpUrl: FOCUS_NOT_OBSCURED_MINIMUM_HELP_URL,
+                evidence: { failureSummary: summarise(hidden, 'entirely hidden', walk) },
+                targets: { nodeCount: hidden.length, ...sanitiseSelectors(hidden.map((r) => r.selector)) },
+            },
+        };
+    }
+    // Ambiguous stacking is needs-review, never a pass and never a fail — the
+    // same discipline the target-size rule uses for its exceptions.
+    if (walk.ambiguous.length > 0) {
+        return {
+            finding: {
+                ruleId: FOCUS_OBSCURED_RULE_ID,
+                status: 'incomplete',
+                impact: 'moderate',
+                wcag: MINIMUM_WCAG,
+                helpUrl: FOCUS_NOT_OBSCURED_MINIMUM_HELP_URL,
+                evidence: { failureSummary: ambiguousSummary(walk.ambiguous) },
+                targets: {
+                    nodeCount: walk.ambiguous.length,
+                    ...sanitiseSelectors(walk.ambiguous.map((r) => r.selector)),
+                },
+            },
+        };
+    }
+    return { pass: { ruleId: FOCUS_OBSCURED_RULE_ID, nodeCount: walk.checked, wcag: MINIMUM_WCAG } };
+}
+/** 2.4.12: a violation where ANY part of the focused element was covered. */
+function enhanced(walk) {
+    if (walk.checked === 0) {
+        return { inapplicable: { ruleId: FOCUS_OBSCURED_ENHANCED_RULE_ID, wcag: ENHANCED_WCAG } };
+    }
+    if (walk.obscured.length > 0) {
+        return {
+            finding: {
+                ruleId: FOCUS_OBSCURED_ENHANCED_RULE_ID,
+                status: 'violation',
+                impact: 'serious',
+                wcag: ENHANCED_WCAG,
+                helpUrl: FOCUS_NOT_OBSCURED_ENHANCED_HELP_URL,
+                evidence: { failureSummary: summarise(walk.obscured, 'partly or entirely covered', walk) },
+                targets: {
+                    nodeCount: walk.obscured.length,
+                    ...sanitiseSelectors(walk.obscured.map((r) => r.selector)),
+                },
+            },
+        };
+    }
+    if (walk.ambiguous.length > 0) {
+        return {
+            finding: {
+                ruleId: FOCUS_OBSCURED_ENHANCED_RULE_ID,
+                status: 'incomplete',
+                impact: 'moderate',
+                wcag: ENHANCED_WCAG,
+                helpUrl: FOCUS_NOT_OBSCURED_ENHANCED_HELP_URL,
+                evidence: { failureSummary: ambiguousSummary(walk.ambiguous) },
+                targets: {
+                    nodeCount: walk.ambiguous.length,
+                    ...sanitiseSelectors(walk.ambiguous.map((r) => r.selector)),
+                },
+            },
+        };
+    }
+    return {
+        pass: {
+            ruleId: FOCUS_OBSCURED_ENHANCED_RULE_ID,
+            nodeCount: walk.checked,
+            wcag: ENHANCED_WCAG,
+        },
+    };
+}
+const VISIBLE_WCAG = { criteria: ['2.4.7'], level: 'AA', versionTags: [] };
+const APPEARANCE_WCAG = { criteria: ['2.4.13'], level: 'AAA', versionTags: [] };
+/**
+ * WCAG 2.4.7 Focus Visible (AA): does anything visibly change on focus?
+ *
+ * The commonest real failure on the web, and one `scripts/check-colours.mjs`
+ * already bans in our own source — `outline: none` with nothing replacing it.
+ * That gate does not travel to a customer, and it cannot see a utility class or
+ * a component library defeating the ring without anyone writing `outline: none`
+ * anywhere. This is the runtime version of the same rule, in their product.
+ *
+ * Two things it declines to call, both for the same reason: we can only report
+ * what we could actually observe.
+ *
+ * A row where `:focus-visible` did not match is **needs-review, never a
+ * violation.** A great many sites style `:focus-visible` only, and a
+ * programmatic `focus()` does not always match it — so "nothing changed" from
+ * a script-driven focus is a weaker claim than "a keyboard user sees nothing",
+ * and only the second one is a failure of this criterion.
+ *
+ * A row whose ONLY change is `background-color` is also needs-review: that is
+ * as likely to be a hover style leaking as a deliberate indicator, and we
+ * cannot attribute it.
+ */
+function focusVisible(walk) {
+    if (walk.indicators.length === 0) {
+        return { inapplicable: { ruleId: FOCUS_VISIBLE_RULE_ID, wcag: VISIBLE_WCAG } };
+    }
+    const silent = walk.indicators.filter((row) => row.changed.length === 0);
+    const invisible = silent.filter((row) => row.focusVisible);
+    const unobserved = silent.filter((row) => !row.focusVisible);
+    const backgroundOnly = walk.indicators.filter((row) => row.changed.length === 1 && row.changed[0] === 'background-color');
+    if (invisible.length > 0) {
+        return {
+            finding: {
+                ruleId: FOCUS_VISIBLE_RULE_ID,
+                status: 'violation',
+                impact: 'serious',
+                wcag: VISIBLE_WCAG,
+                helpUrl: FOCUS_VISIBLE_HELP_URL,
+                evidence: {
+                    failureSummary: `Nothing in the computed style changes when ${invisible[0].selector} receives ` +
+                        `focus — no outline, box-shadow, border, background or pseudo-element — and ` +
+                        `:focus-visible matched, so this is what a keyboard user gets. ` +
+                        `${invisible.length} element(s) affected. Fix: give focus an indicator; if ` +
+                        `outline is being cleared, replace it rather than removing it.` +
+                        bounds(walk),
+                },
+                targets: {
+                    nodeCount: invisible.length,
+                    ...sanitiseSelectors(invisible.map((row) => row.selector)),
+                },
+            },
+        };
+    }
+    const review = [...unobserved, ...backgroundOnly];
+    if (review.length > 0) {
+        const why = unobserved.length > 0
+            ? `:focus-visible did not match when we focused ${unobserved[0].selector} from script, so ` +
+                `an indicator styled for :focus-visible only would not have applied — "nothing changed" ` +
+                `here is not the same claim as "a keyboard user sees nothing"`
+            : `the only thing that changes on focus for ${backgroundOnly[0].selector} is its ` +
+                `background colour, which is as likely to be a hover style leaking as a deliberate indicator`;
+        return {
+            finding: {
+                ruleId: FOCUS_VISIBLE_RULE_ID,
+                status: 'incomplete',
+                impact: 'moderate',
+                wcag: VISIBLE_WCAG,
+                helpUrl: FOCUS_VISIBLE_HELP_URL,
+                evidence: {
+                    failureSummary: `Not reported as a failure because ${why}. ${review.length} element(s) affected. ` +
+                        `A person needs to tab to these and look.` +
+                        bounds(walk),
+                },
+                targets: {
+                    nodeCount: review.length,
+                    ...sanitiseSelectors(review.map((row) => row.selector)),
+                },
+            },
+        };
+    }
+    return {
+        pass: { ruleId: FOCUS_VISIBLE_RULE_ID, nodeCount: walk.indicators.length, wcag: VISIBLE_WCAG },
+    };
+}
+/**
+ * WCAG 2.4.13 Focus Appearance (AAA): is the indicator thick enough and does
+ * it contrast enough?
+ *
+ * The SC's two numbers are normative — at least the area of a 2 CSS pixel
+ * perimeter, and at least 3:1 against adjacent colours — and both are
+ * computable from the rects and the resolved colours, which is why this is a
+ * rule at all rather than a judgement.
+ *
+ * **What it will assert:** an outline present and thinner than 2px, or a
+ * measured contrast below 3:1 against colours it actually resolved. Both are
+ * deterministic and both are stated as figures in the evidence, because a
+ * finding that says "insufficient" without the number is asking to be
+ * believed rather than checked.
+ *
+ * **What it will not:** an indicator drawn with a box-shadow or a
+ * pseudo-element, whose area is not deterministic from computed style, and any
+ * row whose adjacent colour could not be resolved to a solid value — a
+ * gradient, an image, a semi-transparent stack. Those are needs-review, which
+ * is the same answer the contrast rule already gives for the same reason.
+ * Averaging a gradient would be inventing a measurement.
+ */
+function focusAppearance(walk) {
+    const indicated = walk.indicators.filter((row) => row.changed.length > 0);
+    if (indicated.length === 0) {
+        // Nothing to measure: either nothing focusable, or no indicator at all —
+        // and "there is no indicator" is 2.4.7's finding, not this one's.
+        return { inapplicable: { ruleId: FOCUS_APPEARANCE_RULE_ID, wcag: APPEARANCE_WCAG } };
+    }
+    /*
+     * The SC asks whether AN AREA of the indicator meets both conditions — not
+     * whether every band does. A two-layer ring's light band is 1:1 against the
+     * page on purpose; the dark band is what carries the contrast, and the
+     * criterion is met by the dark one. Summing the qualifying bands and
+     * comparing against the 2px perimeter is the whole test.
+     */
+    const failing = indicated.filter((row) => !hasUnmeasured(row) && row.qualifyingAreaPx < row.requiredAreaPx);
+    if (failing.length > 0) {
+        const first = failing[0];
+        return {
+            finding: {
+                ruleId: FOCUS_APPEARANCE_RULE_ID,
+                status: 'violation',
+                impact: 'moderate',
+                wcag: APPEARANCE_WCAG,
+                helpUrl: FOCUS_APPEARANCE_HELP_URL,
+                evidence: {
+                    failureSummary: `The focus indicator on ${first.selector} covers ${first.qualifyingAreaPx}px² at ` +
+                        `${APPEARANCE_MIN_CONTRAST}:1 or better, and WCAG 2.4.13 asks for at least ` +
+                        `${first.requiredAreaPx}px² — the area of a ${APPEARANCE_MIN_THICKNESS}px perimeter ` +
+                        `of the component. ${describeLayers(first)} ${failing.length} element(s) affected.` +
+                        bounds(walk),
+                },
+                targets: {
+                    nodeCount: failing.length,
+                    ...sanitiseSelectors(failing.map((row) => row.selector)),
+                },
+            },
+        };
+    }
+    /*
+     * Needs-review only where a colour or a geometry genuinely could not be
+     * resolved AND the verdict turns on it. A row that already qualifies on the
+     * bands we could measure is a pass whatever the unmeasurable one would have
+     * added — reporting it as undecided would be declining to answer a question
+     * we have already answered.
+     */
+    const undecided = indicated.filter((row) => row.qualifyingAreaPx < row.requiredAreaPx && hasUnmeasured(row));
+    if (undecided.length > 0) {
+        const first = undecided[0];
+        const why = first.unresolved ??
+            first.layers.find((layer) => layer.unresolved)?.unresolved ??
+            'a band could not be measured';
+        return {
+            finding: {
+                ruleId: FOCUS_APPEARANCE_RULE_ID,
+                status: 'incomplete',
+                impact: 'moderate',
+                wcag: APPEARANCE_WCAG,
+                helpUrl: FOCUS_APPEARANCE_HELP_URL,
+                evidence: {
+                    failureSummary: `The indicator on ${first.selector} measures ${first.qualifyingAreaPx}px² at ` +
+                        `${APPEARANCE_MIN_CONTRAST}:1 against a requirement of ${first.requiredAreaPx}px², ` +
+                        `and the shortfall turns on a band we could not measure: ${why}. ` +
+                        `${undecided.length} element(s) affected${uniformReason(undecided)
+                            ? ', all for the same reason — one question about one component, not ' +
+                                `${undecided.length} separate ones`
+                            : ''}. A person measures that band.` +
+                        bounds(walk),
+                },
+                targets: {
+                    nodeCount: undecided.length,
+                    ...sanitiseSelectors(undecided.map((row) => row.selector)),
+                },
+            },
+        };
+    }
+    return {
+        pass: { ruleId: FOCUS_APPEARANCE_RULE_ID, nodeCount: indicated.length, wcag: APPEARANCE_WCAG },
+    };
+}
+/** Did anything about this row resist measurement — the row, or any band? */
+function hasUnmeasured(row) {
+    return row.unresolved !== undefined || row.layers.some((layer) => layer.unresolved !== undefined);
+}
+/**
+ * The bands, in the finding, because a measurement nobody can check is an
+ * assertion. "outline 3px at 21.4:1, box-shadow 2px at 1.1:1" tells somebody
+ * which band to change; "insufficient indicator" tells them to guess.
+ */
+function describeLayers(row) {
+    if (row.layers.length === 0)
+        return 'No measurable band was painted.';
+    return ('Measured: ' +
+        row.layers
+            .map((layer) => `${layer.kind} ${layer.thicknessPx}px covering ${layer.areaPx}px² at ` +
+            (layer.contrast === null ? 'an unresolved contrast' : `${layer.contrast.toFixed(2)}:1`))
+            .join('; ') +
+        '.');
+}
+/**
+ * Do every undecided row share one reason? See the note on the occlusion
+ * walk's own version: a design system has one focus ring, so a hundred rows
+ * are one question.
+ */
+function uniformReason(rows) {
+    if (rows.length < 2)
+        return false;
+    const reason = (row) => row.unresolved ?? row.layers.find((layer) => layer.unresolved)?.unresolved;
+    const first = reason(rows[0]);
+    return rows.every((row) => reason(row) === first);
+}
+/**
+ * The truncation sentence, shared by every finding this file emits.
+ *
+ * A bounded walk reported as a complete one is a figure that looks like a
+ * statement about the page and is a statement about part of it.
+ */
+function bounds(walk) {
+    return walk.truncated
+        ? ` The walk stopped after ${walk.checked} of ${walk.found} focusable elements, so this is not the whole page.`
+        : '';
+}
+/**
+ * Names the coverer, because a finding that says only "something covered it"
+ * is a worse version of no finding: nobody can act on it, and the reader's
+ * first question is the one it refuses to answer.
+ */
+function summarise(rows, how, walk) {
+    const first = rows[0];
+    const positioned = first.positioned === 'fixed' || first.positioned === 'sticky'
+        ? ` (position: ${first.positioned}, which is the usual cause)`
+        : '';
+    const others = rows.length > 1 ? ` and ${rows.length - 1} more element(s)` : '';
+    const bounded = walk.truncated
+        ? ` The walk stopped after ${walk.checked} of ${walk.found} focusable elements, so this is not the whole page.`
+        : '';
+    return (`When focused, ${first.selector} is ${how} by ${first.by}${positioned}${others}. ` +
+        `Fix: keep the focused element clear of overlays — scroll-padding-top and ` +
+        `scroll-padding-bottom sized to the sticky element are usually enough, or ` +
+        `move the overlay out of the way when focus enters the area behind it.` +
+        bounded);
+}
+function ambiguousSummary(rows) {
+    const first = rows[0];
+    return (`When focused, ${first.selector} sits behind ${first.by}, which is translucent or paints ` +
+        `no background of its own — whether the focus indicator is still visible is a judgement, ` +
+        `so this is not reported as a failure. ${rows.length} element(s) affected. ` +
+        `A person needs to focus these and look.`);
+}
+//# sourceMappingURL=focus.js.map