Button focus visibility issue in media upload page

[dilipbheda]

When visiting wp-admin/media-new.php in WordPress and uploading a new image, clicking the Edit button from the uploaded media list does not show proper focus visibility. The button outline is barely noticeable, making it difficult for users to identify the focused element.

Steps to Reproduce:

1. Navigate to wp-admin/media-new.php.
2. Upload an image.
3. Click on the Edit button from the uploaded media list.
4. Observe the focus visibility of the button.

Expected Behavior:
The button should have a clearly visible focus state to improve accessibility and user experience.

Actual Behavior:
The focus outline or indicator is not properly visible, making it unclear whether the button is selected.

[dilipbheda]

Before

[dilipbheda]

After

[narenin]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested:

​https://github.com/WordPress/wordpress-develop/pull/8656

Environment

OS: macOS 14.6.1
Web Server: PHP.wasm
PHP: 7.4.31-dev
WordPress: 6.8-alpha-20250130.101504
Browser: Chrome Version 133.0.6943.142
Theme: Twenty Twenty-Five Theme Version 1.1

Actual Results

The button has a clearly visible focus state which is improving the accessibility and user experience.

@dilipbheda Thanks for the patch. The PR changes looks good to me.

[zunaid321]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.9-alpha-20250404.184002
• PHP: 7.4.31-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 134.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

✅ Button visibility is fixed with the patch.

Supplemental Artifacts

[karthikeya01]

Alternative to PR 8656

[karthikeya01]

PR 8656 works fine, but in rare cases where the image has a long file name, it moves the file name below the image on mobile devices, which differs from the current behaviour. Attached an alternative patch.

[sabernhardt]

#63414 was marked as a duplicate.

[riddhidave]

Button focus visibility issue in media upload page

Expected Result:
When the Edit button is clicked, the click/ripple/hover effect should be:

• Fully visible
• Square-shaped and contained within the button boundary
• Not hidden behind or overflowing into image previews or other UI elements

Actual Result:
The click effect on the Edit button:

• Appears clipped or partially hidden
• Overflows or is obstructed by the image preview container
• Does not render as a clean square

OS: Windows (x86) 10
Chrome version: Chrome 136.0.7103.113

PFA: ​https://go.screenpal.com/watch/cThoiJnQSnn

[dilip2615]

Test Report
The findings in this report confirm that the submitted patch appropriately resolves the issue at hand.

Patch tested:

​https://github.com/WordPress/wordpress-develop/pull/8656

Environment

OS: Windows 11
Web Server: nginx
PHP: 8.2.27
WordPress: 6.8.1
Browser: Chrome Version 136.0.7103.114
Theme: Twenty Twenty Theme Version 2.9

Actual Results

The visible focus state of the button significantly improves accessibility and contributes to a better user experience.

• ​https://prnt.sc/us2H3b8iNgLv
• ​https://prnt.sc/mqxyFElxjN0f

[SirLouen]

Replying to dilip2615:

Test Report
The findings in this report confirm that the submitted patch appropriately resolves the issue at hand.

There are 650 reports that `needs-testing`

And this report doesn't have a needs-testing tag, but the more tests, the better, let's go!

[sabernhardt]

(started with [58279])

[sabernhardt]

#63602 was marked as a duplicate.

[sabernhardt]

PRs ​8656 and ​9027 both show the overflow for the .filename container and remove padding from the Edit link.

• As mentioned in comment:5, the overflow is hidden so the media details do not wrap below the floating image (when the filename is very long and/or the thumbnail is shorter than it is wide).
• With its current padding, the "Edit" link is 21.8 by 46.2 pixels in English. I would not recommend reducing the target size to less than 24 pixels in both dimensions (21.8 by 18.2 if padding is 0).
• If the Edit link height is reduced at all, .attachment-tools might need a top margin like what @umesh.nevase proposed in PR 9027.

In ​PR 8785, @ankitkumarshah proposed adding 2 pixels of margin on the left of the Edit link. Then the "Edit" text would not line up with the details above it, but the focus outline would show properly.

63239.patch​ adds 2 pixels of padding on the left of the .media-item .filename element. If this general direction is best, I suggest matching that padding value on the right side. The additional padding also creates a trivial discrepancy of 14 pixels on the left of the .pinkynail image and 16 pixels on the right, but the image margin could be reduced to compensate. Using a value of 2 pixels, that would become:

.media-item .pinkynail {
	margin: 14px 12px 14px 14px;
}
.media-item .filename {
	padding: 14px 2px;
}

This is an alternate solution for 63239, switching the parent container to flex & removing overflow: hidden.

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

[joedolson]

I added an alternate solution for this, which switches .media-item-wrapper .attachment-details to display: flex and removes overflow: hidden; to solve the issue. Removes float: left, which no longer applies.

This doesn't adjust any padding or margin, and just allows the outline to show.

Trac ticket:

[joedolson]

#63758 was marked as a duplicate.

The overflow: hidden rule can help wrap long file names (when hyphenated).

Before:

With this flexbox patch, the page has a horizontal scrollbar to show the full file name:

Long file names with underscores might also need word-wrap: break-word (or overflow-wrap) on the .media-list-title and .media-list-subtitle elements, but that did not work for me without hiding the overflow on the container.

[sabernhardt]

edits padding and margin to show the full focus outline and to give slight padding on the right, and also assigns classes to wrap long words

[sabernhardt]

I attempted to keep 63239.padding-plus-word-wrap.patch​ simple with small changes to .media-item .filename for the focus outline. Then I included the classes to wrap long file names that have no hyphens (not in the scope of this ticket).

[joedolson]

This seems like a fine solution to me. We've undoubtedly already spent more time thinking about it than was entirely necessary, so marking for commit!

[joedolson]

In 60637:

Media: Fix button focus visibility in media uploads.

Following [r58279], the focus outline on the Edit button after uploading media was partially cut off. Adjust margin and padding to ensure the outline is visible, while also supporting appropriate word wrapping on long file names.

Props dilipbheda, karthikeya01, sabernhardt, narenin, zunaid321, Marius84, ankitkumarshah, riddhidave, dilip2615, SirLouen, Presskopp, joedolson.
Fixes #63239.