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?

[oglekler]

I tested the patch, it works as expected. And it's definitely better than before, but the ideal will be a nice outline that doesn't stick to the image or text.

[ivanzhuck]

@oglekler

I added a bit empty space about the cards so the outline doesn't touch text/images/other elements.

Nice looking outline

Trac ticket: https://core.trac.wordpress.org/ticket/59033

[oglekler]

Nice, thank you, @ivanzhuck 

I made another adjustment to keep the distance between elements like they are now. This is your turn to check the patch )

Let's see if @marybaum thinks that it is ready to commit or there is someting else to do.

[ivanzhuck]

@oglekler

Thank you for the patch, the spaces between cards look totally perfect now)

[marybaum]

Looks good to me! Adding the commit keyword.

[SergeyBiryukov]

In 56826:

Help/About: Ensure that focus outline on the Credits screen is not cut off.

Props ivanzhuck, oglekler, wildworks, dhrumilk, audrasjb, tejadev, ankit-k-gupta, sumitbagthariya16, mukesh27, marybaum.
Fixes #59033.

Thanks for the PR! Merged in r56826.

Thanks for the PR! Merged in r56826.