How to use eslint-plugin-jsx-a11y - 10 common examples

// ----------------------------------------------------------------------------
// Rule Definition
// ----------------------------------------------------------------------------

const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const altRule = require('eslint-plugin-jsx-a11y/lib/rules/iframe-has-title.js');
const { generateObjSchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');

const errorMessage = '

// ----------------------------------------------------------------------------
// Rule Definition
// ----------------------------------------------------------------------------

const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const altRule = require('eslint-plugin-jsx-a11y/lib/rules/tabindex-no-positive.js');
const { generateObjSchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');

const errorMessage = 'Avoid positive integer values for tabIndex.';

const schema = generateObjSchema();

module.exports = {
  meta: {
    docs: {
      url: 'https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/tabindex-no-positive.md'
    },
    schema: [schema],
  },

  create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VAttribute" (node) {
        const isTabindex = utils.isAttribute(node, 'tabindex')
        if (!isTabindex) {
          return;
        }

// ----------------------------------------------------------------------------

const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const altRule = require('eslint-plugin-jsx-a11y/lib/rules/no-distracting-elements.js');
const { generateObjSchema, enumArraySchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');

const errorMessage = element =>
  `Do not use <${element}> elements as they can create visual accessibility issues and are deprecated.`;

const DEFAULT_ELEMENTS = [
  'marquee',
  'blink',
];

const schema = generateObjSchema({
  elements: enumArraySchema(DEFAULT_ELEMENTS),
});

module.exports = {
  meta: {
    docs: {
      url: 'https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/no-distracting-elements.md'
    },
    schema: [schema],
  },

  create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VElement" (node) {
        const options = context.options[0] || {};
        const elementOptions = options.elements || DEFAULT_ELEMENTS;

// ----------------------------------------------------------------------------
// Rule Definition
// ----------------------------------------------------------------------------
const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const altRule = require('eslint-plugin-jsx-a11y/lib/rules/aria-role.js');
const { generateObjSchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');
const { dom, roles } = require('aria-query');

const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';

const schema = generateObjSchema({
  ignoreNonDOM: {
    type: 'boolean',
    default: false,
  },
});


module.exports = {
  meta: {
    docs: {
      url: 'https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/aria-role.md'
    },
    schema: [schema],
  },

  create (context) {

// ----------------------------------------------------------------------------
// Rule Definition
// ----------------------------------------------------------------------------

const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const altRule = require('eslint-plugin-jsx-a11y/lib/rules/role-has-required-aria-props.js');
const { generateObjSchema, arraySchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');
const { dom, roles } = require('aria-query');

const errorMessage = (role, requiredProps) =>
`Elements with the ARIA role "${role}" must have the following ` +
`attributes defined: ${String(requiredProps).toLowerCase()}`;

const schema = generateObjSchema();

module.exports = {
  meta: {
    docs: {
      url: 'https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/role-has-required-aria-props.md'
    },
    schema: [schema],
  },

  create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VStartTag" (node) {
        const element = node.parent;
        const type = utils.getElementType(element);
        const role = utils.getRoleValue(element)
        if (!role) {

|| utils.isPresentationRole(element)
        ) {
          return;
        // } else if (isInteractiveElement(type, props)) {  // todo
        //   return;
        } else if (utils.hasAnyEvent(element, requiredEvents)) {
          return;
        }

        // Visible, non-interactive elements with click handlers require one keyboard event listener.
        context.report({
          node,
          message: errorMessage,
        });
      }
    }, JsxRule.create(context))
  }
}

const nodeType = utils.getElementType(node);

        // Only check 'label' elements and custom types.
        if (typesToValidate.indexOf(nodeType) === -1) {
          return;
        }
        const required = options.required || { every: ['nesting', 'id'] };
        const allowChildren = options.allowChildren || false;
        if (!isValid(node, required, allowChildren)) {
          context.report({
            node,
            message: errorMessage,
          });
        }
      }
    }, JsxRule.create(context))
  }
}

message: mouseOverErrorMessage,
            });
          }
        }

        const outEvent = ['mouseout', 'mouseleave']
        if (utils.hasAnyEvent(node, outEvent)) {
          if (!utils.hasAnyEvent(node, ['blur', 'focusout'])) {
            context.report({
              node,
              message: mouseOutErrorMessage,
            });
          }
        }
      }
    }, JsxRule.create(context)) // todo rewrite
  }
}

const value = utils.getAttributeValue(node);
        if (value === null || typeof value !== 'string') {
          return;
        }
        const normalizedValues = String(value).toLowerCase().split(' ');
        const validRoles = [...roles.keys()].filter(role => roles.get(role).abstract === false);
        const isValid = normalizedValues.every(val => validRoles.indexOf(val) > -1);
        if (isValid === true) { return; }

        context.report({
          node: node,
          message: errorMessage
        });
      }
    }, altRule.create(context))
  }
};

const VueUtils = require('eslint-plugin-vue/lib/utils');
const utils = require('../utils');
const JsxRule = require('eslint-plugin-jsx-a11y/lib/rules/mouse-events-have-key-events.js');
const { generateObjSchema } = require('eslint-plugin-jsx-a11y/lib/util/schemas.js');

const mouseOverErrorMessage = 'mouseover or mouseenter or hover must be accompanied by focusin or focus for accessibility.';
const mouseOutErrorMessage = 'mouseout or mouseleave  must be accompanied by focusout or blur  for accessibility.';
const schema = generateObjSchema();

module.exports = {
  meta: {
    docs: {
      url: 'https://github.com/maranran/eslint-plugin-vue-a11y/blob/master/docs/rules/mouse-events-have-key-events.md'
    },
    schema: [schema]
  },
  create (context) {
    return VueUtils.defineTemplateBodyVisitor(context, {
      "VElement" (node) {
        const enterEvent = ['mouseover', 'mouseenter', 'hover']
        if (utils.hasAnyEvent(node, enterEvent)) {
          if (!utils.hasAnyEvent(node, ['focus', 'focusin'])) {
            context.report({
              node,