Issue Summary

Focus is not clearly visible on "Bold", "Italic", "Underline" and so on interactive elements present in the toolbar 

Note: A similar issue is observed in all modal dialogs present on the "Create new space" page.

Steps to Reproduce

1. Navigate to the header and activate the "Create" link.
2. Use the Tab key to navigate to the mentioned interactive elements in the toolbar.
3. Observe there is no clear focus indicator present.

Screen Recording

Screen Recording 2023-08-16 at 5.49.07 PM.mov

Actual Results

Focus is not clearly visible for the "Bold", "Italic", "Underline" and so on interactive elements present in the toolbar. A clear focus indicator is not visually available as user tabs through these links using a keyboard.
As a result, users with learning and mobility impairments as well as those with low vision will not be able to easily find out which element currently has the focus.

Expected Results

The focus indicator should be clearly visible while navigating between the interactive elements using a keyboard. Set the CSS outline property for the interactive elements to ensure that a clear focus indication is available for users.

Workaround

Not available

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest