Add wpt tests and review :focus-visible logic (#132)

asamuzaK · Sep 11, 2024 · 455d39f · 455d39f
1 parent a907b6f
commit 455d39f
Show file tree

Hide file tree

Showing 3 changed files with 937 additions and 14 deletions.
diff --git a/src/js/finder.js b/src/js/finder.js
@@ -153,7 +153,9 @@ export class Finder {
       passive: true
     };
     const func = [];
-    const mouseKeys = ['mouseover', 'mousedown', 'mouseup', 'mouseout'];
+    const mouseKeys = [
+      'click', 'mouseover', 'mousedown', 'mouseup', 'mouseout'
+    ];
     for (const key of mouseKeys) {
       func.push(this.#window.addEventListener(key, evt => {
         this.#event = evt;
@@ -162,7 +164,13 @@ export class Finder {
     const keyboardKeys = ['keydown', 'keyup'];
     for (const key of keyboardKeys) {
       func.push(this.#window.addEventListener(key, evt => {
-        if (evt.key === 'Tab') {
+        const { key } = evt;
+        const specialKeys = [
+          'Alt', 'AltGraph', 'CapsLock', 'Control', 'Dead', 'Fn', 'FnLock',
+          'Hyper', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Super', 'Symbol',
+          'SymbolLock', 'Unidentified'
+        ];
+        if (!specialKeys.includes(key)) {
           this.#event = evt;
         }
       }, opt));
@@ -995,7 +1003,7 @@ export class Finder {
         }
         case 'hover': {
           const { target, type } = this.#event ?? {};
-          if (['mousedown', 'mouseover', 'mouseup'].includes(type) &&
+          if (/^(?:click|mouse(?:down|over|up))$/.test(type) &&
               node.contains(target)) {
             matched.add(node);
           }
@@ -1062,13 +1070,32 @@ export class Finder {
                   const {
                     key: eventKey, target: eventTarget, type: eventType
                   } = this.#event;
-                  if (eventKey === 'Tab' &&
-                      ((eventType === 'keydown' && eventTarget !== node) ||
-                       (eventType === 'keyup' && eventTarget === node))) {
-                    bool = true;
-                  } else if (!this.#lastFocusVisible ||
-                             relatedTarget === this.#lastFocusVisible) {
-                    bool = true;
+                  // this.#event is irrelevant if eventTarget === relatedTarget
+                  if (eventTarget === relatedTarget) {
+                    if (this.#lastFocusVisible === null) {
+                      bool = true;
+                    } else if (focusTarget === this.#lastFocusVisible) {
+                      bool = true;
+                    }
+                  } else if (eventKey === 'Tab') {
+                    if ((eventType === 'keydown' && eventTarget !== node) ||
+                        (eventType === 'keyup' && eventTarget === node)) {
+                      if (eventTarget === focusTarget) {
+                        if (this.#lastFocusVisible === null) {
+                          bool = true;
+                        } else if (eventTarget === this.#lastFocusVisible &&
+                                   relatedTarget === null) {
+                          bool = true;
+                        }
+                      } else {
+                        bool = true;
+                      }
+                    }
+                  } else if (eventKey) {
+                    if ((eventType === 'keydown' || eventType === 'keyup') &&
+                        eventTarget === node) {
+                      bool = true;
+                    }
                   }
                 } else if (relatedTarget === null ||
                            relatedTarget === this.#lastFocusVisible) {

diff --git a/test/finder.test.js b/test/finder.test.js
@@ -216,6 +216,7 @@ describe('Finder', () => {
         undefined,
         undefined,
         undefined,
+        undefined,
         undefined
       ], 'result');
     });
@@ -4954,6 +4955,37 @@ describe('Finder', () => {
       assert.deepEqual([...res], [], 'result');
     });
 
+    it('should get matched node', () => {
+      const leaf = {
+        children: null,
+        name: 'focus-visible',
+        type: PS_CLASS_SELECTOR
+      };
+      const node = document.createElement('button');
+      const parent = document.createElement('form');
+      parent.appendChild(node);
+      document.getElementById('div0').appendChild(parent);
+      const finder = new Finder(window);
+      document.body.dispatchEvent(new window.KeyboardEvent('keydown', {
+        key: 'Tab'
+      }));
+      node.focus();
+      node.dispatchEvent(new window.KeyboardEvent('keyup', {
+        key: 'Tab'
+      }));
+      node.dispatchEvent(new window.KeyboardEvent('keydown', {
+        key: 'Shift'
+      }));
+      node.dispatchEvent(new window.KeyboardEvent('keyup', {
+        key: 'Shift'
+      }));
+      finder.setup(':focus-visible', node);
+      const res = finder._matchPseudoClassSelector(leaf, node, {});
+      assert.deepEqual([...res], [
+        node
+      ], 'result');
+    });
+
     it('should get matched node', () => {
       const leaf = {
         children: null,
@@ -5045,6 +5077,46 @@ describe('Finder', () => {
       ], 'result');
     });
 
+    it('should not match', () => {
+      const leaf = {
+        children: null,
+        name: 'focus-visible',
+        type: PS_CLASS_SELECTOR
+      };
+      const node = document.createElement('button');
+      const node2 = document.createElement('button');
+      const parent = document.createElement('form');
+      node.type = 'button';
+      node2.type = 'button';
+      parent.appendChild(node);
+      parent.appendChild(node2);
+      document.getElementById('div0').appendChild(parent);
+      const finder = new Finder(window);
+      document.body.dispatchEvent(new window.KeyboardEvent('keydown', {
+        key: 'Tab'
+      }));
+      node.focus();
+      node.dispatchEvent(new window.KeyboardEvent('keyup', {
+        key: 'Tab'
+      }));
+      finder.setup(':focus-visible', node);
+      const res = finder._matchPseudoClassSelector(leaf, node, {});
+      assert.deepEqual([...res], [
+        node
+      ], 'result');
+      node2.dispatchEvent(new window.MouseEvent('mousedown', {
+        buttons: 1
+      }));
+      node2.focus();
+      node2.dispatchEvent(new window.MouseEvent('mouseup', {
+        buttons: 0
+      }));
+      node2.click();
+      finder.setup(':focus-visible', node2);
+      const res2 = finder._matchPseudoClassSelector(leaf, node2, {});
+      assert.deepEqual([...res2], [], 'result');
+    });
+
     it('should get matched node', () => {
       const leaf = {
         children: null,