C2LC-333: Add keyboard shortcuts.

Description

For example, we need a keyboard shortcut to get to the last add node (end of the program). Ideally we would have some kind of UI to make the controls configurable, and likely we would need user instructions as well.

Feedback from the April 2021 co-design included:

• Up and down arrows to navigate on the user interface :question:
• Shortcuts for heading navigation (e.g. tabs) :question:
• Shortcuts for scene information :check_mark:
• Shortcuts for refresh button (e.g. Alt-R) :check_mark:
• Shortcuts for for play button :check_mark:
• Shortcuts for adding blocks to the beginning or the end of the program
• Shortcut for adjusting speed of program executed/being played :check_mark:

In addition, we know we need:

• A modal to display / configure the keyboard shortcuts.
• A toggle to turn off keyboard handling (on the modal).
• A toggle to open close the modal itself.

Comments

• Tony Atkins [RtF] commented 2021-04-28T10:27:14.021-0400

  This relates to C2LC-295, in that many switches also act as keyboard inputs, so we would want to ensure that:

  1. We don't bind to switch keys that the user wants to use for something else.
  2. We allow them to use the keys their switch sends to control things.

  In other words, the keyboard shortcuts could be a means of allowing switches to interact with the coding environment.

• Simon Bates commented 2021-05-06T09:36:00.344-0400

  Some references:

  • https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts.html
  • https://html.spec.whatwg.org/#the-accesskey-attribute
  • https://webaim.org/techniques/keyboard/accesskey
  • NVDA shortcuts
  • VoiceOver shortcuts
  • Jaws shortcuts

• Tony Atkins [RtF] commented 2021-05-06T10:13:38.061-0400

  Simon and I agreed I would flesh this ticket out a bit in advance of 0.9, doing things like:

  1. Reviewing to see what our options are for safe(ish) key bindings.
  2. Collecting input from the group about a few key points like:
     1. Which headings should have shortcuts?
     2. Which areas need arrow key support, and how do we want that to work?

• Tony Atkins [RtF] commented 2021-05-06T10:33:26.872-0400

  I was looking into arrow keys for a bit. A few thoughts about arrow keys:

  1. JAWS uses nearly every variation (ctrl + arrow, ctrl + alt + arrow, alt + arrow, arrows by themselves in particular modes). The only one it doesn't seem to use is shift + arrow.
  2. Shift + arrow is use for text selection in most circumstances.

  As an alternative, perhaps we could use gaming layouts like AWSD, JKLI, or (like vi) HJKL.

• Tony Atkins [RtF] commented 2021-05-06T10:37:36.661-0400

  The first WAI link discusses speech-to-text users, and points out that hotkeys without any modifier can be triggered as speech is recognised. They suggest making the behaviour configurable (which is one of our longer term goals here). I was thinking that our first pass might focus on using a modifier, specifically the alt key, which should have less conflicts with browser commands.

  As an example, Chrome has a key binding for nearly every letter of the alphabet in combination with the command/control key, but has none that only use the alt key in combination with a single letter.

• Tony Atkins [RtF] commented 2021-05-06T10:41:56.771-0400

  The text inputs for the character position also would suggest the need to use a modifier key for all of our shortcuts, as we use all (unmodified) letters in the column input, and all (unmodified) digits in the row input

• Simon Bates commented 2021-05-11T09:42:45.724-0400

  An initial proof-of-concept keyboard shortcut implementation made for a meeting exploring The Grid 3 integration: https://github.com/codelearncreate/c2lc-coding-environment/commit/1915fa2320e2a812b0e3b68f79a5775132a3280d

• Tony Atkins [RtF] commented 2021-05-11T10:08:01.258-0400

  We discussed having the modal that displays available key bindings include the toggle to turn the keys on and off.

  We discussed having an icon for the keyboard settings modal appear near to the theme picker. We discussed replacing that with an icon to allow the two buttons to share a row.

• Tony Atkins [RtF] commented 2021-06-24T07:29:23.168-0400

  From @@Simon Bates:

  We discussed Grid 3 integration at the meeting with Bridges today and our ideas for additional keyboard shortcuts to support the integration.
  We'd like to add the following:

  • Keyboard shortcuts for setting focus to the different areas of the Weavly interface; similar to how a screen reader user might navigate by heading
  • Keyboard shortcuts for directly selecting each of the actions in the Actions Panel