The "Try agent mode in VS Code" text is not visible after applying Text Spacing: A11y_VisualStudioCodeServices_Docs_RemoteDevlopmentTipsAndTricks_TextSpacing.

[shindepra]

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility or the Divisional Driver."

GitHub Tags

#A11ySev2; #A11yTCS; #WCAG1.4.12; #Chrome; #DesktopWeb; #Win11; #Visual Studio Code Services; #BM_VisualStudioCodeServices_Web_May2025; #TextSpacing; #A11yWCAG2.1;

Environment Details

Application Name: Visual Studio Code Services
URL: https://code.visualstudio.com/docs/remote/troubleshooting
Microsoft Windows 11 Enterprise (24H2) Build on 26100.4061
Chrome Version 136.0.7103.114 (Official Build) (64-bit)

Repro Steps

1. Launch the application URL: https://code.visualstudio.com/docs/remote/troubleshooting
2. Tab till "Try agent mode in VS Code" link and press enter.
3. Apply Text spacing from the text spacing tool.
4. Observe that The "Try agent mode in VS Code" text is not visible after applying Text Spacing

Actual Result

The "Try agent mode in VS Code" text is not visible after applying Text Spacing.

Expected Result

The "Try agent mode in VS Code" text should be visible after applying Text Spacing.

User Impact

User using text spacing will not be see the text present on the page if the "Try agent mode in VS Code" text is not visible after applying Text Spacing.

Attachment

After applying Text spacing

Before applying Text spacing

[ntrogh]

@hawkticehurst Can you look into this website issue?

[hawkticehurst]

Yep!

[hawkticehurst]

After reviewing I believe this is actually not a text spacing accessibility issue but rather an issue of the website's navbar becoming too large on tablet screen sizes and clipping the banner. There's an open issue for this problem in the VS Code website repo.

After applying the success criterion styles from WCAG 1.4.12 this is what the banner looks like at different screen sizes.

Desktop screen size:

Tablet screen size:

Mobile screen size:

[hawkticehurst]

@shindepra if you could please retest this text spacing issue at different screen sizes to confirm my thinking, however, that would be appreciated :)

[hawkticehurst]

Ahh wait, looking back I realize what the issue is now.

In the original screenshots I missed that text spacing is applied to the entire web page, so actually the issue is not with the announcement banner but rather with the navbar becoming too wide and overflowing/clipping the announcement banner.

It's still a result of the same issue with the navbar I just mentioned above, but I'll just go ahead and fix it now.

[ntrogh]

Thanks for looking into this @hawkticehurst !

[hawkticehurst]

This should be resolved with a PR that was just merged into the website repo. Waiting for the changes to be deployed before I close this out.

[hawkticehurst]

Changes have been deployed. @shindepra can you please verify that this resolves the issue?