@jsxtools/eslint-plugin-jsx-a11y/lib/rule/mouse-events-have-key-events.cjs

Static AST checker for accessibility rules on JSX elements for flat ESLint Config.

const ariaQuery = require('aria-query');
const jsxAstUtils = require('../util/module/jsx-ast-utils.cjs');
const schemas = require('../util/schemas.cjs');

const schema = schemas.generateObjSchema({
  hoverInHandlers: {
    ...schemas.arraySchema,
    description: "An array of events that need to be accompanied by `onFocus`"
  },
  hoverOutHandlers: {
    ...schemas.arraySchema,
    description: "An array of events that need to be accompanied by `onBlur`"
  }
});
const DEFAULT_HOVER_IN_HANDLERS = ["onMouseOver"];
const DEFAULT_HOVER_OUT_HANDLERS = ["onMouseOut"];
const ruleOfMouseEventsHaveKeyEvents = {
  meta: {
    docs: {
      url: "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/mouse-events-have-key-events.md",
      description: "Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users."
    },
    schema: [schema]
  },
  create: (context) => ({
    JSXOpeningElement: (node) => {
      const { name } = node.name;
      if (!ariaQuery.dom.get(name)) {
        return;
      }
      const { options } = context;
      const hoverInHandlers = options[0]?.hoverInHandlers ?? DEFAULT_HOVER_IN_HANDLERS;
      const hoverOutHandlers = options[0]?.hoverOutHandlers ?? DEFAULT_HOVER_OUT_HANDLERS;
      const { attributes } = node;
      const firstHoverInHandlerWithValue = hoverInHandlers.find((handler) => {
        const prop = jsxAstUtils.getProp(attributes, handler);
        const propValue = jsxAstUtils.getPropValue(prop);
        return propValue != null;
      });
      if (firstHoverInHandlerWithValue != null) {
        const hasOnFocus = jsxAstUtils.getProp(attributes, "onFocus");
        const onFocusValue = jsxAstUtils.getPropValue(hasOnFocus);
        if (hasOnFocus === false || onFocusValue === null || onFocusValue === void 0) {
          context.report({
            node: jsxAstUtils.getProp(attributes, firstHoverInHandlerWithValue),
            message: `${firstHoverInHandlerWithValue} must be accompanied by onFocus for accessibility.`
          });
        }
      }
      const firstHoverOutHandlerWithValue = hoverOutHandlers.find((handler) => {
        const prop = jsxAstUtils.getProp(attributes, handler);
        const propValue = jsxAstUtils.getPropValue(prop);
        return propValue != null;
      });
      if (firstHoverOutHandlerWithValue != null) {
        const hasOnBlur = jsxAstUtils.getProp(attributes, "onBlur");
        const onBlurValue = jsxAstUtils.getPropValue(hasOnBlur);
        if (hasOnBlur === false || onBlurValue === null || onBlurValue === void 0) {
          context.report({
            node: jsxAstUtils.getProp(attributes, firstHoverOutHandlerWithValue),
            message: `${firstHoverOutHandlerWithValue} must be accompanied by onBlur for accessibility.`
          });
        }
      }
    }
  })
};

module.exports = ruleOfMouseEventsHaveKeyEvents;