Fix focus handling (#72)

document.body should not match `:focus` by default
asamuzaK · May 6, 2024 · d9e32f8 · d9e32f8
1 parent 0abd86b
commit d9e32f8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/src/js/finder.js b/src/js/finder.js
@@ -962,7 +962,7 @@ export class Finder {
           break;
         }
         case 'focus': {
-          if (node === this.#content.activeElement) {
+          if (node === this.#content.activeElement && node.tabIndex >= 0) {
             let refNode = node;
             let focus = true;
             while (refNode) {
@@ -991,14 +991,16 @@ export class Finder {
           break;
         }
         case 'focus-within': {
-          let current = this.#content.activeElement;
           let active;
-          while (current) {
-            if (current === node) {
-              active = true;
-              break;
+          let current = this.#content.activeElement;
+          if (current.tabIndex >= 0) {
+            while (current) {
+              if (current === node) {
+                active = true;
+                break;
+              }
+              current = current.parentNode;
             }
-            current = current.parentNode;
           }
           if (active) {
             let refNode = node;

diff --git a/test/finder.test.js b/test/finder.test.js
@@ -3391,6 +3391,18 @@ describe('Finder', () => {
       ], 'result');
     });
 
+    it('should not match', () => {
+      const leaf = {
+        children: null,
+        name: 'focus',
+        type: SELECTOR_PSEUDO_CLASS
+      };
+      const finder = new Finder(window);
+      finder._setup(':focus', document.body);
+      const res = finder._matchPseudoClassSelector(leaf, document.body);
+      assert.deepEqual([...res], [], 'result');
+    });
+
     it('should not match', () => {
       const leaf = {
         children: null,
@@ -3658,6 +3670,18 @@ describe('Finder', () => {
       assert.deepEqual([...res], [], 'result');
     });
 
+    it('should not match', () => {
+      const leaf = {
+        children: null,
+        name: 'focus-within',
+        type: SELECTOR_PSEUDO_CLASS
+      };
+      const finder = new Finder(window);
+      finder._setup(':focus-within', document.body);
+      const res = finder._matchPseudoClassSelector(leaf, document.body);
+      assert.deepEqual([...res], [], 'result');
+    });
+
     it('should not match', () => {
       const leaf = {
         children: null,

diff --git a/test/wpt.test.js b/test/wpt.test.js
@@ -1510,6 +1510,8 @@ describe('local wpt test cases', () => {
       </div>
       `;
       document.body.innerHTML = html;
+      assert.isTrue(document.body === document.activeElement, 'active');
+      assert.isFalse(document.body.matches(':focus'), 'body');
       const node = document.getElementById('input');
       node.focus();
       assert.isTrue(node.matches(':focus'), 'before');
@@ -1528,6 +1530,8 @@ describe('local wpt test cases', () => {
       </div>
       `;
       document.body.innerHTML = html;
+      assert.isTrue(document.body === document.activeElement, 'active');
+      assert.isFalse(document.body.matches(':focus'), 'body');
       const node = document.getElementById('input');
       node.focus();
       assert.isTrue(node.matches(':focus'), 'before');