Skip to content

IconButton: Improve keyboard shortcut accessibility - #80402

Merged
ciampo merged 7 commits into
trunkfrom
codex/improve-icon-button-shortcuts
Aug 10, 2026
Merged

IconButton: Improve keyboard shortcut accessibility#80402
ciampo merged 7 commits into
trunkfrom
codex/improve-icon-button-shortcuts

Conversation

@ciampo

@ciampo ciampo commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Follow-up to #80321.
See #80353.
Related: #79560.

What?

Improves IconButton keyboard shortcut accessibility and extracts reusable internal shortcut helpers.

Why?

IconButton displayed shortcuts and set aria-keyshortcuts, but did not provide an explicit accessible description.

How?

  • Requires a human-readable shortcut.label for the accessible description.
  • Merges the description with existing aria-describedby and preserves direct ARIA props.
  • Keeps the visual shortcut LTR and hidden from assistive technology.

Shortcut registration remains the consumer's responsibility.

Testing Instructions

  1. Open Design System / Components / IconButton / With Shortcut in Storybook.
  2. Confirm the tooltip displays the platform shortcut.
  3. Inspect the button and confirm it has aria-keyshortcuts and an accessible shortcut description.

Testing Instructions for Keyboard

  1. Press Tab until the icon button receives focus.
  2. Confirm the tooltip opens and Enter and Space still activate the button.

Use of AI Tools

This PR was implemented with AI assistance in Codex and reviewed locally.

@github-actions github-actions Bot added the [Package] UI /packages/ui label Jul 17, 2026
@ciampo ciampo mentioned this pull request Jul 17, 2026
Closed
12 tasks
@github-actions

github-actions Bot commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Size Change: -9 B (0%)

Total Size: 7.65 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 434 kB -1 B (0%)
build/scripts/block-library/index.min.js 357 kB -11 B (0%)
build/scripts/editor/index.min.js 510 kB +1 B (0%)
build/scripts/format-library/index.min.js 29.6 kB +2 B (+0.01%)

compressed-size-action

@ciampo ciampo mentioned this pull request Jul 17, 2026
Merged
@github-actions

github-actions Bot commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Flaky tests detected in eeeeda6.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29574471511
📝 Reported issues:

@ciampo ciampo mentioned this pull request Jul 17, 2026
Closed
@ciampo
ciampo force-pushed the codex/improve-icon-button-shortcuts branch from ed72453 to b49b0ec Compare July 17, 2026 10:39
@github-actions github-actions Bot added [Package] Core data /packages/core-data [Package] Components /packages/components [Package] Editor /packages/editor [Package] Block library /packages/block-library [Package] Notices /packages/notices [Package] Block editor /packages/block-editor [Package] Interface /packages/interface [Package] Base styles /packages/base-styles [Package] Preferences /packages/preferences [Package] Commands /packages/commands [Package] Interactivity /packages/interactivity [Package] DataViews /packages/dataviews [Package] Theme /packages/theme labels Jul 17, 2026
@ciampo
ciampo changed the base branch from codex/add-ui-menu to trunk July 17, 2026 10:39
@ciampo ciampo removed [Package] Core data /packages/core-data [Package] Components /packages/components [Package] Editor /packages/editor [Package] Block library /packages/block-library [Package] Notices /packages/notices [Package] Block editor /packages/block-editor [Package] Interface /packages/interface [Package] Base styles /packages/base-styles [Package] Preferences /packages/preferences labels Jul 17, 2026
@ciampo ciampo removed [Package] Interactivity /packages/interactivity [Package] DataViews /packages/dataviews [Package] Theme /packages/theme labels Jul 17, 2026
@ciampo ciampo self-assigned this Jul 17, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Jul 17, 2026
@ciampo
ciampo marked this pull request as ready for review July 17, 2026 10:56
@ciampo
ciampo requested a review from a team as a code owner July 17, 2026 10:56
@github-actions

github-actions Bot commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

mirka
mirka reviewed Jul 20, 2026
View reviewed changes

@mirka mirka left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Looking good in general 👍 I just want to see if we can improve clarity around names and documentation.

Comment thread packages/ui/src/utils/keyboard-shortcut.tsx Outdated
Comment thread packages/ui/src/icon-button/stories/index.story.tsx
Comment thread packages/ui/src/utils/keyboard-shortcut.tsx Outdated
Comment thread packages/ui/src/utils/keyboard-shortcut.tsx Outdated
Comment thread packages/ui/src/utils/keyboard-shortcut.tsx Outdated
Comment thread packages/ui/src/icon-button/test/index.test.tsx Outdated
Comment thread packages/ui/src/icon-button/test/index.test.tsx Outdated
Comment thread packages/ui/src/icon-button/test/index.test.tsx Outdated
@ciampo
ciampo force-pushed the codex/improve-icon-button-shortcuts branch from eeeeda6 to 6b576ca Compare August 5, 2026 16:37
@ciampo
ciampo requested a review from mirka August 5, 2026 17:09
@ciampo

ciampo commented Aug 5, 2026

Copy link
Copy Markdown
Contributor Author

@mirka all feedback addressed, can you take another look?

ciampo
ciampo commented Aug 5, 2026
View reviewed changes
Comment thread packages/ui/src/utils/keyboard-shortcut.tsx
mirka
mirka approved these changes Aug 8, 2026
View reviewed changes

@mirka mirka left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Looks good!

Comment thread packages/ui/src/utils/keyboard-shortcut.tsx
Comment thread packages/ui/src/utils/keyboard-shortcut.tsx Outdated
@mirka

mirka commented Aug 8, 2026

Copy link
Copy Markdown
Member

I think this may be the last step before marking the component as officially recommended? Probably Button too, since we've documented how to deal with shortcuts there.

@ciampo

ciampo commented Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

I think this may be the last step before marking the component as officially recommended? Probably Button too, since we've documented how to deal with shortcuts there.

I think so? I also have #80407 open, adding a shortcut-focused, high-level Button component. Not a blocker for Button's stabilization, though?

@ciampo
ciampo force-pushed the codex/improve-icon-button-shortcuts branch from 54f7ce4 to dc8f6a6 Compare August 10, 2026 15:57
@ciampo
ciampo enabled auto-merge (squash) August 10, 2026 16:02
@ciampo
ciampo merged commit 07e90d6 into trunk Aug 10, 2026
60 checks passed
@ciampo
ciampo deleted the codex/improve-icon-button-shortcuts branch August 10, 2026 16:32
@github-actions github-actions Bot added this to the Gutenberg 23.8 milestone Aug 10, 2026
@ciampo ciampo mentioned this pull request Aug 10, 2026
Open
18 tasks
shail-mehta pushed a commit that referenced this pull request Aug 12, 2026
@ciampo @mirka @shail-mehta
IconButton: Improve keyboard shortcut accessibility (#80402)
16b73ba 
* IconButton: Share accessible shortcut handling

* IconButton: Add shortcut changelog entry

* IconButton: Share shortcut display semantics

* IconButton: Clarify shortcut metadata

* IconButton: Add shortcut label fallback

* IconButton: Clarify shortcut props hook name

* IconButton: Require shortcut label

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mirka mirka mirka approved these changes

Assignees

@ciampo ciampo

Labels

[Package] UI /packages/ui [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 23.8

Development

Successfully merging this pull request may close these issues.

2 participants

@ciampo @mirka