[Visual Requirement - Bot Webchat - Home]: Luminosity ratio of Keyboard visual focus indicator for 'upload file' and 'send' buttons is less than 3:1.

[KattaBhargav]

User Experience:
If the luminosity ratio of keyboard visual focus indicator is less than 3:1 for controls, then it can confuse the user having visual impairment to identify the control in low vision.

Repro Steps:

1. Open URL: https://microsoft.github.io/BotFramework-WebChat/05.custom-components/l.disable-adaptive-cards/
2. Page with Bot opens, Follow the dialog on this bot, and test the Adaptive Cards at the end of the dialog
3. Check and verify that step 2 is accessible and MAS compliant.

Actual Result:
Luminosity ratio of Keyboard visual focus indicator for 'upload file' and 'send' buttons is less than 3:1.

Expected Result:
Luminosity ratio of Keyboard visual focus indicator for 'upload file' and 'send' buttons should be equal or greater than 3:1.

MAS Reference:
WCAG1.4.11 – Non-text Contrast

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: https://microsoft.github.io/BotFramework-WebChat/05.custom-components/l.disable-adaptive-cards/

[KattaBhargav]

#A11yMAS;#A11ySev2;#HCL;#WCAG1.4.11;#Accessibility;#Win10-Edge(Chromium);#BotFrameworkWebChat-Aug21;#A11yWCAG2.1;#Closed;#Regression;

[compulim]

Agree this need to be fixed.

Seems dupe of #4014. If yes, please close one of them, otherwise, can you describe differences between these two bugs?

[compulim]

After discuss with our design team, we will update the style of the upload/send button to more aligned with Fluent UI Icon Button, particularly:

• When focus via keyboard (:focus-visible), will add a 1px dark border
• On mouse hover, will have a light-dim background
• When clicked (both keyboard or mouse), will have a dim background

Note :focus-visible is not available on IE11 and the WCIG polyfill would bring too much pollution. We need to write a new hook. We have one in the work for another accessibility issues and it need to be expanded for this work.

[compulim]

Copying style from Fluent UI.

Normal styles.

Styles for :hover and :active.

Styles for :focus-visible.

[compulim]

I am keeping this open but resolved.

[compulim]

Status: Fixed

We have fixed this in PR #4035. Here is the quick demo after the fix.

[v-shikch]

It seems as a duplicate issue of above mentioned bug of #4014. Hence closing this bug will further track with the linked dup bug

[compulim]

Thanks @v-shikch and @KattaBhargav. Appreciated.