Add keyboard shortcuts

[microbit-grace]

This PR addresses this issue: Add keyboard shortcuts
Related closed issue: Regions + shortcuts

• Adds keyboard shortcuts as detailed below.
• Tweaks debounce for action name input so that we can immediately tab to record btn.
• Migrates the dialog states into the store so that we can prevent dialogs overlapping. Keyboard shortcuts should be disabled when a dialog is opened.
• Remove duplication in feedback form and in delete action row confirmation dialog.

Below's list is adapted from related issues. Bullet point items have not been implemented.

Data page

(i.e. before training a model)

Shortcuts:

• Add action
• Record: to trigger an interstitial dialog "Record sample for {action} yes/no" so as to clarify row focus and delay time-sensitivity of the Record dialog.
• Train model (? - maybe not particularly helpful as it's an occasional action)
• Row navigation: next/previous action?
• Save
• Settings
• Connect micro:bit
• Disconnect
• Rename current action (F2)

Model testing page

(i.e. after training)

Shortcuts

• Row navigation: next/previous action?
• Edit in MakeCode
• Disconnect
• Jump to graph (focus for aria-live announcements)
• Jump between each action's "certainty for {class}" live readout (if we made it live)?

[github-actions]

Preview build will be at
https://review-createai.microbit.org/shortcuts/

[microbit-robert]

My thoughts for discussion with the web team:

• Should connect and disconnect be the same shortcut that changes behaviour based on the current connection state?
• Should the settings dialog also toggle (open and close via the same shortcut). Not critical because escape will close it.
• The edit in MakeCode shortcut doesn't seem worth it as the button sits inside a region and it's not a regular action.
• Perhaps the left and right arrows should focus the name input and record button, respectively (switch between the grid items horizontally).
• The rename shortcut should probably be scoped to when focus is inside the selected row. At the moment, focus can be on the main action bar and F2 will still focus the selected row name.

[microbit-grace]

I think the suggestions from @microbit-robert all seems reasonable, @microbit-matt-hillsdon what are you thoughts on them? Thanks!

[microbit-matt-hillsdon]

• The rename shortcut should probably be scoped to when focus is inside the selected row. At the moment, focus can be on the main action bar and F2 will still focus the selected row name.

Not so sure about switching to a toggle approach - kinda nice not to have to know the current state to try an action. Might be helpful for screenreader users.

No strong view on "Edit in MakeCode".

The rest of Rob's suggestions make sense to me.