Skip to content

Comments

[6.x] Floating toolbar keyboard shortcuts#14036

Open
jaygeorge wants to merge 18 commits into6.xfrom
floating-toolbar-keyboard-shortcuts
Open

[6.x] Floating toolbar keyboard shortcuts#14036
jaygeorge wants to merge 18 commits into6.xfrom
floating-toolbar-keyboard-shortcuts

Conversation

@jaygeorge
Copy link
Contributor

What this PR Does

Adds keyboard shortcuts to the bulk actions floating toolbar (Esc to deselect, Delete/Backspace for delete, and one letter per action from the localised label) so power users can run actions without leaving the keyboard.

Light Mode

2026-02-23 at 13 49 10@2x

Dark Mode

2026-02-23 at 13 50 59@2x

What's new

  • Single-letter shortcuts — Each action gets a shortcut from the first available letter in its (localized) label (e.g. "Unpublish" → U, "Depubliceren" → D in Dutch).
  • If that letter is already taken by another action, we use the next letter in the word (e.g. "Upload" → P when U is taken for Unpublish). Letters are assigned in order through the label so shortcuts stay predictable and readable in every language.
  • DeselectEsc clears the selection and closes the toolbar.
  • DeleteDelete or Backspace trigger delete. The delete action always shows the backspace icon in the toolbar (no letter), so it's consistent and doesn't steal a letter from other actions.
  • Custom actions — Add-ons and custom bulk actions automatically get a shortcut from their localized title, with no extra config.

Implementation

  • New componentBulkActionsFloatingToolbar.vue holds all shortcut logic and UI, so the listing stays clean and the toolbar is easy to maintain.
  • Conflict handling — Shortcuts are ignored when a modal, stack, or dialog is open, or when focus is in an input, textarea, select, or contenteditable, so they don't clash with normal typing or other CP shortcuts (including the command palette). Escape is handled in the capture phase so it behaves correctly when the toolbar is visible.
  • Accessibility — Shortcut keys are shown as badges next to each action so the shortcuts are discoverable and consistent with the rest of the CP.

Files changed

  • New: resources/js/components/ui/Listing/BulkActionsFloatingToolbar.vue — Toolbar with shortcut assignment, key handling, and badges.
  • Updated: BulkActions.vue — Uses the new floating toolbar component and passes actions, visibility, selections, and clear callback.
  • Added: resources/svg/icons/backspace.svg — delete shortcut icon. FYI I did try delete icons from the Flex Line library but it didn't quite site right, so I ended up adding a custom one.

How to Reproduce

  1. Go to a collection and select one or more entries to bring up the floating toolbar.
  2. You can also switch the CP language to see the toolbar shortcuts adapting to the language

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant