[4.0] Shortcut Keys

[brianteeman]

This is a proof of concept for a new plugin offering keyboard shortcuts in the Joomla admin based on previous work by @jneubauer

For testing I have created the following shortcut keys

Save - Alt/Opt S
Save & Close - Shift + Alt/Opt S
Save & New - Shift + Alt/Opt N
Save as Copy - Shift + Alt/Opt C
Cancel/Close - Alt/Opt X
New - Alt/Opt N
Help - Alt/Opt H
Options - Alt/Opt

Alt/Opt means Alt key on Windows/Linux and Option key on Mac

When testing please report the operating system, browser, language AND keyboard layout/lang

[dgrammatiko]

fwiw the ctrl+s was already implemented (but George manage to undo that) here: joomla/40-backend-template#55

Also it worth copying the tinyMCE bits from there, so the combo works also when the cursor is in the editors iframe

[brianteeman]

As I said - by default NONE of these shortcuts work when the cursor is in a text area. Its just a config option to enable if desired

[dgrammatiko]

@brianteeman also you don't need an extra script, just add the logic in the toolbar.js

[brianteeman]

mousetrap is much better

[dgrammatiko]

mousetrap is much better

I always prefer less code and of course no dependencies, but that's me...

[brianteeman]

I prefer maintainable code with no bus factor

[dgrammatiko]

I prefer maintainable code with no bus factor

Just because you're pulling something from NPM is not automagically more maintainable or has a greater bus factor...

[ReLater]

Is a great and welcome feature!

[dgrammatiko]

Just to make my self clear here, when I said

also you don't need an extra script, just add the logic in the toolbar.js

I meant the build/media_source/plg_system_shortcuts/js/shortcuts.js not the mousetrap.js.
So all your code in the shortcuts.js can happily live in the toolbar, actually it'e exactly the place it belongs

[brianteeman]

Ah. I misunderstood you there.

As it's a proof of concept it's better on its own. If accepted it can be moved into that file of course

[brianteeman]

Also it depends if people want it to be configurable by the user (or even disabled) or not. And anyway toolbar is probably not the best place as even in this example there are some that work on pages without a toolbar

[dgrammatiko]

@brianteeman it can still be configurable, also by reading the code this works only with the toolbar buttons.
Also by reviewing the code of mousetrap.js I would say it's an overkill and probably not good fit for J4, reason the script is mainly polyfilling IE 6,7,8,9 which none is supported by J4

[zwiastunsw]

From the point of view of a11y, this is extremely important and necessary functionality.
I miss the general toolbar shortcut key (of course, I remember that there will be quick access via SkipTo). My suggestion - instead of a shortcut Return to Control panel let the shortcut to the toolbar.
As to combination "j h" - I will ask my friend (blind accessibility expert) for their opinion.

[brianteeman]

The keys I used are just examples

[C-Lodder]

Great idea. Does this also include a hint list in the actual admin panel?

[brianteeman]

Not yet. But it's supported by mousetrap

[dgrammatiko]

@wilsonge fwiw if was still the JS leader I wouldn't accept this mousetrap script to enter the project's dependencies

[brianteeman]

This should now be in native js and not use any external libraries. I have updated the original description.

[brianteeman]

Sorry @dgrammatiko @wilsonge you were right - it didnt need the library at all

[brianteeman]

Updating branch to trigger drone

[wilsonge]

This works. However altKey either doesn't trigger or is overriden by browser behavior in chrome on my mac. option x still cuts, option s still downloads the web page, option h goes to the home page in chrome. all the commands are usable if using the actual alt key instead of the option key.

[brianteeman]

The docs say that alt on windows and opt on mac are triggered by altKey https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey

Can you go to https://keycode.info/ and tell me the results you get for alt and opt on your mac

[wilsonge]

This is alt and option

[brianteeman]

I can only think then that the mdn documentation I linked to is incorrect and they keystrokes are ALT on both and OSx

[wilsonge]

Trying to figure it out tbh. Like the docs says the option key. that seems different to the command key. And the symbol is the one I have on my alt key.

I think the meta key is correct on macs https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey

However saying that we start to override a bunch of browser short codes (nearly all the combinations you have are already native browser combinations)

[brianteeman]

Using the meta key really isn't an option

[brianteeman]

What needs to happen to move this forward?

It really needs some testers with non UK keyboards and non english language settings. @alikon @Quy @SharkyKZ

[Quy]

Tested by placing cursor in Title field and pressing Alt + S. Got the same screenshot for Alt.

Windows 10, US standard keyboard layout.

Chrome 74.0.3729.169
Nothing happens.

Firefox 67.0.1. Dropdown menu appears.

[brianteeman]

Tested by placing cursor in Title field and pressing Alt + S. Got the same screenshot for Alt.

It is SHIFT and Alt

[Quy]

Same result.

[brianteeman]

might be a firefox bug - will investigate

[SharkyKZ]

In Edge, Shift + Alt + S result in Save, not Save & Close. Alt + X results in browser's Settings and More menu being opened. Alt + O doesn't do anything.

Windows 10, US layout.

[brianteeman]

I can confirm that the keyboard shortcuts I chose clash with some of the native browser shortcuts in firefox - grrh

[brianteeman]

I am closing this. It really serves little value especially regarding accessibility