microsoft
The "Try agent mode in VS Code" text is not visible after applying Text Spacing: A11y_VisualStudioCodeServices_Docs_RemoteDevlopmentTipsAndTricks_TextSpacing.
"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
- Launch the application URL: https://code.visualstudio.com/docs/remote/troubleshooting
- Tab till "Try agent mode in VS Code" link and press enter.
- Apply Text spacing from the text spacing tool.
- 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
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:
@shindepra if you could please retest this text spacing issue at different screen sizes to confirm my thinking, however, that would be appreciated :)
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.
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.
Changes have been deployed. @shindepra can you please verify that this resolves the issue?
Argh shoot, never mind. I just checked something I had forgotten to last week and this issue is still present. I'll work on fixing it today.
I had a quick look & an easy fix is to make the width of the nav container 1360px instead of 1320px to prevent wrapping
As
El mié., 16 de julio de 2025 4:29 p. m., Hawk Ticehurst < @.***> escribió:
hawkticehurst left a comment (microsoft/vscode-docs#8432) https://github.com/microsoft/vscode-docs/issues/8432#issuecomment-3080988622
Amazing thanks @mrleemurray https://github.com/mrleemurray!
— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode-docs/issues/8432#issuecomment-3080988622, or unsubscribe https://github.com/notifications/unsubscribe-auth/BUMTY5GWETW4HYFNIZDQJQL3I273HAVCNFSM6AAAAAB6FIHWWCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTAOBQHE4DQNRSGI . You are receiving this because you are subscribed to this thread.Message ID: @.***>
