(kb) allow classic keyboard nav when not viewing a document

1) Disable the clipboard catch-all element when there is no need to
enable it (we conclude we don't need it when we see no copy/put/paste
command is set).

This means it is disabled on most pages except the document view.

2) Make sure interactive elements are highlighted when focusing them
with the keyboard. Lots of elements have `outline: none` forced in the
codebase to prevent showing unwanted outlines when clicking with the
mouse. But it prevents keyboard users to see where they are. Have a tiny
JS script checking for keyboard interactions to force showing the
outline on actual kb focus.

Author: manuhabitela

app/client/components/Clipboard.js

@@ -49,6 +49,8 @@ var dom = require('../lib/dom');
 var Base = require('./Base');
 var tableUtil = require('../lib/tableUtil');
 
+var _ = require('underscore');
+
 const t = makeT('Clipboard');
 
 function Clipboard(app) {
@@ -71,7 +73,14 @@ function Clipboard(app) {
 
   FocusLayer.create(this, {
     defaultFocusElem: this.copypasteField,
-    allowFocus: allowFocus,
+    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);
+    },
     onDefaultFocus: () => {
       this.copypasteField.value = ' ';
       this.copypasteField.select();

app/client/components/KeyboardFocusHighlighter.ts

@@ -0,0 +1,40 @@
+/**
+ * KeyboardFocusHighlighter helps kb users view what interactive elements they have focus on.
+ *
+ * This is done as a quick way to make sure focus rings are correctly visible when using a kb,
+ * without impacting touch/mouse users, and without having to change the whole codebase.
+ *
+ * Note: this doesn't trigger when Tab is catched by the `nextField` command.
+ */
+import { Disposable, dom, styled } from "grainjs";
+
+export class KeyboardFocusHighlighter extends Disposable {
+  constructor() {
+    super();
+    this.autoDispose(dom.onElem(window, 'keydown', this._onKeyDown));
+    this.autoDispose(dom.onElem(window, 'touchstart', this._clear));
+    this.autoDispose(dom.onElem(window, 'mousedown', this._clear));
+  }
+
+  public isKeyboardUser = () => {
+    return document.documentElement.classList.contains(cssKeyboardUser.className);
+  };
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      document.documentElement.classList.add(cssKeyboardUser.className);
+    }
+  };
+
+  private _clear = () => {
+    document.documentElement.classList.remove(cssKeyboardUser.className);
+  };
+}
+
+const cssKeyboardUser = styled('div', `
+  & :is(a, input, textarea, select, button, [tabindex="0"]):focus-visible {
+    /* simulate default browser focus ring */
+    outline: 1px auto Highlight !important;
+    outline: 1px auto -webkit-focus-ring-color !important;
+  }
+`);

app/client/ui/App.ts

@@ -23,6 +23,7 @@ import {ISupportedFeatures} from 'app/common/UserConfig';
 import {dom} from 'grainjs';
 import * as ko from 'knockout';
 import {makeT} from 'app/client/lib/localization';
+import {KeyboardFocusHighlighter} from 'app/client/components/KeyboardFocusHighlighter';
 
 const t = makeT('App');
 
@@ -65,6 +66,8 @@ export class App extends DisposableWithEvents {
     this._settings = ko.observable({});
     this.features = ko.computed(() => this._settings().features || {});
 
+    this.autoDispose(new KeyboardFocusHighlighter());
+
     if (isDesktop()) {
       this.autoDispose(Clipboard.create(this));
     } else {