refactor(a11y): register a11y scopes ondemand

uploadcare · Jun 23, 2024 · 8d5ad54 · 8d5ad54
1 parent c4538c4
commit 8d5ad54
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 29 deletions.
diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js
@@ -138,9 +138,7 @@ export class ActivityBlock extends Block {
     /** @type {string | null} */
     const currentActivity = this.$['*currentActivity'];
 
-    /** @type {Set<import('./Block').Block>} */
-    let blocksRegistry = this.$['*blocksRegistry'];
-    const hasCurrentActivityInCtx = !![...blocksRegistry].find(
+    const hasCurrentActivityInCtx = !![...this.blocksRegistry].find(
       (block) => block instanceof ActivityBlock && block.activityType === currentActivity,
     );
 
@@ -177,10 +175,8 @@ export class ActivityBlock extends Block {
       }
       let couldOpenActivity = !!nextActivity;
       if (nextActivity) {
-        /** @type {Set<ActivityBlock>} */
-        let blocksRegistry = this.$['*blocksRegistry'];
-        const nextActivityBlock = [...blocksRegistry].find((block) => block.activityType === nextActivity);
-        couldOpenActivity = nextActivityBlock?.couldOpenActivity ?? false;
+        const nextActivityBlock = [...this.blocksRegistry].find((block) => block.activityType === nextActivity);
+        couldOpenActivity = /** @type {ActivityBlock} */ (nextActivityBlock)?.couldOpenActivity ?? false;
       }
       nextActivity = couldOpenActivity ? nextActivity : undefined;
       this.$['*currentActivity'] = nextActivity;

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -97,10 +97,7 @@ export class Block extends BaseComponent {
    * @returns {Boolean}
    */
   hasBlockInCtx(callback) {
-    // @ts-ignore TODO: fix this
-    /** @type {Set} */
-    let blocksRegistry = this.$['*blocksRegistry'];
-    for (let block of blocksRegistry) {
+    for (let block of this.blocksRegistry) {
       if (callback(block)) {
         return true;
       }
@@ -201,9 +198,13 @@ export class Block extends BaseComponent {
     return this.has('*a11y') ? this.$['*a11y'] : null;
   }
 
+  /** @type {Set<Block>} */
+  get blocksRegistry() {
+    return this.$['*blocksRegistry'];
+  }
+
   destroyCallback() {
-    /** @type {Set<Block>} */
-    let blocksRegistry = this.$['*blocksRegistry'];
+    let blocksRegistry = this.blocksRegistry;
     blocksRegistry.delete(this);
 
     this.localeManager?.destroyL10nBindings(this);

diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
@@ -8,6 +8,11 @@ export class SolutionBlock extends Block {
   init$ = uploaderBlockCtx(this);
   _template = null;
 
+  initCallback() {
+    super.initCallback();
+    this.a11y?.registerBlock(this);
+  }
+
   static set template(value) {
     this._template = svgIconsSprite + value + /** HTML */ `<slot></slot>`;
   }

diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -308,8 +308,7 @@ export class UploaderBlock extends ActivityBlock {
           return;
         }
 
-        /** @type {Set<import('./Block').Block>} */
-        const blocksRegistry = this.$['*blocksRegistry'];
+        const blocksRegistry = this.blocksRegistry;
         /**
          * @param {import('./Block').Block} block
          * @returns {block is import('../blocks/SourceBtn/SourceBtn.js').SourceBtn}

diff --git a/abstract/a11y.js b/abstract/a11y.js
@@ -20,14 +20,9 @@ class ScopedMinimalWindow {
 
   /**
    * @private
-   * @type {() => NodeListOf<Node>}
+   * @type {Node[]}
    */
-  _selectScope;
-
-  /** @param {() => NodeListOf<Node>} selectScope */
-  constructor(selectScope) {
-    this._selectScope = selectScope;
-  }
+  _scope = [];
 
   /**
    * @param {'keydown' | 'keyup'} type
@@ -38,8 +33,7 @@ class ScopedMinimalWindow {
     const wrappedListener = (e) => {
       const target = e.target;
       if (!target) return;
-      const scope = [...this._selectScope()];
-      if (scope.some((el) => el === e.target || el.contains(/** @type {Node} */ (target)))) {
+      if (this._scope.some((el) => el === e.target || el.contains(/** @type {Node} */ (target)))) {
         listener(e);
       }
     };
@@ -65,21 +59,47 @@ class ScopedMinimalWindow {
   get navigator() {
     return window.navigator;
   }
+
+  /** @param {Node} scope */
+  registerScope(scope) {
+    this._scope.push(scope);
+  }
+
+  destroy() {
+    this._scope = [];
+  }
 }
 
 export class A11y {
   /**
    * @private
-   * @type {() => void}
+   * @type {(() => void) | undefined}
    */
-  _destroy;
+  _destroyKeyUX;
+
+  /**
+   * @private
+   * @type {ScopedMinimalWindow}
+   */
+  _scopedWindow;
 
   constructor() {
-    const scopedWindow = new ScopedMinimalWindow(() => document.querySelectorAll('[lr-wgt-common]'));
-    this._destroy = startKeyUX(scopedWindow, [focusGroupKeyUX(), pressKeyUX('is-pressed'), jumpKeyUX(), hiddenKeyUX()]);
+    this._scopedWindow = new ScopedMinimalWindow();
+    this._destroyKeyUX = startKeyUX(this._scopedWindow, [
+      focusGroupKeyUX(),
+      pressKeyUX('is-pressed'),
+      jumpKeyUX(),
+      hiddenKeyUX(),
+    ]);
+  }
+
+  /** @param {import('./Block.js').Block} scope */
+  registerBlock(scope) {
+    this._scopedWindow.registerScope(scope);
   }
 
   destroy() {
-    this._destroy();
+    this._destroyKeyUX?.();
+    this._scopedWindow.destroy();
   }
 }
diff --git a/solutions/cloud-image-editor/CloudImageEditor.js b/solutions/cloud-image-editor/CloudImageEditor.js
@@ -3,4 +3,10 @@ import { CloudImageEditorBlock } from '../../blocks/CloudImageEditor/src/CloudIm
 
 export class CloudImageEditor extends CloudImageEditorBlock {
   static styleAttrs = [...super.styleAttrs, 'lr-wgt-common'];
+
+  initCallback() {
+    super.initCallback();
+
+    this.a11y?.registerBlock(this);
+  }
 }