(kb) introduce "regions" keyboard navigation with RegionFocusSwitcher

RegionFocusSwitcher makes it possible for the user to cycle through app
panels and document widgets (named "regions" as a whole) with one
keyboard shortcut.

1) On a grist document page, pressing the shortcut jumps your keyboard
focus from widget to widget, but also panel to panel. You go to widget
1, widget 2, then left panel, top panel, then widget 1, widget 2, etc.

On other pages (that don't have widgets), pressing the shortcut jumps
your keyboard focus from panel to panel, but this time it also includes
the main content area as a "panel".

2) The new creatorPanel command allows to keyboard focus from/to the
creator panel.
This is a separate command from the regions-cycling, as the creator
panel is tied to the currently focused viewLayout section. So we must be
able to focus a section, and then directly go to the creator panel in
order to configure it.

3) View now keeps track of this new stuff, in order to disable the
viewSection commands when focusing panels. This is an important trick
that lets us enable the Tab key and others when focusing the panels.

4) The new navigation shortcuts are now always on, even in inputs.
Using ctrl+o is somewhat problematic because it is the default browser
shortcut for opening files, so in cases where we don't catch the
keypress, the filechooser appears. We want to avoid that as much as
possible.

5) The main trick allowing us to easily allow Tab navigation on panels,
while on a grist docs page, is the change in Clipboard.js. We can now
set a 'clipboard_group_focus' class somewhere in the dom, and the
clipboard will allow focusing elements on elements inside the one having
the class.

This is not done yet:
- needs more actual usage testing to finetune the behavior and make sure
it is what we want.
- I need to check every page using the `pagePanels` function, as a new
div wraps the content and may make the layout buggy
- needs tests

Author: manuhabitela

app/client/components/BaseView.js

@@ -128,7 +128,7 @@ function BaseView(gristDoc, viewSectionModel, options) {
   this.listenTo(this.viewSection.events, 'rowHeightChange', this.onResize );
 
   // Create a command group for keyboard shortcuts common to all views.
-  this.autoDispose(commands.createGroup(BaseView.commonCommands, this, this.viewSection.hasFocus));
+  this.autoDispose(commands.createGroup(BaseView.commonCommands, this, this.viewSection.enableCommands));
 
   //--------------------------------------------------
   // Prepare logic for linking with other sections.

app/client/components/Clipboard.js

@@ -73,14 +73,7 @@ function Clipboard(app) {
 
   FocusLayer.create(this, {
     defaultFocusElem: this.copypasteField,
-    allowFocus: (element) => {
-      // We always allow focus if current screen doesn't have any clipboard events registered.
-      // This basically means the focus grab is disabled if no clipboard command is active.
-      const { copy, cut, paste } = commands.allCommands;
-      return (copy._activeFunc === _.noop && cut._activeFunc === _.noop && paste._activeFunc === _.noop)
-        ? true
-        : allowFocus(element);
-    },
+    allowFocus,
     onDefaultFocus: () => {
       this.copypasteField.value = ' ';
       this.copypasteField.select();
@@ -303,11 +296,26 @@ async function getTextFromClipboardItem(clipboardItem, type) {
 }
 
 /**
- * Helper to determine if the currently active element deserves to keep its own focus, and capture
- * copy-paste events. Besides inputs and textareas, any element can be marked to be a valid
- * copy-paste target by adding 'clipboard_focus' class to it.
+ * Helper to determine if the currently active element deserves to keep its own focus, and capture copy-paste events.
+ *
+ * By default, focus is automatically allowed if:
+ *   - there is no clipboard commands registered,
+ *   - the element is an input, textarea, select or iframe,
+ *   - the element has a tabindex attribute
+ *
+ * You can explicitly allow focus by setting different classes:
+ *   - using the 'clipboard_focus' class will allow focusing the element having the class,
+ *   - using the 'clipboard_group_focus' class will allow focusing any descendant element of the one having the class
  */
 function allowFocus(elem) {
+  const {copy, cut, paste} = commands.allCommands;
+  const noCopyPasteCommands = copy._activeFunc === _.noop && cut._activeFunc === _.noop && paste._activeFunc === _.noop;
+  if (noCopyPasteCommands) {
+    return true;
+  }
+  if (elem && elem.closest('.clipboard_group_focus')) {
+    return true;
+  }
   return elem && (FOCUS_TARGET_TAGS.hasOwnProperty(elem.tagName) ||
     elem.hasAttribute("tabindex") ||
     elem.classList.contains('clipboard_focus'));

app/client/components/Cursor.ts

@@ -112,7 +112,7 @@ export class Cursor extends Disposable {
 
     this.fieldIndex = baseView.viewSection.viewFields().makeLiveIndex(optCursorPos.fieldIndex || 0);
 
-    this.autoDispose(commands.createGroup(Cursor.editorCommands, this, baseView.viewSection.hasFocus));
+    this.autoDispose(commands.createGroup(Cursor.editorCommands, this, baseView.viewSection.enableCommands));
 
     // RowId might diverge from the one stored in _rowId when the data changes (it is filtered out). So here
     // we will calculate rowId based on rowIndex (so in reverse order), to have a proper value.

app/client/components/CustomView.ts

@@ -127,7 +127,7 @@ export class CustomView extends Disposable {
 
     this.autoDispose(this.customDef.pluginId.subscribe(this._updatePluginInstance, this));
     this.autoDispose(this.customDef.sectionId.subscribe(this._updateCustomSection, this));
-    this.autoDispose(commands.createGroup(CustomView._commands, this, this.viewSection.hasFocus));
+    this.autoDispose(commands.createGroup(CustomView._commands, this, this.viewSection.enableCommands));
 
     this._hasUnmappedColumns = this.autoDispose(ko.pureComputed(() => {
       const columns = this.viewSection.columnsToMap();

app/client/components/DetailView.js

@@ -119,8 +119,8 @@ function DetailView(gristDoc, viewSectionModel) {
 
   //--------------------------------------------------
   // Instantiate CommandGroups for the different modes.
-  this.autoDispose(commands.createGroup(DetailView.generalCommands, this, this.viewSection.hasFocus));
-  this.autoDispose(commands.createGroup(DetailView.fieldCommands, this, this.viewSection.hasFocus));
+  this.autoDispose(commands.createGroup(DetailView.generalCommands, this, this.viewSection.enableCommands));
+  this.autoDispose(commands.createGroup(DetailView.fieldCommands, this, this.viewSection.enableCommands));
   const hasSelection = this.autoDispose(ko.pureComputed(() =>
     !this.cellSelector.isCurrentSelectType('') || this.copySelection()));
   this.autoDispose(commands.createGroup(DetailView.selectionCommands, this, hasSelection));

app/client/components/Forms/FormView.ts

@@ -348,7 +348,7 @@ export class FormView extends Disposable {
       editField: keyboardActions.edit,
       deleteFields: keyboardActions.clearValues,
       hideFields: keyboardActions.hideFields,
-    }, this, this.viewSection.hasFocus));
+    }, this, this.viewSection.enableCommands));
 
     this._previewUrl = Computed.create(this, use => {
       const doc = use(this.gristDoc.docPageModel.currentDoc);

app/client/components/GridView.js

@@ -261,7 +261,7 @@ function GridView(gristDoc, viewSectionModel, isPreview = false) {
 
   //--------------------------------------------------
   // Command group implementing all grid level commands (except cancel)
-  this.autoDispose(commands.createGroup(GridView.gridCommands, this, this.viewSection.hasFocus));
+  this.autoDispose(commands.createGroup(GridView.gridCommands, this, this.viewSection.enableCommands));
   // Cancel command is registered conditionally, only when there is an active
   // cell selection. This command is also used by Raw Data Views, to close the Grid popup.
   const hasSelection = this.autoDispose(ko.pureComputed(() =>