Issue Summary

On this page, the focus indicator is not clearly visible on the closed folder.

Steps to Reproduce

1. Open the "Create pull request" page.
2. Navigate to the Diff tab present in the main content area.
3. Use the Tab key to navigate to the mentioned instance.
4. Observe there is no clear focus indicator present.

Screen Recording

Screen Recording 2024-02-22 at 5.14.40 PM.mov

Screenshot

Actual Results

Focus is not clearly visible for the "Closed folders” such as "aio", "docs", "integration" and so on present in the Diff tab. A clear focus indicator is not visually available as the 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 links using a keyboard.

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

Code Snippet

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

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest