[6.x] Floating toolbar keyboard shortcuts

[jaygeorge]

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

Dark Mode

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.
• Deselect — Esc clears the selection and closes the toolbar.
• Delete — Delete 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 component — BulkActionsFloatingToolbar.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

[jackmcdade]

I love this! I feel like it's just missing one last piece — being able to hit enter (or maybe cmd+enter) to submit the action. It still requires a mouse click. 🤔

[jaygeorge]

Oh cool!

You can actually hit tab twice to focus on submit, then press enter, which is what I've been doing.

Thinking about this a little more, I think it might be more effective to focus on "cancel" immediately. This seems to be the convention at the OS-level anyway.

This way you can either back out with enter/space or press tab once, then enter/space.
This should be an easier keyboard combo than using a modifier.

What d'you think?

[jaygeorge]

I pushed this up so you can give it a try.

An unintended (but welcome) side effect is that if you initiate the action with the keyboard shortcut, then the focus ring will show like this

But if you initiate the action with the mouse, as previously, then you don't get the focus ring, because we're using focus-visible for the focus state. This keeps things neat for users who don't care for keyboard (I pity them, but at least they get it all perty!)

[jackmcdade]

Works for me!