On applying reflow resolution Some of the Controls present in banner section are not visible anywhere on the screen: A11y_TypeSpec_Docs_Reflow

[kupatkar99]

GIT Hub Tags:

#A11yTCS; #A11ySev1; #TypeSpec; #GH_TypeSpec_Web_Sept2025; #DesktopWeb; #A11yMAS; #WCAG1.4.10; #Reflow; #A11yWCAG2.1; #Zoom; #Win11; #FTP; #ChromiumEdge;

Environment and OS details:

Application name: typespec.io
URL: https://typespec.io/docs/
ChromiumEdge Version: 140.0.3485.66 (Official build) (64-bit)

Reproduction Steps:

1. Open url "https://typespec.io/docs/" and login with valid Credentials.
2. "TypeSpec Docs" Page will get open.
3. Zoom the page to 200% and Inspect the page.
4. Set the browser resolution 320 x Maximum height.
5. Observe the issue whether On applying reflow resolution all the Controls present in banner section are visible on the screen or not.

Actual behavior:

Some controls in the banner section of "TypeSpec Docs" page are not visible anywhere on the screen in reflow resolution.

Expected behavior:

All controls in the banner section of "TypeSpec Docs" page should remain visible and accessible after reflow resolution is applied.

User Impact:

Low vision users who rely on reflow resolution for improved visibility may have trouble accessing controls if those controls are not visible in reflow resolution.

Attachment:

8597_A11y_TypeSpec_Docs_Reflow.webm

[ccbarragan]

On resizing the screen, the global nav links (Use cases, Docs, Videos, etc) completely disappear and are no longer selectable from the collapsed menu.

1. When a user navigates to /docs, the navigation focus order should change to prioritize the docs. Recommend removing the top-level nav links.
2. On resizing the screen, ensure the same menu items that appear in the expanded nav also appear in the collapsed nav menu. Example: