In high contrast Keyboard focus is not visible for all the controls present inside the Typechat page : A11y_TypeChat Website_Type chat_TypeChat Home Screen_High Contrast.

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

GitHubTags:

#A11yTCS; #A11ySev4; #TypeChat Website; #Feature_TypeChat Website_Web_April2024; #Win11; #Color contrast; #WCP; #A11yUsable; #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)

Repro Steps:

1. Hit the URL: https://microsoft.github.io/TypeChat
2. Typechat Home screen gets opened.
3. Turn on high contrast Aquatic mode and observe that keyboard focus is not at all visible for all the controls.

Actual Result:

In high contrast (Aquatic and Desert mode) Keyboard focus is not visible for all the controls present inside the Typechat page

Expected Result:

In high contrast (Aquatic and Desert mode) Keyboard focus should be visible for all the controls present inside the Typechat page.

User Impact:

Low vision users will face difficulty if In high contrast (Aquatic and Desert mode) Keyboard focus is not visible for all the controls present inside the Typechat page.

Attachment:

230_A11y_TypeChat Website_Type chat_TypeChat Home Screen_High Contrast.webm

230_A11y_TypeChat Website_Type chat_TypeChat Home Screen_High Contrast...webm

Start by opening https://microsoft.github.io/TypeChat/ in Edge on Windows 11 and reproduce the issue with Aquatic and Desert high-contrast modes. Inspect the TypeChat home page controls and their focus behavior. Done means keyboard focus is visibly indicated for every control in both modes.