(kb) highlight focused elements only out of grist doc views

since most kb-related things in grist views are handled manually with
specific js, we dont want a default focus ring on stuff that might get
focus inside them.

before that, a focus ring was added on celleditor_text_editor for
example.

Author: manuhabitela

app/client/components/KeyboardFocusHighlighter.ts

@@ -33,7 +33,7 @@ export class KeyboardFocusHighlighter extends Disposable {
 }
 
 const cssKeyboardUser = styled('div', `
-  & :is(a, input, textarea, select, button, [tabindex="0"]):focus-visible {
+  & .kb-focus-highlighter-group :is(a, input, textarea, select, button, [tabindex="0"]):focus-visible {
     /* simulate default browser focus ring */
     outline: 2px solid Highlight !important;
     outline: 2px solid -webkit-focus-ring-color !important;

app/client/components/RegionFocusSwitcher.ts

@@ -113,6 +113,20 @@ export class RegionFocusSwitcher extends Disposable {
       dom.attr('role', 'region'),
       dom.attr('aria-label', ariaLabel),
       dom.attr(ATTRS.regionId, id),
+      dom.cls('kb-focus-highlighter-group', use => {
+        // highlight focused elements everywhere except in the grist doc views
+        if (id !== 'main') {
+          return true;
+        }
+        const gristDoc = this._gristDocObs ? use(this._gristDocObs) : null;
+        if (!gristDoc) {
+          return true;
+        }
+        if (gristDoc) {
+          use(gristDoc.activeViewId);
+        }
+        return isSpecialPage(gristDoc);
+      }),
       dom.cls('clipboard_group_focus', use => {
         const gristDoc = this._gristDocObs ? use(this._gristDocObs) : null;
         // if we are not on a grist doc, whole page is always focusable