fix: treat <option> as inherently interactive

Add <option> and <datalist> to INHERENTLY_INTERACTIVE_TAGS in
template-click-events-have-key-events. Both map to widget-descendant
ARIA roles per aria-query's elementRoles (option -> option,
datalist -> listbox), matching jsx-a11y's isInteractiveElement
treatment. Previously, <option {{on "click" h}}> was reported as a
false positive (confirmed via audit fixture B1).

Updates audit/peer-parity.js to move <option> from DIVERGENCE to
parity, and adds <datalist> alongside. <menuitem> is left out: the
HTML element is deprecated and not present in aria-query's
elementRoles, so its interactivity status is ambiguous and warrants
separate discussion.

Author: johanrd

lib/rules/template-click-events-have-key-events.js

@@ -2,14 +2,18 @@ const { dom } = require('aria-query');
 
 // Elements whose default HTML semantics make them interactive — a click handler
 // here doesn't need a keyboard fallback because keyboard focus/activation is
-// already built in.
+// already built in. Derived from aria-query's `elementRoles` (tags whose
+// inherent ARIA role descends from `widget`); matches jsx-a11y's
+// `isInteractiveElement` treatment.
 const INHERENTLY_INTERACTIVE_TAGS = new Set([
   'button',
+  'datalist',
   'details',
   'embed',
   'iframe',
   'input',
   'label',
+  'option',
   'select',
   'summary',
   'textarea',

tests/audit/click-events-have-key-events/peer-parity.js

@@ -68,6 +68,11 @@ ruleTester.run('audit:click-events-have-key-events (gts)', rule, {
     '<template><button {{on "click" this.onClick}} class="foo"></button></template>',
     '<template><select {{on "click" this.onClick}} class="foo"></select></template>',
     '<template><textarea {{on "click" this.onClick}} class="foo"></textarea></template>',
+    // <option> / <datalist> are interactive per aria-query elementRoles
+    // (map to `option` and `listbox` widget roles respectively).
+    // jsx-a11y / vue: valid.
+    '<template><option {{on "click" this.onClick}} class="foo"></option></template>',
+    '<template><datalist {{on "click" this.onClick}}></datalist></template>',
 
     // <a> becomes interactive when it has href.
     // jsx-a11y / vue / angular / lit: valid.
@@ -103,12 +108,6 @@ ruleTester.run('audit:click-events-have-key-events (gts)', rule, {
     // looks at native HTML interactivity. So `<div role="button" {{on "click"}}>`
     // would be flagged by us. Captured below in DIVERGENCE.
 
-    // === DIVERGENCE — <option> treated as interactive by peers ===
-    // jsx-a11y: valid (`<option onClick={...} className="foo" />`).
-    // vue: valid.
-    // aria-query includes <option> in `dom`, but our INHERENTLY_INTERACTIVE_TAGS
-    // set does not — so we FLAG this. FALSE POSITIVE. See invalid block below.
-
     // === DIVERGENCE — `<input type="hidden">` treated as valid by peers ===
     // jsx-a11y / vue: valid.
     // Our rule: `isInteractiveElement` returns false for `type="hidden"`, and
@@ -200,14 +199,6 @@ ruleTester.run('audit:click-events-have-key-events (gts)', rule, {
       errors: [{ messageId: 'needsKeyEvent' }],
     },
 
-    // === DIVERGENCE — <option> flagged (peers treat as valid) ===
-    // jsx-a11y / vue: VALID. Our rule: INVALID.
-    {
-      code: '<template><option {{on "click" this.onClick}} class="foo"></option></template>',
-      output: null,
-      errors: [{ messageId: 'needsKeyEvent' }],
-    },
-
     // === DIVERGENCE — <input type="hidden"> flagged (peers treat as valid) ===
     // jsx-a11y / vue: VALID (hidden inputs don't need keyboard support).
     // Our rule: `isInteractiveElement` short-circuits to false for type=hidden,
@@ -304,6 +295,8 @@ hbsRuleTester.run('audit:click-events-have-key-events (hbs)', rule, {
     '<button {{on "click" this.a}}></button>',
     '<a href="/x" {{on "click" this.a}}></a>',
     '<input type="text" {{on "click" this.a}} />',
+    '<option {{on "click" this.a}}></option>',
+    '<datalist {{on "click" this.a}}></datalist>',
 
     // Presentation / none.
     '<div role="presentation" {{on "click" this.a}}></div>',
@@ -339,12 +332,6 @@ hbsRuleTester.run('audit:click-events-have-key-events (hbs)', rule, {
       output: null,
       errors: [{ messageId: 'needsKeyEvent' }],
     },
-    // DIVERGENCE — <option> flagged (peers treat as valid).
-    {
-      code: '<option {{on "click" this.a}}></option>',
-      output: null,
-      errors: [{ messageId: 'needsKeyEvent' }],
-    },
     // DIVERGENCE — widget role (angular treats as interactive).
     {
       code: '<div role="button" {{on "click" this.a}}></div>',

tests/lib/rules/template-click-events-have-key-events.js

@@ -19,6 +19,8 @@ ruleTester.run('template-click-events-have-key-events', rule, {
     '<template><a href="/x" {{on "click" this.track}}>Link</a></template>',
     '<template><input type="checkbox" {{on "click" this.toggle}} /></template>',
     '<template><summary {{on "click" this.noop}}>More</summary></template>',
+    '<template><option {{on "click" this.h}}>Foo</option></template>',
+    '<template><datalist {{on "click" this.h}}></datalist></template>',
 
     // Hidden from AT.
     '<template><div aria-hidden="true" {{on "click" this.noop}}></div></template>',
@@ -87,6 +89,8 @@ hbsRuleTester.run('template-click-events-have-key-events', rule, {
     '<div></div>',
     '<button {{on "click" this.toggle}}>Toggle</button>',
     '<a href="/x" {{on "click" this.track}}>Link</a>',
+    '<option {{on "click" this.h}}>Foo</option>',
+    '<datalist {{on "click" this.h}}></datalist>',
     '<div role="presentation" {{on "click" this.noop}}></div>',
     '<div aria-hidden="true" {{on "click" this.noop}}></div>',
     '<div {{on "click" this.onClick}} {{on "keydown" this.onKey}}></div>',