Command palette shortcut in the admin bar displays in reverse order on RTL sites

[shreyasikhar26]

On a site in a right-to-left language, such as Arabic or Hebrew, the command palette button in the admin bar shows its keyboard shortcut in reverse order on macOS: K⌘ instead of ⌘K. The button is on every wp-admin page.

Steps to reproduce

1. Go to Settings > General and set the site language to العربية (Arabic).
2. Open any wp-admin page.
3. Look at the command palette button next to the search icon in the admin bar. It shows K⌘ instead of ⌘K.

Tested on WordPress 7.2-beta4-65379 with Chromium on macOS.

Cause

wp_admin_bar_command_palette_menu(), added in [61912], outputs the shortcut in a <kbd> that inherits the page's right-to-left direction. The ⌘ symbol has no direction of its own, so the browser places it after the K. On Windows and Linux the label is Ctrl+K. It is made of Latin letters, so it already shows left to right on the same page. The same shortcut therefore shows in different orders depending on the operating system, which suggests the reversal is accidental, not an intended right-to-left convention.

Proposed fix

Add dir="ltr" to the <kbd>. This keeps the shortcut's order and doesn't change anything around it. A CSS fix would need /* rtl:ignore */, because rtlcss flips direction declarations when it builds admin-bar-rtl.css. The CDN fallback script from [62322] only replaces the <kbd>'s text, so the attribute stays in place.

Gutenberg has the same bug in the editor and fixes it with the same approach: KeyboardShortcutDisplay in @wordpress/ui already uses dir="ltr" (​Gutenberg PR #80402). The Shortcut component and the keyboard shortcuts modals are covered in ​Gutenberg issue #86605 and ​Gutenberg PR #86606.

On right-to-left sites, the command palette button in the admin bar shows its macOS shortcut as K⌘ instead of ⌘K. The <kbd> inherits the page's direction, and ⌘ has no direction of its own, so the browser places it after the K.

This adds dir="ltr" to the <kbd> in wp_admin_bar_command_palette_menu(), so the shortcut always reads left to right without affecting anything around it. Using the attribute instead of CSS avoids rtlcss flipping a direction declaration in admin-bar-rtl.css. The CDN fallback script only replaces the <kbd>'s text, so the attribute stays in place. Gutenberg uses the same approach (WordPress/gutenberg#80402, WordPress/gutenberg#86606).

A new PHPUnit test checks the <kbd> markup for macOS, Windows and missing user agents.

Testing instructions

1. Set Settings > General > Site Language to العربية (Arabic).
2. On a Mac, open any wp-admin page. The command palette button in the admin bar should show ⌘K, with no change to its position or spacing.
3. Switch back to English and confirm nothing changes visually.
4. With a Windows or Linux user agent, confirm Ctrl+K shows correctly in both directions.
5. Run npm run test:php -- --filter test_command_palette_shortcut_is_ltr.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Implementing the fix, writing the PHPUnit test, and drafting the commit message and PR description; reviewed by me.

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

🤖 Generated with ​Claude Code