Add a hotkey to start the token browser

Would an accesskey work? The access key "a" (accesskey="a") has been added to Admin Toolbar, see the related issue. For example, in Firefox press Alt + Shift + a to place the cursor in the Admin Toolbar quick search form at the top.

Sorry for the late reply, your comment slipped through. i haven’t heard of the accesskey concept before. but i have taken a look now at the issue summary as well as the corresponding MDN page. the browser support looks also good: https://caniuse.com/?search=accesskey. from my understanding the accesskeys look like some sort of unification and an at least easier way to add a hotkey functionality to a page/site?
I only see two (and a half) problems with that approach. I’ve tried the example provided on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/acce... (https://codepen.io/ermarus/full/YzmbxPg) and it has literally no effect at all on macOS (I’ve tried Safari and Firefox). And one problem that struck my eye for macOS, accesskeys uses the same modifier keys (control option) voiceover uses, so your admin toolbar example collides with the hotkey to start announcing the entire page with voiceover active. :/ (Dequeue University provides cheatsheets for the most common screenreaders: https://dequeuniversity.com/screenreaders/). And finally, even though you have given fixed hotkey, the modifier keys differ between operating systems and browsers. If someone has more than one computer and browser they are regularly using the cognitive load is high figuring out the correct set of modifier key for the current context (browser and operating system).

Another point to consider, for admin_toolbar you went with the accesskey approach, while the tour module went with adding an eventlistener ✨ Add a hotkey to start a tour Fixed . For one you might end up with two or three different approaches across contrib adding hotkeys to the drupal admin UI, plus it is not sure that the choices contrib modules make for their hotkey don’t collide with of the choices the other modules?

So I wonder if, as a long term plan, the following approach would make sense. In the explorations during the competitive analysis for the a11y track for Drupal CMS, we’ve learned about the approach Joomla takes for hotkeys. You have a keyboard shortcut to open a dialog modal with a cheat sheet that contains the list of available shortcuts for the admin interface.

So our idea (nothing fully fledged out nor planneed) was to have a set of core shortcuts as well as to provide the opportunity for contrib modules to register their own hotkey or even the user to assign custom ones. that way you would have a central place/api for managing hotkeys for the admin ui. That way you would avoid hotkey collissions, you could have/define a consistent modifier key across browsers and operating systems, plus the list of registered hotkeys would be available via a cheatsheet. That would be my preferred long term solution.

For the short term, i would rather lean towards the approach the coffee and the tour modules have taken in regards of the modifier key - coffee uses alt d and tour alt t, aka a consistent single modifier key. cuz implementation wise the addition of the hotkey for the tour module was quick and easy for example via the eventlistener approach: https://git.drupalcode.org/project/tour/-/merge_requests/67.diff or would it be possible to change the modifier keys for the accesskey approach to a consistent one? cuz implementation wise accesskeys are even faster to add it looks like: https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/38.diff

Thanks for your thorough analysis @rkoller, as always very thoughtful and many good points.

I do like the approach by @smustgrave in Tour better than the accesskey parameter, since it's more uniform across all platforms and browsers. As you added with your last edit -- being consistent with other contrib modules using the same modifier key (Alt) is a strong argument, and I very much agree.

The different accesskey shortcuts per OS/browser is a bit messy, and if it even collides with a screen reader, that's not ideal ...

Thanks for the link to the Dequeue University cheatsheets! Speaking of Admin Toolbar and a possible shortcut, would Alt + a work, or does it collide with something? I checked in Dequeue University cheatsheets for Alt + a, and it looks like it's not used. But maybe I can ask you to check in macOS, if Alt + a clashes with another application?

Because then I might open a follow issue and suggest using the same shortcut method as Tour in Admin Toolbar Search.

The Joomla modal approach looks very be interesting, listing all admin shortcuts. Like you write, a major benefit would be to have a central place/api for managing hotkeys for the admin UI, to avoid collisions.

I do note that that "J" looks like the opener key, which would not work for me, since I always enable "search when you type", so for me pressing "D" (for "Drupal") would just highlight all d's on the screen :)

In Drupal the shortcut activator key could be Alt + s (for "shortcuts") followed by the shortcut key itself? I thought Alt + d was taken in Firefox, but it actually looks like Coffee is able to override this behaviour: #1734898: Allow user to specify keyboard shortcut. → . So if the Joomla method is chosen for Drupal, maybe Coffee needs to hand over Alt + D to Drupal shortcuts modal?

In the mean time, perhaps the Drupal documentation could get a "Adding a shortcut in modules and themes" page with a reference to the Tour approach? On that page, the individual modules could also announce their shortcut, like this?

But maybe I can ask you to check in macOS, if Alt + a clashes with another application?

i've tried and "it looks like" there is currently no clash, at least pressing alt a had no direct apparent effect in safari, edge or firefox nor in macos itself. yeah opening a followup issue for admin_toolbar seems reasonable.

I do note that that "J" looks like the opener key, which would not work for me, since I always enable "search when you type", so for me pressing "D" (for "Drupal") would just highlight all d's on the screen :)

for drupal i wouldnt suggested going with such a "regular" keycombination of j and x for opening that modal, instead keep the pattern and use a hotkey in combination with a modifier key - as you've already suggested. about which key to use for the cheatsheet could be discussed when the module is being build.

In the mean time, perhaps the Drupal documentation could get a "Adding a shortcut in modules and themes" page with a reference to the Tour approach? On that page, the individual modules could also announce their shortcut, like this?

yep wouldnt hurt to have such an overview. the only question where to place it in the documention so people actually find it :D

PS. I also see #3478595: Improve the Browse available tokens link which might make this issue irrelevant ... let's see how it turns out :)

i agree, but none of the potential paths token ui 2.0 might take are short term fixes. so for the time being a hotkey would be still needed as at least a short term fix (and it is also way easier and faster to add then coming to a conclusion about token ui 2.0 and actually implementing it ;) )

Thanks for checking, it sounds great that Alt + A doesn't seem to be taken. And the rest of your answers make a lot of sense, so thanks for clarifying and expanding.

yep wouldnt hurt to have such an overview. the only question where to place it in the documention so people actually find it :D

Yea, that's always a challenge :)