[Supporting Platform - Bot Framework Web Chat - Carousel response]: In High contrast (Aquatic, Desert, Dusk, Night sky) themes, the selected button like (places to buy, Related products) on 'carousel' response article is not appearing as selected.

[pgopinadhu]

User Experience:

Color sensitive users who use high contrast themes will be affected if the selected button doesn't appear as selected in high contrast themes. Users cannot know whether the control is selected/ not and cannot understand which control is selected on the tiles if there is no difference between the selected/ non-selected buttons.

Note:

User credentials should NOT be included in the bug.

Pre-Requisite:

• Turn on High contrast themes. Path: System settings->search and select 'contrast themes'.

Repro Steps:

1. Launch URL: https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/ on edge dev.
2. Web chat page opens.
3. Press 4-tab keys to reach 'Type your message' field. Enter the "Carousel" keyword on it. Press 1-tab key to reach the 'send' button and activate it with the enter key.
4. Press 2-shift tabs and 1-down arrow to reach the received card. Activate it with enter key. Focus lands on 'Details about image 1' tile. Navigate to (places to buy/ related products) button on any tile and activate it with enter key.
5. Verify whether the selected button appears as selected in high contrast themes or not.

Actual Result:

In High contrast (Aquatic, Desert, Dusk, Night sky) themes, the selected button like (places to buy, Related products) on 'carousel' response article is not appearing as selected.
Observation:
There is no difference between the selected/ non-selected (places to buy, related products) buttons in high contrast themes.

Expected Result:

In High contrast (Aquatic, Desert, Dusk, Night sky) themes, the selected button like (places to buy, Related products) on 'carousel' response article should appear as selected. There should be difference between the selected/ non-selected controls in high contrast themes.

MAS Reference:

MAS 4.3.1 – No Disruption of Accessibility Features

Reference Links:

• Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.
• External Bug Process: If this bug belongs to external team, mark it as resolved/done and assign it back to the tester with notes on where to file/route the bug. For more information, please use this Link. “HCL Staff should not log any third-party external bugs. Should be routed to edad team”.
• Please reach out to C&AI Teams channel for any process related queries.

Test Environment:

• OS: Windows 11 Enterprise 22H2 (OS build: 22621.1555)
• Browser: Edge Version 114.0.1807.6 (Official build) dev (64-bit)
• URL: Web Chat: Full-featured bundle (microsoft.github.io)
• Matrix: Edge dev+ Narrator.

[pgopinadhu]

#A11yMAS;#A11ySev2;#MAS4.3.1;#HCL;#Accessibility;#Benchmark;#BotFrameworkWebChat-May23;
#Win11-Edge(Chromium);

[compulim]

Note to myself. After the button is clicked, the button is highlighted in normal mode. But it does not appear to be highlighted in contrast mode.