After applying text spacing "npm install typechat" is getting truncated : A11y_TypeChat Website_Type chat_npm Install typechat copy button_Text Spacing.

[Check out Accessibility Insights!]- Identify accessibility bugs before check-in and make bug fixing faster and easier.

GitHubTags:

#A11yWCAG2.1; #A11yTCS; #A11ySev3; #TypeChat Website; #Feature_TypeChat Website_Web_April2024; #Win11; #Color contrast; #WCAG1.4.12; #WCP; #FTP; #DesktopWeb; #A11yMAS; #ChromiumEdge;.

Environment and OS details:

URL: https://microsoft.github.io/TypeChat/
Windows 11
OS build: 22631.3296
chromium Edge Version 123.0.2420.65 (Official build) (64-bit)

Prerequisites:

1. Install stylus in browser and pin it in your extensions (note, same link can be used to install in edge too): https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
2. Once added, click on it (Alt +arrow keys) and click Manage (Enter and tab to manage)
3. In the new window that opens, under Actions, click (Enter) on Write new styles. Code area will open
4. Paste the following code in that area:

• {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  }
  p {
  margin-bottom: 2em !important;
  }

5. Give it a name. Example: text spacing. Uncheck the Enabled checkbox
6. Hit save
7. To use it, you can activate the stylus plugin on the page you want to test and check the ‘Text spacing’ (if that is the name you used while creating) checkbox

Repro Steps:

1. Hit the URL: https://microsoft.github.io/TypeChat
2. Typechat Home screen gets opened.
3. Tab Navigate to "npm Install typechat copy button".
4. Turn on Text spacing and Observe that After applying text spacing "npm install typechat" is getting truncated.

Actual Result:

After applying text spacing "npm install typechat" is getting truncated.

Expected Result:

After applying text spacing "npm install typechat" should not be getting truncated.

User Impact:

Low vision users will face difficulty if After applying text spacing "npm install typechat" is getting truncated.

Attachment:

Start at the TypeChat website home screen at https://microsoft.github.io/TypeChat and reproduce the issue in Chromium Edge with the provided text-spacing settings. Locate the implementation of the "npm install typechat" copy button and verify that the command remains fully visible after text spacing is applied. Done means the command is no longer truncated for low-vision users.