Issue Summary

Keyboard focus is not clearly visible on few button elements, such as "Filter file tree", "Search Changes", and "README.md"

Steps to Reproduce

1. Open the home page.
2. Go to projects and select any one from the table.
3. Select any one repository.
4. Go to side navigation and activate the "Create pull request" link.
5. Select the "Source" and "Destination" drop downs.
6. Activate the "Continue" button.
7. Go to mention button elements and verify the focus visibility.

Screen Recording

Screen Recording 2025-03-03 at 9.02.09 AM.mov

Actual Results

Focus is not clearly visible for the "Filter file tree", "Search Changes", and "README.md" buttons. 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 and low vision will not be able to easily find out which element currently has the focus.

Expected Results

Set the CSS outline property for the mentioned links to ensure that clear focus indication is available for users.

Code Snippet (CSS)

:focus {
outline-color: black;
outline-style: auto;
outline-width: 5px;
}

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOS Sequoia Version 15.2 (24C101) 
Chrome - Version 131.0.6778.266 (Official Build) (arm64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 18.2 (20620.1.16.11.8)
JAWS- Version 2023
NVDA- Version 2020.3