refactor(template-interactive-supports-focus): extract isSuppressedFromFocus helper to deduplicate tabindex/contenteditable carve-outs

Author: johanrd

lib/rules/template-interactive-supports-focus.js

@@ -69,6 +69,24 @@ function isComponentInvocation(tag) {
 // inherent-focusability we'd otherwise grant the tag.
 const DISABLABLE_FORM_CONTROLS = new Set(['button', 'input', 'select', 'textarea', 'fieldset']);
 
+// True when the UA ignores otherwise-focusing attributes (`tabindex`,
+// `contenteditable`) on this element because the element is itself removed
+// from sequential focus navigation by HTML semantics:
+//   - disabled form controls (HTML §4.10.18.5)
+//   - <input type="hidden"> (no rendered element)
+function isSuppressedFromFocus(node, tag, getTextAttrValueFn) {
+  if (DISABLABLE_FORM_CONTROLS.has(tag) && findAttr(node, 'disabled')) {
+    return true;
+  }
+  if (tag === 'input') {
+    const type = getTextAttrValueFn(findAttr(node, 'type'));
+    if (typeof type === 'string' && type.trim().toLowerCase() === 'hidden') {
+      return true;
+    }
+  }
+  return false;
+}
+
 // Is the element inherently focusable without needing tabindex?
 function isInherentlyFocusable(node) {
   const tag = node.tag?.toLowerCase();
@@ -209,32 +227,16 @@ module.exports = {
         // HTML attribute names are case-insensitive, so accept `tabindex` or
         // any other casing (e.g. `tabIndex`, the React-style camelCase).
         const hasTabindex = node.attributes?.some((a) => a.name?.toLowerCase() === 'tabindex');
-        if (hasTabindex) {
-          const disabled = DISABLABLE_FORM_CONTROLS.has(tag) && findAttr(node, 'disabled');
-          let hiddenInput = false;
-          if (tag === 'input') {
-            const type = getTextAttrValue(findAttr(node, 'type'));
-            hiddenInput = typeof type === 'string' && type.trim().toLowerCase() === 'hidden';
-          }
-          if (!disabled && !hiddenInput) {
-            return;
-          }
+        if (hasTabindex && !isSuppressedFromFocus(node, tag, getTextAttrValue)) {
+          return;
         }
 
         // contenteditable also makes an element focusable, with the same
         // HTML-spec carve-outs as tabindex: the UA ignores it on disabled
         // form controls (HTML §4.10.18.5) and on <input type="hidden">
         // (no rendered element to edit), so the a11y conflict still stands.
-        if (isContentEditable(node)) {
-          const disabled = DISABLABLE_FORM_CONTROLS.has(tag) && findAttr(node, 'disabled');
-          let hiddenInput = false;
-          if (tag === 'input') {
-            const type = getTextAttrValue(findAttr(node, 'type'));
-            hiddenInput = typeof type === 'string' && type.trim().toLowerCase() === 'hidden';
-          }
-          if (!disabled && !hiddenInput) {
-            return;
-          }
+        if (isContentEditable(node) && !isSuppressedFromFocus(node, tag, getTextAttrValue)) {
+          return;
         }
 
         context.report({