Skip to content

Components: Give keyboard targets priority over popup hover styles - #85487

Open
ciampo wants to merge 2 commits into
trunkfrom
codex/popup-single-highlight
Open

Components: Give keyboard targets priority over popup hover styles#85487
ciampo wants to merge 2 commits into
trunkfrom
codex/popup-single-highlight

Conversation

@ciampo

@ciampo ciampo commented Oct 23, 2026

Copy link
Copy Markdown
Contributor

Follow-up to #84583. This PR targets trunk independently.

What?

Keep the keyboard target visually active when a different popup item is hovered.

Why?

DropdownMenu and Autocomplete can show independent keyboard and hover cues. With solid brand styling, that becomes two identical filled rows.

How?

Filter the existing Button hover selectors when another menu item has focus or another result is selected. A shared Sass selector keeps the same rule in #84583's new brand styles. Both PRs include the identical helper and can merge independently.

Existing resting styles remain intact, including destructive text, pressed rows, custom colors, and color swatches. No reset declarations, interaction state, or public APIs are added.

Testing Instructions

  1. In DropdownMenu Default, open the menu and hover its second item while the first has focus. The first should keep its keyboard cue; the second should keep its resting colors.
  2. Repeat with menu groups, destructive actions, pressed items, and custom-colored rows. Their resting styles should remain.
  3. In the editor, open slash completion and hover a different result from the keyboard-selected result. Only the selected result should have the active treatment.
  4. Open a color palette in a Dropdown. Hover an unselected swatch and check that its color remains visible.
  5. Repeat with WordPress global CSS and forced colors enabled. Hover should still work when no menu item has focus.

Testing Instructions for Keyboard

  1. Open a menu with the keyboard, navigate with arrows, and leave the pointer over a different row. The focused row should retain its cue.
  2. Press Enter. The keyboard target should activate. Escape should still dismiss the menu.
  3. In slash completion, use arrow keys while the pointer stays over another result. The selected result should retain the active treatment.
Verification

All 111 existing tests across seven files passed on this branch, along with the production build and CSS/changelog lint. CLI browser checks cover the changed styling. The combined preview with #84583 also checks destructive, pressed, and custom-colored rows; color swatches; custom icons; WordPress global CSS; and a dark forced-color palette. No test files or test bodies were added. Real screen readers, touch hardware, and native Windows high-contrast mode were not tested locally.

Screenshots or screencast

Standalone DropdownMenu on trunk, after this change, basic global CSS, 520 × 330.

Keyboard focus retains priority over a different hovered row

Before and after with #84583's solid brand treatment

These captures show the combined styling, rather than this branch alone. The right-hand captures include #84583's matching selector changes. Both use the same trunk baseline and a 520 × 330 viewport. Images are cropped without changing the rendered UI.

Before After
DropdownMenu with independent focus and hover fills DropdownMenu with one active fill
Autocomplete with independent selection and hover fills Autocomplete with one active fill

Use of AI Tools

Implemented, reviewed, and verified with Codex. I reviewed the changes and remain responsible for them.

@github-actions github-actions Bot added the [Package] Components /packages/components label Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +425 B (0%)

Total Size: 9.07 MB

📦 View Changed
Filename Size Change
build/styles/components/style-rtl.css 16.9 kB +108 B (+0.64%)
build/styles/components/style-rtl.min.css 14.3 kB +103 B (+0.73%)
build/styles/components/style.css 16.9 kB +110 B (+0.65%)
build/styles/components/style.min.css 14.3 kB +104 B (+0.73%)

d0d32b6 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric 66b5236 trunk % Change
timeToFirstByte 41.1 ms +7.79% -9.49% 38 ms +8.82% -3.42% 8.16%
largestContentfulPaint 70 ms +2.86% -2.86% 64 ms +6.25% -3.13% 9.38%
lcpMinusTtfb 28.75 ms +7.65% -5.74% 25.95 ms +4.43% -7.51% 10.79%
wpBeforeTemplate 20.99 ms +9.72% -8.29% 19.57 ms +11.29% -2.4% 7.26%
wpTemplate 15.53 ms +6.12% -3.41% 15.17 ms +1.71% -5.27% 2.37%
wpTotal 37.85 ms +5.1% -9.78% 35.01 ms +8.94% -4.66% 8.11%
wpMemoryUsage 7.68 MB +0% -0% 7.64 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric 66b5236 trunk % Change
timeToFirstByte 29.05 ms +3.79% -3.27% 32.15 ms +7.62% -3.11% -9.64%
largestContentfulPaint 64 ms +0% -6.25% 72 ms +8.33% -0% -11.11%
lcpMinusTtfb 33.85 ms +3.99% -4.73% 40.4 ms +3.59% -2.1% -16.21%
wpBeforeTemplate 17.43 ms +7.29% -2.35% 17.84 ms +6.22% -4.09% -2.3%
wpTemplate 8.95 ms +1.34% -4.13% 12.02 ms +6.66% -6.74% -25.54%
wpTotal 26.62 ms +3.34% -3.12% 29.71 ms +7.44% -4.14% -10.4%
wpMemoryUsage 6.26 MB +0% -0% 6.33 MB +0% -0% -1.22%
wpDbQueries 9 +0% -0% 13 +0% -0% -30.77%

media-processing

Metric 66b5236 trunk % Change
mediaProcessingJpeg 303 ms +5.21% -5% 296.62 ms +6.05% -2.63% 2.15%
mediaProcessingAvif 4224.49 ms +3.61% -2.34% 4296.33 ms +0.71% -2.75% -1.67%
mediaProcessingJpegToAvif 2838.75 ms +2.79% -1.09% 2837.46 ms +4.09% -0.5% 0.05%

media-upload

Metric 66b5236 trunk % Change
jpegUploadProcessing 1400.61 ms +1.16% -0.5% 1408.78 ms +0.62% -1.04% -0.58%
pngUploadProcessing 172.29 ms +6.51% -2.15% 167.26 ms +2.42% -4.69% 3.01%
largeJpegUploadProcessing 1398.2 ms +1.01% -0.21% 1399.06 ms +0.65% -0.16% -0.06%
multipleImageUploadProcessing 1462.33 ms +0.27% -0.32% 1481.38 ms +1% -1.74% -1.29%

post-editor

Metric 66b5236 trunk % Change
serverResponse 503.59 ms +6.4% -7.42% 509.12 ms +6.7% -8.07% -1.09%
firstPaint 481.38 ms +7.85% -38.07% 283.55 ms +84.87% -7.92% 69.77%
domContentLoaded 1202.18 ms +3.66% -0.3% 1223.23 ms +2.16% -1.36% -1.72%
loaded 1203.3 ms +3.66% -0.28% 1224.58 ms +2.16% -1.33% -1.74%
firstContentfulPaint 485.89 ms +8.87% -28.64% 528.52 ms +0.96% -2.23% -8.07%
firstBlock 3395.9 ms +4.22% -1.57% 3511.93 ms +1.86% -1.73% -3.3%
type 17.98 ms +1.5% -2.11% 17.48 ms +10.41% -3.2% 2.86%
typeWithoutInspector 18.92 ms +2.8% -2.33% 17.47 ms +4.35% -2.92% 8.3%
typeWithTopToolbar 24.72 ms +3.76% -3.48% 24.91 ms +4.13% -1.89% -0.76%
typeContainer 8.33 ms +15.73% -6.36% 8.51 ms +8.11% -9.75% -2.12%
focus 131.27 ms +4.49% -6.51% 113.53 ms +7.8% -3.07% 15.63%
firstFocus 310.61 ms +0% -0% 228.3 ms +0% -0% 36.05%
selectAll 555.48 ms +4.97% -0.75% 558.72 ms +2.52% -3.04% -0.58%
listViewOpen 84.8 ms +4.87% -9.48% 77.24 ms +6.43% -7.94% 9.79%
inserterOpen 42.95 ms +1.93% -11.46% 42.74 ms +9.59% -10.6% 0.49%
inserterHover 11.18 ms +9.3% -4.65% 11.28 ms +13.74% -3.01% -0.89%
inserterSearch 8.21 ms +9.74% -11.81% 7.96 ms +7.79% -10.68% 3.14%
loadPatterns 631.78 ms +4.39% -4.46% 646.4 ms +3.91% -2.12% -2.26%
wpTotal 494.1 ms +6.23% -7.48% 499.96 ms +6.81% -8.24% -1.17%
wpMemoryUsage 14.71 MB +0% -0% 14.68 MB +0% -0% 0.23%
wpDbQueries 55 +0% -1.82% 55 +0% -1.82% 0%

site-editor

Metric 66b5236 trunk % Change
serverResponse 223.04 ms +8.74% -4.2% 237.26 ms +0.59% -9.53% -5.99%
firstPaint 250.5 ms +16.32% -30.62% 245.76 ms +29.53% -36.44% 1.93%
domContentLoaded 695.39 ms +2.82% -2.17% 708.32 ms +2.84% -2.86% -1.83%
loaded 696.11 ms +2.84% -2.15% 708.96 ms +2.86% -2.84% -1.81%
firstContentfulPaint 299.02 ms +4.69% -3.86% 309.36 ms +7.81% -18.25% -3.34%
firstBlock 2494.43 ms +1.34% -1.39% 2501.34 ms +0.26% -0.99% -0.28%
type 12.17 ms +2.79% -3.12% 12.39 ms +1.61% -2.26% -1.78%
navigate 91.75 ms +1.93% -8.89% 86.05 ms +6.45% -6.47% 6.62%
loadPatterns 777.53 ms +4.23% -4.38% 784.16 ms +10.66% -7.11% -0.85%
loadPages 965.26 ms +4.59% -6.75% 919.89 ms +1.82% -0.59% 4.93%
wpTotal 217.26 ms +8.67% -4.36% 231.33 ms +0.69% -9.74% -6.08%
wpMemoryUsage 12.73 MB +0% -0% 12.70 MB +0% -0% 0.24%
wpDbQueries 45 +0% -2.22% 45 +0% -2.22% 0%

d0d32b6 Run

@ciampo
ciampo requested a balanced review from Copilot October 23, 2026 22:15
Copilot AI reviewed Oct 23, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The scoped selector changes preserve specificity and resting styles, with no unresolved findings.

No open issues 🎉

What changed in this PR

This PR gives keyboard targets visual priority over hovered items in DropdownMenu and Autocomplete, complementing the solid-brand popup styling work.

Changes:

  • Adds a shared Sass selector that suppresses competing hover styles without increasing specificity.
  • Applies the selector to Button hover rules while preserving resting styles, and documents the fix.
File Description
packages/​components/​src/​utils/​popup-item.scss Defines the shared keyboard-priority hover selector.
packages/​components/​src/​button/​style.scss Applies the selector to existing hover treatments.
packages/​components/​CHANGELOG.md Records the DropdownMenu and Autocomplete fix.

Review effort: Balanced

@ciampo ciampo added the [Type] Bug An existing feature does not function as intended label Oct 23, 2026
@ciampo ciampo self-assigned this Oct 23, 2026
@ciampo
ciampo marked this pull request as ready for review October 23, 2026 22:19
@ciampo
ciampo requested a review from a team as a code owner October 23, 2026 22:19
@ciampo ciampo mentioned this pull request Oct 23, 2026
Open
@ciampo ciampo added Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 23, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@ciampo ciampo

Labels

Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ciampo