[4.2] [GSoC 21] Keyboard-Shortcut Plugin

[fancyFranci]

Summary of Changes

This is a new plugin, developed in the GSoC 21 Accessibility project.

It introduces keyboard shortcuts to the administrator site like pressing J + F to jump into the search field or J + S to save. Other extensions are able to add their shortcuts as well by hooking in on the onLoadShortcuts event. All(!) of them are listed in a modal window, which shows up by pressing J + X.

The current state is just the start. Further steps would be the editing of shortcuts, the possibility to disable them, changing the overview-text-hint to a button in the corner etc. The editing was there already but it had some flaws, so it will come later (without flaws) :)

Thanks to @Krshivam25 the student behind this GSoC project, @chmst, @bembelimen, and @brianteeman for alle the work and feedback!

Testing Instructions

Make sure the shortcut plugin is enabled and start by pressing J + X (in sequence, not at the same time!) for the overview. Have a look at the hint, which tells you the same at the bottom of the page. Then visit different pages and try out the shortcuts :)

If your motivated you can let your plugin add new shortcuts and test them! Add "onLoadShortcuts" to the getSubscribedEvents and write something like this:

public function onLoadShortcuts(EventInterface $event): void {
   $shortcuts = $event->getArgument('shortcuts');
   $testShortcuts = array('test' => (object)['shortcut' => 'J + T', 'title' => 'Great Test', 'selector' => '#menu-collapse']);
   $event->setArgument('shortcuts',  array_merge($shortcuts, $testShortcuts));
}

Actual result BEFORE applying this Pull Request

You needed to click on buttons to do something

Expected result AFTER applying this Pull Request

You can use your keyboard to do something (besides typing text)

Documentation Changes Required

Yes, I will create a page to describe the build up of the shortcuts, how extensions can add them and what the default joomla shortcuts are. Part of it would be:

The 3rd party plugin needs to provide an array of shortcuts which are objects:
{ shortcut: string, selector: string, title: string }
The shortcut needs to be a keyboard input, separated by a plus e.g. "J + Y" or "ALT + Z + 7" (currently there is really no filtering).
Selectors are like CSS selectors to target an element. When it is an input element, the shortcut gives focus, otherwise it will be clicked.
The Title will be displayed in the overview. It could be the name of the target.

[bembelimen]

I have tested this item ✅ successfully on b223844

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38092.}

[chmst]

I have tested this item ✅ successfully on b223844

Great!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38092.}

[brianteeman]

Grrrh. Using a keyboard sequence doesnt seem to work as I expected. It doesnt work at all in NVDA or Windows Narrator.

In both cases the combination J + X tries to go to the next checkbox.

[fancyFranci]

Grrrh. Using a keyboard sequence doesnt seem to work as I expected. It doesnt work at all in NVDA or Windows Narrator.
In both cases the combination J + X tries to go to the next checkbox.

Sorry, that one got lost in all the comments. I'll have a look on that, maybe preventing defaults after J was pressed (not X alone) could be enough.

[Quy]

I find the legend in the footer a little distracting. My focus draws to it. It is useful in the beginning but I can see it becoming annoying after a while.

[brianteeman]

jx is a dl but the description in the plugin is a ul

[fancyFranci]

I find the legend in the footer a little distracting. My focus draws to it. It is useful in the beginning but I can see it becoming annoying after a while.

Now the hint only appears on cpanel-pages like the home dashboard. As you said - its only useful at the beginning

[fancyFranci]

Grrrh. Using a keyboard sequence doesnt seem to work as I expected. It doesnt work at all in NVDA or Windows Narrator.
In both cases the combination J + X tries to go to the next checkbox.

It seems like NVDA interrupt the keyboard input before js can do/prevent anything. Even when I change the shortcuts to something NVDA does not use, nothing happens besides making a sound. When we configure modifiers like ALT, they do not work in sequence because the browser interrupts (at least in my tests). What do you think @brianteeman ? :/

[brianteeman]

(not at my pc to test) what happens on github when you use nvda and the github shortcuts?

[fancyFranci]

I tried out s for githubs search and I'm not jumping into the search field as long as nvda is running. Same with g and n, which should normally open notifications.

[fancyFranci]

...but the command palette (which opens on ctrl+k) works with nvda

[brianteeman]

It looks like its a known issue with the nvda single character shortcuts
https://www.nvaccess.org/files/nvda/documentation/userGuide.html#SingleLetterNavigation

[brianteeman]

yes looks like this is one of those cases where a real screen reader user knows what to do.

"In browse mode, you can now toggle single letter navigation on and off by pressing NVDA+shift+space. When off, single letter keys are passed to the application, which is useful for some web applications such as Gmail, Twitter and Facebook."

or you switch from browse to focus mode.

Havng read the nvda manual link I am happy enough that the current code is ok to merge

[fancyFranci]

Thanks everybody! :)

[brianteeman]

thank you all.

Cant wait to read the docs how this can be extended by extensions

[fancyFranci]

I wrote an example in the test instructions which I used myself to test added shortcuts. But yes, docs will follow.