The focus outline of the "Upload files" button is cut off

[wildworks]

In the media library, when the "Media Library" tab is selected and the "Upload files" tab is focused, the right side of the outline is cut off.

[wildworks]

"Media Library" tab is selected and "Upload files" tab is focused

[wildworks]

Patch to apply z-index to focused button to prevent cut-off

[huzaifaalmesbah]

Thank you for submitting the report, @wildworks. I've successfully reproduced the issue. After reviewing and testing your patch, I think we need fix for RTL in the patch.

[huzaifaalmesbah]

after apply patch

[wildworks]

@huzaifaalmesbah Thank you for testing. In my environment, it is also fixed in RTL languages. My understanding is that if we build after applying the patch, it should also be reflected in the RTL stylesheet. What locale did you test it in?

[wildworks]

Media library in RTL language after applying patch

[huzaifaalmesbah]

I'm testing again, now RTL work properly ✅

[antpb]

Moving this in to 6.6 so we can get this merged for the next release.

[krupajnanda]

Test Report

Description

This report validates that the indicated patch works as expected. ✅

Patch tested: https://core.trac.wordpress.org/attachment/ticket/60632/patch.diff

Environment

• WordPress: 6.6-beta3-58440-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Add as Attachment

[rajinsharwar]

Tested the patch, and the problem seems to be resolved.
Before: ​https://prnt.sc/CU2v2CS18zfy
After: ​https://prnt.sc/PdjSlNbqfxyl ✅

[sabernhardt]

Updating the z-index for .media-router .media-menu-item:focus worked for me in the following contexts.

Block editor: Image and Gallery blocks' Media Library button, sidebar's "Set featured image" button
Classic Editor: "Add Media" button, Featured Image
Classic Widgets: Image widget, Gallery widget, Text widget "Add Media" button

[oglekler]

@audrasjb can you take a look at this one? We have 15 minutes until the commit freeze

[oglekler]

Unfortunately, this ticket is going into the next milestone.

[hellofromTonya]

Tested the patch in the following contexts:

• ✅ Block editor: Image and Gallery blocks' Media Library button, sidebar's "Set featured image" button
• ✅ Classic Editor: "Add Media" button, Featured Image
• ✅ Classic Widgets: Image widget, Gallery widget, Text widget "Add Media" button

Works for me too. I concur with @sabernhardt - the patch LGTM and is ready for commit.

Self-assigning to commit it.

[hellofromTonya]

In 58917:

Media: Fix Media Library "Upload files" tab focus outline.

Adds a z-index to .media-menu .media-menu-item:focus to fix the "Upload files" tab's outline on the side next to the other tab.

Follow-up to [57553], [46363].

Props wildworks, antpb, huzaifaalmesbah, krupajnanda, nhrrob, oglekler, rajinsharwar, sabernhardt.
Fixes #60632.