void 0} />` → error.
+ // vue: `
` → mouseOver error.
+ // angular: `
` → error.
+ // lit: html`
` → error.
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+
+ // mouseout alone — same cross-peer parity.
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+
+ // lit: `html`
`` → two errors.
+ // Our rule reports each pairing on the offending modifier's source location,
+ // so here the errors come out in source order: mouseout (hover-out) first,
+ // then mouseover (hover-in). jsx-a11y also reports both, in its own JSX-
+ // attribute order. Peer parity modulo error ordering.
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }, { messageId: 'hoverInMissing' }],
+ },
+
+ // angular: `
` → mouseout unpaired
+ // (focus does not pair with mouseout). We mirror this: hover-out requires
+ // blur/focusout, not focus/focusin.
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+
+ // === jsx-a11y custom-options parity ===
+ // `{ hoverInHandlers: ['onMouseOver'], hoverOutHandlers: ['onMouseOut'] }`
+ // with `
` → two errors.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['mouseover'], hoverOutHandlers: ['mouseout'] }],
+ errors: [{ messageId: 'hoverInMissing' }, { messageId: 'hoverOutMissing' }],
+ },
+
+ // jsx-a11y: `{ hoverInHandlers: ['onPointerEnter'], hoverOutHandlers: ['onPointerLeave'] }`
+ // with `
` → two errors.
+ // Translation uses lower-case native event names.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['pointerenter'], hoverOutHandlers: ['pointerleave'] }],
+ errors: [{ messageId: 'hoverInMissing' }, { messageId: 'hoverOutMissing' }],
+ },
+
+ // jsx-a11y: `{ hoverInHandlers: ['onMouseOver'] }` with `
` → error.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['mouseover'] }],
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ // jsx-a11y: same shape with onPointerEnter.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['pointerenter'] }],
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ // jsx-a11y: `{ hoverOutHandlers: ['onMouseOut'] }` with `
`.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverOutHandlers: ['mouseout'] }],
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ // jsx-a11y: `{ hoverOutHandlers: ['onPointerLeave'] }` — pointerleave alone flagged.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverOutHandlers: ['pointerleave'] }],
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+
+ // === PEER-PARITY OPT-IN — mouseenter/mouseleave flag only with config ===
+ // Defaults match jsx-a11y / angular / lit: mouseover/mouseout only.
+ // Users who want the non-bubbling per-element variants checked opt in.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['mouseover', 'mouseenter'] }],
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverOutHandlers: ['mouseout', 'mouseleave'] }],
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+
+ // === AUDIT-SKIP — peer constructs that don't translate to Ember ===
+ //
+ // jsx-a11y: spread props `
`.
+ // Rule still flags because spread doesn't count as a known onFocus.
+ // There is no HBS equivalent of "spread an opaque props bag onto an
+ // element". `...attributes` exists but is always splatted on the
+ // top-level element and is not a runtime object we could detect a
+ // "focus handler" within. SKIP.
+ //
+ // jsx-a11y: `
`.
+ // The rule inspects the JSX value expression and treats `undefined` as
+ // "no real handler". Our rule does not analyze modifier argument
+ // expressions — the presence of `{{on "focus" …}}` is taken at face
+ // value. This peer case would therefore be reported as VALID by us
+ // despite jsx-a11y flagging it. SKIP (not a faithful translation).
+ //
+ // vue: `@focus='null'` is treated as "no handler"; same reasoning applies.
+ // SKIP.
+ //
+ // lit-a11y: `allowCustomElements: false` + `allowList: ['custom-button']`.
+ // Our rule does not expose a custom-element policy knob; its behavior
+ // is always "skip non-dom-map tags". SKIP the options matrix; the
+ // default (no custom-element flagging) is covered in valid[] above.
+ ],
+});
+
+const hbsRuleTester = new RuleTester({
+ parser: require.resolve('ember-eslint-parser/hbs'),
+ parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('audit:mouse-events-have-key-events (hbs)', rule, {
+ valid: [
+ // Peer-parity base cases in raw hbs.
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ // PascalCase component — not a DOM element.
+ '
',
+ // Dasherized custom element — not in aria-query's dom map.
+ '
',
+ // PEER PARITY — mouseenter/mouseleave excluded from default, matching
+ // jsx-a11y / angular / lit.
+ '
',
+ '
',
+ ],
+ invalid: [
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ // PEER-PARITY OPT-IN — mouseenter/mouseleave flag only with config.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['mouseover', 'mouseenter'] }],
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverOutHandlers: ['mouseout', 'mouseleave'] }],
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ // angular parity — mouseout + focus is still invalid.
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ ],
+});
diff --git a/tests/lib/rules/template-mouse-events-have-key-events.js b/tests/lib/rules/template-mouse-events-have-key-events.js
new file mode 100644
index 0000000000..cf258cc7c1
--- /dev/null
+++ b/tests/lib/rules/template-mouse-events-have-key-events.js
@@ -0,0 +1,126 @@
+'use strict';
+
+const rule = require('../../../lib/rules/template-mouse-events-have-key-events');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+ parser: require.resolve('ember-eslint-parser'),
+ parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-mouse-events-have-key-events', rule, {
+ valid: [
+ // No mouse listeners — rule doesn't fire.
+ '
',
+ '
',
+
+ // Hover-in paired with focus.
+ '
',
+ '
',
+ '
',
+
+ // Hover-out paired with blur.
+ '
',
+ '
',
+ // mouseout also pairs with focusout (the bubbling counterpart of blur).
+ '
',
+
+ // Both pairings.
+ `
+
+ `,
+
+ // Component — not a DOM element.
+ '
',
+
+ // Custom element — `isNativeElement` excludes hyphenated tags so the rule skips.
+ '
',
+
+ // Default handler set matches jsx-a11y — mouseenter/mouseleave are NOT
+ // flagged by default (opt-in via `hoverInHandlers`/`hoverOutHandlers`).
+ '
',
+ '
',
+
+ // Configurable handler set — opt in to mouseenter via config.
+ {
+ code: '
',
+ options: [{ hoverInHandlers: ['mouseover', 'mouseenter'] }],
+ },
+ ],
+ invalid: [
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ // mouseenter flags ONLY when opted into via config.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverInHandlers: ['mouseover', 'mouseenter'] }],
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ // mouseleave flags ONLY when opted into via config.
+ {
+ code: '
',
+ output: null,
+ options: [{ hoverOutHandlers: ['mouseout', 'mouseleave'] }],
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ {
+ // Both unpaired → two errors on the same element.
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverInMissing' }, { messageId: 'hoverOutMissing' }],
+ },
+ {
+ // Hover-in paired correctly but hover-out unpaired.
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ {
+ // Hover-out paired with a NON-matching focus variant — still flagged.
+ // mouseout pairs with blur or focusout; focus alone doesn't satisfy.
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ ],
+});
+
+const hbsRuleTester = new RuleTester({
+ parser: require.resolve('ember-eslint-parser/hbs'),
+ parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-mouse-events-have-key-events', rule, {
+ valid: [
+ '
',
+ '
',
+ '
',
+ '
',
+ ],
+ invalid: [
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverInMissing' }],
+ },
+ {
+ code: '
',
+ output: null,
+ errors: [{ messageId: 'hoverOutMissing' }],
+ },
+ ],
+});