[Keyboard Navigation - Bot Webchat - Suggested actions ]: Keyboard focus indicator is not clearly visible on card control.

[KattaBhargav]

User Experience:
If focus indicator is not clearly visible on card controls, then users with motor disabilities who depend on keyboard for navigation will not be able to identify the focus on that control which can prevent them from performing actions which are important.

Repro Steps:

1. Open URL: Web Chat: Full-featured bundle (microsoft.github.io)
2. Web chat bundle will open.
3. Navigate on the web chat bot and enter "suggested-actions’" keyword in Type your message box, then select send button.
4. Cards related to the keyword will appear, navigate on the cards.
5. Check and verify that step 3-4 are accessible and MAS compliant.

Actual Result:
Keyboard focus indicator is not clearly visible on card control.

Expected Result:
Keyboard focus indicator should be clearly visible on card control.

MAS Reference:
WCAG2.4.7 – Focus Visible

Test Environment:
OS: Win 10 21H1
Build: OS Build 19043.1147
Browser: Edge Chromium Version 94.0.972.2 (Official build) dev (64-bit)
#URL: Web Chat: Full-featured bundle (microsoft.github.io)

[KattaBhargav]

#A11yMAS;#A11ySev2;#HCL;#WCAG2.4.7;#Accessibility;#Win10-Edge(Chromium);#BotFrameworkWebChat-Aug21;#Closed;#Regression;

[compulim]

We will update our style to align with Fluent UI Default Button. Particularly:

• Single pixel border (currently, it is double pixel border)
• Very slight roundness (possibly, 1px roundness)
• Double border when :focus-visible (focus by keyboard)
• Light-dim on mouse hover
• Dim on click via keyboard or mouse

[compulim]

Copying styles from Fluent UI.

This is the style for the button.

This is the additional style when :focus-visible is applied to the button.

When hover.

When active.

Note: inset style does not works on IE11.

[compulim]

I am keeping this open but resolved.

[compulim]

Status: Fixed

The issue is fixed in #4035.

Here is a quick recap of how it works.

[v-shikch]

As verified issue on URL: Web Chat: Full-featured bundle (microsoft.github.io) on Browser: Edge Chromium Version 96.0.1028.0 (Official build) dev (64-bit), here issue is fixed. Hence closing the bug.

[compulim]

Thanks @v-shikch and @KattaBhargav. Appreciated.