After applying Reflow The "Copy" button beside "npm install typechat" is getting truncated: A11y_TypeChat Website_TypeChat Home Screen_npm Install typechat copy button_Reflow.

[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; #Reflow; #WCAG1.4.10; #WCP; #A11yMAS; #FTP; #DesktopWeb; #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:

Method1:

1. Open the web page / screen of the web application that is to be tested
2. Open Chrome/Edge dev Inspect tools. Keyboard shortcut "Ctrl+Shift+I"
3. Ensure devtools are customized to Dock location: "undock into separate window". Minimize devtools so they are not obscuring the page.
4. Zoom the browser window of the page to be tested to 200%.
5. Adjust the browser window's height and width to the required viewport of 320px*256px. As long as devtools remain open while resizing the viewport size will be displayed in the upper right corner of the browser so the size can be verified.

Method2:

1. Change the OS display settings to a resolution of 1280x1024 at 100% dpi scaling.
2. Open the web page/ screen of the web application that is to be tested.
3. Zoom browser 400%.
4. Set the browser to full screen. Keyboard shortcut "F11" key.
5. If any browser sidebars are still visible (e.g. the Edge discover sidebar), these must be closed.

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. Observe that After applying Reflow The "Copy" button beside "npm install typechat" is getting truncated.

Actual Result:

After applying Reflow The "Copy" button beside "npm install typechat" is getting truncated.

Expected Result:

After applying Reflow The "Copy" button beside "npm install typechat" should not be getting truncated.

User Impact:

Low vision users will face difficulty if After applying Reflow The "Copy" button beside "npm install typechat" is getting truncated.

Attachment:

232_A11y_TypeChat Website_TypeChat Home Screen_npm Install typechat copy button_Reflow.webm

Open https://microsoft.github.io/TypeChat/ and reproduce the issue at 200% zoom in a 320px by 256px viewport, or at 400% zoom in full screen. Locate the TypeChat home screen implementation for the npm install typechat copy button and verify that the button remains fully visible after reflow. Done means the Copy button is no longer truncated under the reported conditions.