Regions + shortcuts

[kmcnaught]

As an opening gambit, I'm suggesting the following regions + shortcut actions to make navigation easier for those not using a mouse.

Note that shortcuts are helpful to keyboard users, low vision users who are using a magnifier/zoom which makes navigation slower, and screen reader users.

Regions are generally only accessible to screen reader users (though there are some browser plugins available for keyboard users), however they are simpler to add quickly now and have a significant impact on screen reader users.

Keyboard shortcuts probably require more discussion - some of the suggestions depend on resolutions to other open questions/suggestions.

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?)

Regions:

• Add a "header" for everything in green (top panel)
• Add a region for the bottom panel, allows you to skip past all the row content. In the python editor, we have a similar "project actions" pane. Here we have a naming conflict because "actions" is what we call the model classes. So... I think this suggested region is sensible, but I'm not sure what we should call it - "model actions"? It would contain "Add action", "Train model" and "Connect"/"Disconnect".
• Consider 1 region per action? It would allow screen reader users to jump between actions (rows) with their "next landmark/region" shortcuts. I can't find any discussion of whether this pattern is common / reasonable / unexpected.

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)?

Regions:

• "header" at top
• 1 region per action (if we're doing it for the data page)
• As-yet-unnamed region at the bottom, includes "Edit in MakeCode", Live data graph, and "Disconnect".

[kmcnaught]

@microbit-matt-hillsdon my general feeling here is that it would be great if we could have regions available at launch if they are uncontroversial, but shortcuts will require conversations. Even just header/main/footer would be a big plus.

[microbit-matt-hillsdon]

Thanks @kmcnaught. @microbit-robert is going to look at this one shortly.

[microbit-robert]

@kmcnaught the header and main regions are straight forward.

At what point do we start to clutter the list of regions if we add one for every action? We think most users will probably have 3 actions. Is it less important to have a region per row if we implement a keyboard shortcut to move up and down the rows?

Would it be OK to split the last area into two regions: 1) model actions (name to be confirmed), and 2) live data graph?