-
Bug
-
Resolution: Fixed
-
Low
-
4.20.0, 5.3.1
-
Severity 3 - Minor
-
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
- Navigate to the "Help Center" and activate it.
- Navigate to the main content and activate any link from the "Get IT Help", "Set up VPN to the office", etc options.
- Navigate to the "Description" input field.
- 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:
- mentioned in
-
Page Failed to load
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|