Skip to content

UI: Show keyboard focus on disabled menu items - #85488

Open
ciampo wants to merge 2 commits into
trunkfrom
codex/ui-disabled-menu-focus
Open

UI: Show keyboard focus on disabled menu items#85488
ciampo wants to merge 2 commits into
trunkfrom
codex/ui-disabled-menu-focus

Conversation

@ciampo

@ciampo ciampo commented Oct 23, 2026

Copy link
Copy Markdown
Contributor

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

What?

Show a focus ring when a disabled menu item receives keyboard focus.

Why?

Disabled menu items remain reachable with arrow keys, but the new popup styling leaves their current focus position invisible.

How?

Use the WPDS focus border width and stroke color through the existing outline bridges. The cue follows actual focus, while disabled items keep their neutral colors and behavior. No interaction code, public API, or global defense rule is added.

Testing Instructions

  1. Open Menu Default in Storybook with the keyboard and press End. Unavailable action should have a visible ring.
  2. In Rich Items, open the menu and press ArrowDown from Save. The disabled Download row should have the same ring, with its label and shortcut still using disabled colors.
  3. Check disabled checkbox, radio, and submenu items. Focus should remain visible and the actions should remain unavailable.
  4. Repeat with WordPress global CSS, light, dark, and custom themes, and forced colors.

Testing Instructions for Keyboard

  1. Use ArrowDown to open a menu and arrow keys to move to a disabled item. Its position should remain visible.
  2. Press Enter or Space on a disabled action. It should remain unavailable. Move to an enabled item and check its existing solid brand treatment.
  3. Dismiss with Escape and check that focus returns to the trigger.
Verification and limits

All 60 existing Menu tests passed, along with the production build and CSS/changelog lint. CLI browser checks cover disabled focus, unavailable actions, shared item variants, WordPress global CSS, themes, and forced colors. The focus ring has at least 4.8:1 contrast against the popup background across the tested light, dark, and custom themes. No test files or test bodies were added. Actual screen readers and native Windows high-contrast mode were not tested locally.

Screenshots or screencast

Keyboard focus on disabled items in standalone Menu Default and Rich Items. Basic global CSS, light theme, 520 × 440 viewports. Captures wait for the opening animation and are cropped without changing the rendered UI.

Before After
Disabled action without a visible focus cue Disabled action with a visible focus ring
Disabled Download row without a visible focus cue Disabled Download row with a visible focus ring

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] UI /packages/ui 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: +53 B (0%)

Total Size: 9.07 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 606 kB +13 B (0%)
build/scripts/components/index.min.js 372 kB +47 B (+0.01%)
build/scripts/edit-site/index.min.js 424 kB +12 B (0%)
build/scripts/editor/index.min.js 620 kB +6 B (0%)
build/scripts/media-utils/index.min.js 265 kB -25 B (-0.01%)

e1b6895 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric cf7c78f trunk % Change
timeToFirstByte 60.4 ms +16.23% -2.32% 57.15 ms +7.35% -3.32% 5.69%
largestContentfulPaint 104 ms +3.85% -7.69% 96 ms +4.17% -4.17% 8.33%
lcpMinusTtfb 37.2 ms +21.51% -2.15% 35.7 ms +21.01% -3.5% 4.2%
wpBeforeTemplate 31.83 ms +20.33% -2.64% 29.75 ms +11.66% -2.59% 6.99%
wpTemplate 24.33 ms +8.92% -1.93% 22.6 ms +4.47% -4.12% 7.65%
wpTotal 56.49 ms +15.86% -2.43% 53.14 ms +7.81% -3.07% 6.3%
wpMemoryUsage 7.68 MB +0% -0% 7.65 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric cf7c78f trunk % Change
timeToFirstByte 52.95 ms +2.74% -2.64% 48.85 ms +10.03% -2.97% 8.39%
largestContentfulPaint 112 ms +5.36% -1.79% 104 ms +5.77% -0% 7.69%
lcpMinusTtfb 59.55 ms +5.88% -3.69% 55.9 ms +3.31% -1.61% 6.53%
wpBeforeTemplate 29.19 ms +4.25% -1.54% 28.19 ms +10.43% -3.09% 3.55%
wpTemplate 19.66 ms +3.05% -3.26% 17.42 ms +6.6% -2.18% 12.86%
wpTotal 49.23 ms +3.49% -1.93% 45.74 ms +9.66% -3.04% 7.63%
wpMemoryUsage 6.37 MB +0% -0% 6.34 MB +0% -0% 0.53%
wpDbQueries 13 +0% -0% 13 +0% -0% 0%

media-processing

Metric cf7c78f trunk % Change
mediaProcessingJpeg 412.76 ms +0.1% -2.02% 406.85 ms +4.14% -0.73% 1.45%
mediaProcessingAvif 6121.46 ms +0.71% -0.11% 6147.09 ms +1.2% -0.38% -0.42%
mediaProcessingJpegToAvif 4227.95 ms +0.61% -0.1% 4244.23 ms +3.37% -0.17% -0.38%

media-upload

Metric cf7c78f trunk % Change
jpegUploadProcessing 1696.15 ms +16.47% -15.92% 1436.21 ms +0.87% -0.84% 18.1%
pngUploadProcessing 230.22 ms +9.2% -14.3% 209.75 ms +10.52% -11.86% 9.76%
largeJpegUploadProcessing 1472.2 ms +33.94% -1.07% 1437.13 ms +0.68% -0.49% 2.44%
multipleImageUploadProcessing 2110.6 ms +1.14% -0.67% 2065.24 ms +1.82% -0.76% 2.2%

post-editor

Metric cf7c78f trunk % Change
serverResponse 517.34 ms +4.42% -3.68% 529.66 ms +3.27% -3.5% -2.33%
firstPaint 500.29 ms +6.56% -48.55% 366.51 ms +43.83% -29.1% 36.5%
domContentLoaded 1244.16 ms +2.97% -2.26% 1248.97 ms +2.11% -2.35% -0.39%
loaded 1245.23 ms +2.98% -2.24% 1250.08 ms +2.13% -2.32% -0.39%
firstContentfulPaint 526.99 ms +3.89% -7.08% 532.49 ms +0.83% -9.28% -1.03%
firstBlock 3567.26 ms +3.43% -2.57% 3619.56 ms +0.7% -2.66% -1.44%
type 20.5 ms +4.73% -4.93% 18.03 ms +5.16% -3.88% 13.7%
typeWithoutInspector 18.66 ms +3.8% -2.68% 18.15 ms +2.7% -5.07% 2.81%
typeWithTopToolbar 24.32 ms +5.35% -1.69% 24.39 ms +2.58% -2.46% -0.29%
typeContainer 8.4 ms +11.43% -9.05% 8.41 ms +12.13% -7.61% -0.12%
focus 127.94 ms +4.81% -4.18% 121.36 ms +2.94% -3.96% 5.42%
firstFocus 254.5 ms +0% -0% 242.42 ms +0% -0% 4.98%
selectAll 610.38 ms +0.46% -8.77% 541.44 ms +8.22% -5.61% 12.73%
listViewOpen 80.87 ms +5.27% -0.84% 85.49 ms +4.85% -10.83% -5.4%
inserterOpen 40.89 ms +10.66% -7.07% 42.52 ms +21.68% -9.6% -3.83%
inserterHover 12.49 ms +9.13% -7.45% 12.43 ms +3.3% -9.49% 0.48%
inserterSearch 8.53 ms +1.88% -0.94% 8.77 ms +6.04% -11.4% -2.74%
loadPatterns 678.71 ms +5% -2.25% 692.22 ms +13.77% -0.54% -1.95%
wpTotal 507.67 ms +4.51% -3.71% 519.69 ms +3.49% -3.55% -2.31%
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 cf7c78f trunk % Change
serverResponse 484.08 ms +4.91% -3.54% 496.72 ms +4.34% -8.66% -2.54%
firstPaint 285.45 ms +7.41% -26.47% 247.65 ms +10.05% -7.91% 15.26%
domContentLoaded 1250.05 ms +1.84% -0.91% 1255.82 ms +1.44% -2.22% -0.46%
loaded 1251.27 ms +1.81% -0.93% 1257.12 ms +1.41% -2.25% -0.47%
firstContentfulPaint 499.15 ms +5.43% -2.88% 507.77 ms +3.36% -3.44% -1.7%
firstBlock 4512.78 ms +0.83% -0.58% 4490.61 ms +0.58% -1.08% 0.49%
type 17.89 ms +3.52% -5.2% 18.24 ms +7.02% -1.97% -1.92%
navigate 106.5 ms +10.73% -0.4% 104.2 ms +10.42% -1.09% 2.21%
loadPatterns 1177.76 ms +4.39% -1.2% 1185.43 ms +7.32% -5.79% -0.65%
loadPages 968.47 ms +0.62% -3.78% 962.16 ms +4.39% -3.66% 0.66%
wpTotal 474.42 ms +4.93% -3.56% 487.59 ms +4.38% -8.9% -2.7%
wpMemoryUsage 12.73 MB +0% -0% 12.70 MB +0% -0% 0.24%
wpDbQueries 44 +2.27% -0% 44 +2.27% -0% 0%

e1b6895 Run

@ciampo ciampo mentioned this pull request Oct 23, 2026
Open
@ciampo ciampo self-assigned this Oct 23, 2026
@ciampo ciampo added the [Type] Bug An existing feature does not function as intended label Oct 23, 2026
@ciampo
ciampo marked this pull request as ready for review October 23, 2026 22:24
@ciampo
ciampo requested a review from a team as a code owner October 23, 2026 22:24
@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

No reviews

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] UI /packages/ui [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.

1 participant

@ciampo