Example Summary - Step 1 : Focus indicator is missing.

Issue Summary

No focus indicator is visually available for the “Text styles”, "Bold", and so on buttons when the user navigates using a keyboard

Element Name: The toolbars Text Styles, More Formatting, etc., and their menus

Location of the element: Description field

Issue details: The toolbars Text Styles, More Formatting, etc., and their menus are missing visible focus indicators.

Steps to Reproduce

1. Navigate to the "Help Center" and activate it.
2.  Navigate to the main content and activate any link from the "Get IT Help", "Set up VPN to the office", etc options.
3. Navigate to the "Description" input field.
4. Observe that the focus indicator is not for the mentioned buttons.

Actual Results

When the user navigates to the “Text styles”, "Bold", and so on buttons the focus is not visible.

As a result, low-vision, elderly and keyboard-only users would be unable to determine the current interactive element on which the focus is moved, resulting in a bad user experience.

Expected Results

When the users navigate to the “Text styles”, "Bold", and so on buttons should have a clear focus ring while making sure that focus indicators or change of color that is used to indicate the focus are having a minimum color contrast ratio of 3:1.

This will help all users while accessing the page content, especially users with visual, mobility, and learning impairments.

Code Snippet:

css-18ky3mu:focus 
{    
background: none;    
box-shadow: 0 0 0 2px var(--ds-border-focus,#4C9AFF);    
transition-duration: 0s, 0.2s;    
outline: 2px solid #000000 !important;   
color: var(--ds-text-highEmphasis,#42526E) !important;
}

Screen Recording

Screen Recording 2022-11-09 at 6.04.27 PM.mov

Workaround

Not Available

Bug Ref: 749835

Bulldog Ref: