Credits: Focus outline is cut off

[wildworks]

On the credits page, when I focus on the Noteworthy Contributors user, the outline is cut off.

On Windows OS, the result is as follows:

• Chrome cuts the left side to the outline.
• Firefox displays a portion of the outline above the avatar image.

[wildworks]

Chrome

[wildworks]

firefox

Corrected the CSS styles

[tejadev]

Css fix to the focus outline.

Code here:

.about__section a:active, .about__section a:focus, .about__section a:hover {
    color: var(--accent-1);
    text-decoration: none;
    outline: 1px solid #2271b1;
}

[ivanzhuck]

I think the whole card of contributor is a link (picture + name). So the focus outline should be around them instead of framing only name. I released a fix for it, please review.

[Ankit K Gupta]

I got the chance to test this issue and the fixes by this patch look good to me. ​https://github.com/WordPress/wordpress-develop/pull/4986

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/4986

Env

• WordPress - 6.4-alpha-20230817.203813
• Web Server: Nginx
• Chrome Version - 115
• Safari Version - 15.4
• Firefox Version - 116.02
• Opera Version - 101
• OS - macOS
• Theme: Twenty Twenty-Three
• PHP - 7.4.0
• Active Plugin - None

Test result

Works fine on the credit page now. Tested on macOS Chrome, Firefox, Safari, and Opera.

After the patch-

Chrome:

​https://ibb.co/VCQ4DNn

Firefox:

​https://ibb.co/JRbJGvt

Opera:

​https://ibb.co/fM0Kxvq

Safari:

​https://ibb.co/HrCT7s4

Test Report
---

Testing Environment

• WordPress - 6.4-alpha-20230817.203813
• Web Server: Nginx
• Chrome Version - 116
• Firefox - 117
• Theme: Twenty Twenty-Three
• PHP - 7.4.0

Test Result
Works as expected on the credit page. Tested on Windows Chrome, and Firefox.

Screenshot

Chrome

Firefox

[mukesh27]

Hi there!

The ​PR 4986 approach look good me.

[mukesh27]

@audrasjb Is this one is in you radar?