fix(gather-internals): handle non-HTMLElement nodes (#5161)

Use `Node` instead of `HTMLElement` when checking the element internals
prop value so we include all node types, such as SVGs. This is the
follow up to a [similar problem in the `get-aria-value`
pr](#5109 (comment)).

I also added an eslint rule to prevent us from using `HTMLElements` in
the future so we don't make the same mistake again.

Author: straker

eslint.config.js

@@ -84,6 +84,20 @@ module.exports = [
             'CallExpression[callee.object.property.name=actualNode][callee.property.name=contains]',
           message:
             "Don't use node.contains(node2) as it doesn't work across shadow DOM. Use axe.utils.contains(node, node2) instead."
+        },
+        {
+          // window.HTMLElement
+          selector:
+            'MemberExpression[object.name=window][property.name=HTMLElement]',
+          message:
+            "Don't use window.HTMLElement as it doesn't include all DOM node types, such as SVGs. Use window.Node instead."
+        },
+        {
+          // globalThis.HTMLElement
+          selector:
+            'MemberExpression[object.name=globalThis][property.name=HTMLElement]',
+          message:
+            "Don't use globalThis.HTMLElement as it doesn't include all DOM node types, such as SVGs. Use globalThis.Node instead."
         }
       ]
     },

lib/gather-internals/walk-tree.js

@@ -37,7 +37,7 @@ export function walkTree(tree = document.body) {
 
           // convert idref to node ancestry
           // aria props can use unattached nodes but those won't be used by the browser to calculate the prop value
-          if (value instanceof globalThis.HTMLElement) {
+          if (value instanceof globalThis.Node) {
             internals[prop] = value.isConnected
               ? { type: 'HTMLElement', value: getAncestry(value) }
               : undefined;