docs: raise mobile table-cell touch target to 44px, add scroll-wrapper coverage tests

[Copilot]

Two low-impact warnings from the multi-device docs testing report: mobile table cells fell below the WCAG 2.5.5 AAA 44 px minimum, and there was no automated check confirming every table on the engines reference page has a scroll wrapper.

Touch target fix

docs/src/styles/custom.css — inside the @media (max-width: 640px) card layout:

/* before */
min-height: 1.5rem;   /* 24 px */
/* after */
min-height: 2.75rem;  /* 44 px – WCAG 2.5.5 AAA */

Playwright regression tests

docs/tests/mobile-responsive.spec.ts — two new tests:

• All tables wrapped – asserts count(.table-scroll-wrapper > table) === count(table) inside .sl-markdown-content on /reference/engines/ (no-JS, 768 px viewport), catching any future table that slips past the rehype plugin.
• Touch target size – evaluates getComputedStyle(td).minHeight ≥ 44 on a 390 px viewport, guarding against regression of the CSS fix.

[Copilot]

Pull request overview

Improves docs mobile accessibility and adds Playwright regressions to prevent future table responsiveness regressions on the engines reference page.

Changes:

• Increase mobile table-cell minimum height to meet the 44px WCAG 2.5.5 AAA touch target guidance.
• Add Playwright coverage to ensure all markdown tables on /reference/engines/ are wrapped in .table-scroll-wrapper.
• Add Playwright coverage to assert mobile table-cell touch target sizing doesn’t regress.

Show a summary per file

File	Description
docs/tests/mobile-responsive.spec.ts	Adds two Playwright tests for table scroll-wrapper coverage and mobile touch target sizing.
docs/src/styles/custom.css	Raises mobile table-cell min-height in the responsive card layout.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comments suppressed due to low confidence (1)

docs/tests/mobile-responsive.spec.ts:88

• Same cleanup concern here: if navigation or the assertion fails, await context.close() at the end won’t run and the context may leak. Use a try/finally to guarantee closing the context (or switch to the page/context test fixtures).

    const context = await browser.newContext({
      javaScriptEnabled: true,
      viewport: { width: 390, height: 844 },
    });
    const page = await context.newPage();

    await page.goto('/gh-aw/reference/engines/');
    await page.waitForLoadState('networkidle');

• Files reviewed: 2/2 changed files
• Comments generated: 3

[Copilot]

context.close() is only reached if all assertions pass; if an expect(...) fails earlier, this browser context may leak and affect subsequent tests. Wrap the test body in try { ... } finally { await context.close(); } (or use the built-in context fixture) so cleanup always runs.

This issue also appears on line 80 of the same file.

[Copilot]

This new test overlaps heavily with the existing "should wrap markdown tables in a scroll wrapper without JavaScript" test just above it. Consider merging them (e.g., keep the stronger count-based assertion and drop the weaker visibility-only check) to reduce redundancy and test runtime.

See below for a potential fix:

    // The rehype plugin should have added wrapper divs at build time.
    const wrapper = page.locator('.sl-markdown-content .table-scroll-wrapper').first();
    await expect(wrapper).toBeVisible();

    // The table must be a direct child of the wrapper.
    const tableInWrapper = page.locator('.sl-markdown-content .table-scroll-wrapper > table').first();
    await expect(tableInWrapper).toBeVisible();

    // Every table in markdown content should be wrapped for consistent horizontal scrolling.
    const tableCount = await page.locator('.sl-markdown-content table').count();
    expect(tableCount).toBeGreaterThan(0);

    const wrappedTableCount = await page.locator('.sl-markdown-content .table-scroll-wrapper > table').count();

[Copilot]

Using 2.75rem only guarantees a 44px minimum if the root font size is 16px; if the base font size is adjusted, the touch target could drop below 44px. To enforce the WCAG 2.5.5 44px minimum regardless of root sizing, consider min-height: 44px (or min-height: max(44px, 2.75rem) if you still want rem-based scaling).

Suggested change

	min-height: 2.75rem;
	min-height: max(44px, 2.75rem);

[github-actions]

🧪 Test Quality Sentinel Report

i️ Language scope note: The only test file modified in this PR is docs/tests/mobile-responsive.spec.ts — a TypeScript/Playwright end-to-end specification file. The Test Quality Sentinel scores Go (*_test.go) and JavaScript (*.test.cjs, *.test.js) unit tests. TypeScript Playwright specs are outside the current scoring scope and are noted but not scored.

---

Tests Detected (Outside Scoring Scope)

Test	File	Type	Notes
should wrap ALL markdown tables in a scroll wrapper on the engines reference page	docs/tests/mobile-responsive.spec.ts	TypeScript / Playwright E2E	✅ Behavioral — asserts scroll-wrapper count equals table count
should have WCAG 2.5.5-compliant touch target size for mobile table cells	docs/tests/mobile-responsive.spec.ts	TypeScript / Playwright E2E	✅ Behavioral — asserts minHeight ≥ 44px via getComputedStyle

---

Qualitative Observations

Although these tests are not scored, a quick review shows they are well-structured:

• Behavioral contracts covered: Both tests verify observable user-facing properties (DOM structure, computed CSS values) rather than internal implementation details.
• Error/edge case: tableCount > 0 guard prevents a false positive when the page has no tables. Touch-target test uses networkidle to ensure styles are applied.
• No inflation concern: 46 lines added to the test file, 1 line changed in production (custom.css). However, the tests are E2E integration-style and naturally larger than the CSS change they validate — this ratio is expected for Playwright specs.

---

Language Support

Tests analyzed:

• 🐹 Go (*_test.go): 0 tests — none changed in this PR
• 🟨 JavaScript (*.test.cjs, *.test.js): 0 tests — none changed in this PR
• 📘 TypeScript / Playwright (*.spec.ts): 2 tests detected — outside scoring scope

---

Verdict

i️ No score computed. All changed test files are TypeScript/Playwright specs, which are outside the Go/JavaScript scoring scope. The two new tests appear to be high-quality behavioral tests enforcing WCAG compliance and DOM structural invariants.

References: §25016518533

🧪 Test quality analysis by Test Quality Sentinel · ● 280.2K · ◷

[github-actions]

i️ Test Quality Sentinel: No score computed. Changed test files are TypeScript/Playwright specs (*.spec.ts), outside the Go/JavaScript scoring scope. The 2 new Playwright tests appear behaviorally sound — both assert observable user-facing properties (scroll-wrapper coverage, WCAG 44px touch target).