Skip to content

After resizing text, the Docs page navigation overlaps the main navigation: A11y_TypeSpec_Resize Text #10796

New issue
New issue
Closed
Closed
After resizing text, the Docs page navigation overlaps the main navigation: A11y_TypeSpec_Resize Text#10796
Assignees
markcowl
Labels
bugSomething isn't workingmeta:websiteTypeSpec.io updatestriaged:core
Milestone
[2026] August

Description

@kupatkar99
kupatkar99
opened on May 26, 2026

Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification.
"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags:

#A11yTCS; A11yMAS; #A11ySev2; #DesktopWeb; #Win11; #Chrome; #E2E_TypeSpec_Web_May2026; #WCAG1.4.4; #TypeSpec; #Resize text;

Issue Subcategory:

Overlapping content at zoom.

User Experience:

Enlarged text obscures other elements, making the UI unusable. Users cannot read overlapping content or interact with hidden controls.

Pre-requisites:

Change system resolution to 1280*768 and zoom browser size to 200%.

Repro Steps:

Launch url https://typespec.io/docs/Get started.

Actual Result:

When text is resized (zoomed), the Docs page navigation controls overlap with the main navigation controls. This causes layout issues and prevents proper interaction with the main navigation.

Expected Result:

All navigation elements should adjust properly without overlapping when text is resized.

How to Fix:

Use flexible layouts (CSS flexbox or grid) that reflow content. Avoid fixed-height containers for text content. Test at 200% zoom as part of QA.

Environment details:

Application Name: TypeSpec
URL: typespec.io
Edition Windows 11 Enterprise
Version 25H2 OS build 26200.8390
Chrome Version 148.0.7778.168 (Official Build) (64-bit)

Attachment:

A11y_Typespec_Resize.text.mp4

Activity

  1. microsoft-github-policy-service
    added
    needs-area
    on May 26, 2026
  2. github-actions
    added
    bugSomething isn't working
    meta:websiteTypeSpec.io updates
    on May 26, 2026

  3. github-actions commented on May 26, 2026

    @github-actions
    github-actionsBot
    on May 26, 2026 – with GitHub Actions
    Contributor

    🎯 Issue Triage

    When the browser is zoomed to 200% at 1280×768 resolution, the Docs page navigation controls overlap with the main navigation controls on typespec.io, making the UI unusable.

    Category: Bug
    Area: meta:website

    ⚠️ No reproduction code provided (this is a visual/layout accessibility bug — see the attached video and repro steps in the issue).

    🔍 Analysis
    • Affected URL: (typespec.io/redacted) started
    • WCAG criterion: 1.4.4 Resize Text — content should reflow correctly up to 200% zoom without loss of content or functionality
    • Root cause: Fixed-height or fixed-position containers for navigation elements likely don't account for larger text sizes, causing overflow and overlap at 200% zoom
    • Environment: Windows 11 / Chrome 148, 1280×768 resolution, 200% browser zoom
    • Severity: The navigation becomes inaccessible, blocking users from navigating the docs
    📝 Suggested next steps
    • Reproduce locally: open (typespec.io/redacted) at 1280×768, zoom browser to 200%
    • Audit website layout CSS for fixed-height nav containers and replace with flexible layouts (flexbox/grid)
    • Ensure sidebar and top nav use overflow: hidden or reflow correctly at large zoom levels
    • Add 200% zoom to QA/accessibility testing checklist

    Generated by Agentic Triage

  4. microsoft-github-policy-service
    removed
    needs-area
    on May 26, 2026
  5. Mark Cowlishaw (markcowl)
    self-assigned this
    on Jun 1, 2026

  6. markcowl commented on Jun 3, 2026

    @markcowl
    Mark Cowlishaw (markcowl)
    on Jun 3, 2026
    Contributor

    Mark Cowlishaw (@markcowl) Move all these accessibility issues into next sprint

  7. kupatkar99
    changed the title [-]After applying the resize text, Docs page navigation controls overlap the main navigation controls: A11y_Typespec_Resize text.[/-] [+]After resizing text, the Docs page navigation overlaps the main navigation: A11y_TypeSpec_Resize Text[/+] on Jun 5, 2026
  8. Mark Cowlishaw (markcowl)
    added this to the [2026] July milestone on Jun 8, 2026
  9. Mark Cowlishaw (markcowl)
    added
    triaged:core
    on Jun 8, 2026
  10. Mark Cowlishaw (markcowl)
    modified the milestones: [2026] July, [2026] August on Jul 14, 2026
  11. Timothee Guerin (timotheeguerin)
    added a commit that references this issue on Jul 21, 2026

    fix(website): resolve typespec.io accessibility issues (#11292)

    ae2ef77

  12. kupatkar99 commented on Jul 27, 2026

    @kupatkar99
    kupatkar99
    on Jul 27, 2026
    Author

    #Closed; #A11yFixed;
    Verified the issue in below environment:
    https://typespec.io/
    Chrome: Version 150.0.7871.182 (Official Build) (64-bit)
    issue is fixed. hence closing the bug. Please find added attachment for reference.

    10796_Fixed.mp4
  13. kupatkar99
    closed this as completedon Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingmeta:websiteTypeSpec.io updatestriaged:core

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions