Make WordPress Core

Opened 7 months ago

Closed 5 months ago

Last modified 5 months ago

#59033 closed defect (bug) (fixed)

Credits: Focus outline is cut off

Reported by: wildworks's profile wildworks Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.4 Priority: normal
Severity: trivial Version:
Component: Help/About Keywords: good-first-bug has-patch commit
Focuses: Cc:

Description

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.

Attachments (8)

chrome.png (101.5 KB) - added by wildworks 7 months ago.
Chrome
firefox.png (155.6 KB) - added by wildworks 7 months ago.
firefox
Screenshot from 2023-08-11 10-25-19.png (83.8 KB) - added by ivanzhuck 7 months ago.
Screenshot from 2023-08-11 10-25-26.png (33.6 KB) - added by ivanzhuck 7 months ago.
59033.diff (860 bytes) - added by dhrumilk 7 months ago.
2023-10-02_22-16-51.png (93.5 KB) - added by oglekler 5 months ago.
59033.2.diff (353 bytes) - added by ivanzhuck 5 months ago.
Screenshot from 2023-10-03 09-04-08.png (166.9 KB) - added by ivanzhuck 5 months ago.

Download all attachments as: .zip

Change History (26)

@wildworks
7 months ago

Chrome

@wildworks
7 months ago

firefox

#1 @audrasjb
7 months ago

  • Component changed from General to Help/About
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 6.4
  • Severity changed from normal to trivial

This ticket was mentioned in PR #4986 on WordPress/wordpress-develop by @ivanzhuck.


7 months ago
#2

  • Keywords has-patch added; needs-patch removed

Corrected the CSS styles

#3 @tejadev
7 months ago

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;
}

#4 @ivanzhuck
7 months ago

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.

Last edited 7 months ago by ivanzhuck (previous) (diff)

@dhrumilk
7 months ago

#5 @Ankit K Gupta
7 months ago

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

@sumitbagthariya16 commented on PR #4986:


6 months ago
#6

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
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/67687255/91e266bc-ca9d-449a-819f-15d381dc4932

Firefox
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/67687255/9966602e-b908-46d1-9dd3-4a991b31a6d8

#7 @mukesh27
6 months ago

Hi there!

The PR 4986 approach look good me.

#8 @mukesh27
5 months ago

@audrasjb Is this one is in you radar?

#9 @oglekler
5 months ago

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
5 months ago

#10 @ivanzhuck
5 months ago

@oglekler

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

This ticket was mentioned in PR #5416 on WordPress/wordpress-develop by @oglekler.


5 months ago
#11

Nice looking outline

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

#12 @oglekler
5 months ago

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.

#13 @ivanzhuck
5 months ago

@oglekler

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

#14 @marybaum
5 months ago

  • Keywords commit added

Looks good to me! Adding the commit keyword.

#15 @SergeyBiryukov
5 months ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#16 @SergeyBiryukov
5 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

@SergeyBiryukov commented on PR #4986:


5 months ago
#17

Thanks for the PR! Merged in r56826.

@SergeyBiryukov commented on PR #5416:


5 months ago
#18

Thanks for the PR! Merged in r56826.

Note: See TracTickets for help on using tickets.