[MAS2.4.7] Focus indicator is not clearly visible on 'Date' and 'Time' Flyout elements.

[priysn]

Actual Result: Focus indicator is not clearly visible on 'Date' and 'Time' Flyout elements..

Note - Same issue repro at -

1. "Show a rich message using Adaptive cards button" - Date flyout - Focus not clearly visible on flyout's elements. (Throughout the pages where Date and Time flyout's will appear)

Expected Result: Focus indicator should be clearly visible on 'Date' and 'Time' Flyout elements..

Repro Steps:

1. Open URL https://microsoft.github.io/BotFramework-WebChat/full-bundle/ in Edge browser.
2. Notice 'Upload File' and 'Send' button icons present in bottom of screen.
3. Type 'Help' in the input control at the bottom of the screen and hit enter (or click on send button).
4. Content will upload, Navigate to any "Show an Adaptive cards with all types of inputs" button by using Tab key and press Enter on it.
5. New data will upload, Navigate to date and time editable text box and press Enter key.
6. Flyout's will open, Navigate to flyout's elements by using Tab key.
7. Observe that Focus indicator is not clearly visible on 'Date' and 'Time' Flyout elements..

User Impact: If focus indicator is not clearly visible on any control then the user who is visually impaired will not able to understand the landing of focus.

MAS Reference: MAS 2.4.7 - Focus Visible (05A)

Test Environment: OS: Windows 10 OS Build: 17134.345 OS Version: 1803 Browser: Edge

Attachment: MAS2.4.7_Time and date flyout.zip

[compulim]

Adaptive Cards is using standard HTML5 controls <input type="date"> and <input type="time">. And the flyout element is owned by Edge team.

Please send this bug to Edge team.

[compulim]

Reopening so we can confirm from the accessibility team.

[corinagum]

Confirmed as external by accessibility team

[Amit8527510735]

HCL;#Accessibility;#HCL_BotFramework_WebChat;#A11yMAS;#WCAG2.4.7;