fix(template-no-role-presentation-on-focusable): tighten UNCONDITIONAL_FOCUSABLE_TAGS to HTML §6.6.3 default-focusable list — drop datalist, details, option (none are own focusable areas)

Author: johanrd

lib/rules/template-no-role-presentation-on-focusable.js

@@ -69,16 +69,29 @@ function hasPresentationRole(node) {
 // focusable by default — clicks on a label forward to its associated control,
 // but the label itself isn't in the tab order. So it's excluded here even
 // though `isHtmlInteractiveContent` would return true for it.
+// Elements whose default rendering creates a focusable area per HTML §6.6.3
+// "Focusable area" + the suggested-focusable list in the `tabindex` section
+// (https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute):
+//   - <button>, <select>, <textarea> — form controls
+//   - <iframe>, <embed> — navigable containers
+//   - <summary> when first child of <details> — the disclosure widget itself
+// Conditionally-focusable elements are checked elsewhere via
+// `isHtmlInteractiveContent`: <a>/<area> need `href`; <input> needs a non-Hidden
+// `type`; <audio>/<video> need `controls`; <img> needs `usemap`.
+//
+// Intentionally NOT in this set, per spec:
+//   - <details> — its disclosure focus lives on the first <summary> child, not
+//     the details element itself.
+//   - <option> — focus stays on the host <select>; option is not its own
+//     focusable area.
+//   - <datalist> — `display: none` in UA stylesheets; a hidden data provider.
 const UNCONDITIONAL_FOCUSABLE_TAGS = new Set([
   'button',
   'select',
   'textarea',
   'iframe',
   'embed',
   'summary',
-  'details',
-  'option',
-  'datalist',
 ]);
 
 // Form-control tags whose `disabled` attribute removes them from the tab order

tests/lib/rules/template-no-role-presentation-on-focusable.js

@@ -23,6 +23,19 @@ ruleTester.run('template-no-role-presentation-on-focusable', rule, {
     // <input type="hidden"> isn't focusable.
     '<template><input type="hidden" role="presentation" /></template>',
 
+    // <datalist> is a hidden data provider (display:none in UA stylesheets);
+    // its options surface inside the associated input's UA popup, not on the
+    // datalist element itself — it's not a focusable area.
+    '<template><datalist role="presentation"></datalist></template>',
+
+    // <details> itself is not a focusable area per HTML §6.6.3 — its first
+    // <summary> child is the disclosure focus target. role="presentation" on
+    // the details element does not trigger the spec's conflict resolution.
+    '<template><details role="presentation"><summary>Title</summary></details></template>',
+
+    // <option> is not its own focusable area; focus stays on the host <select>.
+    '<template><option role="presentation">Foo</option></template>',
+
     // <a> without href isn't focusable.
     '<template><a role="presentation">Not a link</a></template>',