Skip to content

Restore docs home page skip-link target and prevent mobile overflow from hidden labels#45224

Draft
pelikhan with Copilot wants to merge 3 commits into
mainfrom
copilot/multi-device-docs-testing-report-2026-07-12
Draft

Restore docs home page skip-link target and prevent mobile overflow from hidden labels#45224
pelikhan with Copilot wants to merge 3 commits into
mainfrom
copilot/multi-device-docs-testing-report-2026-07-12

Conversation

Copilot AI commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

The docs home page regressed in two user-visible ways on mobile: the rendered page no longer exposed the expected Starlight skip-link target, and hidden accessibility labels were still contributing to horizontal overflow on narrow phone viewports.

  • Skip link / main landmark

    • Switched the custom skip link back to #starlight__main so it matches the Starlight page structure expected by downstream checks and assistive tooling.
    • Updated the client-side landmark enhancer to set id="starlight__main" on <main> and preserve programmatic focus with tabindex="-1".
    • Added a hidden #main-content alias inside <main> to keep older internal references working without changing the visible structure.
  • Mobile overflow containment

    • Added a global .sr-only utility rule in docs CSS so visually hidden text is clipped correctly and cannot expand scroll width.
    • This specifically addresses long hidden anchor labels generated around section headings, which could still widen the page on 360–428px layouts.
  • Regression coverage

    • Expanded the responsive Playwright matrix to include the affected narrow phone widths.
    • Added a focused regression check for the skip-link target on the home page.
    • Updated the overflow assertion to inspect the page scrolling element rather than only document.body.

Example of the restored skip-link contract:

<a href="#starlight__main" class="skip-link">Skip to main content</a>
<main id="starlight__main" tabindex="-1">
  <span id="main-content" class="sr-only" aria-hidden="true"></span>
  ...
</main>

Copilot AI and others added 2 commits July 13, 2026 07:56
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix critical issues in multi-device testing report Restore docs home page skip-link target and prevent mobile overflow from hidden labels Jul 13, 2026
Copilot AI requested a review from pelikhan July 13, 2026 08:15
@github-actions

Copy link
Copy Markdown
Contributor

Thanks for the clear write-up and for calling out the mobile skip-link and overflow regressions specifically. This looks aligned and focused: the docs accessibility fix is paired with targeted Playwright regression coverage, and I did not see any new dependencies added.

The PR description is strong and the included tests make this easy to review. LGTM from a contribution-guidelines perspective.

Generated by ✅ Contribution Check · 101 AIC · ⌖ 9.12 AIC · ⊞ 6.2K ·

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🔍 Multi-Device Docs Testing Report - 2026-07-12

2 participants