@jsxtools/eslint-plugin-jsx-a11y/lib/rule/control-has-associated-label.cjs

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

const jsxAstUtils = require('../util/module/jsx-ast-utils.cjs');
const schemas = require('../util/schemas.cjs');
const getElementType = require('../util/getElementType.cjs');
const isDOMElement = require('../util/isDOMElement.cjs');
const isHiddenFromScreenReader = require('../util/isHiddenFromScreenReader.cjs');
const isInteractiveElement = require('../util/isInteractiveElement.cjs');
const isInteractiveRole = require('../util/isInteractiveRole.cjs');
const mayHaveAccessibleLabel = require('../util/mayHaveAccessibleLabel.cjs');

const errorMessage = "A control must be associated with a text label.";
const ignoreList = ["link"];
const schema = schemas.generateObjSchema({
  labelAttributes: schemas.arraySchema,
  controlComponents: schemas.arraySchema,
  ignoreElements: schemas.arraySchema,
  ignoreRoles: schemas.arraySchema,
  depth: {
    description: "JSX tree depth limit to check for accessible label",
    type: "integer",
    minimum: 0
  }
});
const ruleOfControlHasAssociatedLabel = {
  meta: {
    docs: {
      description: "Enforce that a control (an interactive element) has a text label.",
      url: "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label.md"
    },
    schema: [schema]
  },
  create: (context) => {
    const elementType = getElementType(context);
    const options = context.options[0] || {};
    const {
      labelAttributes = [],
      controlComponents = [],
      ignoreElements = [],
      ignoreRoles = []
    } = options;
    const newIgnoreElements = new Set([].concat(ignoreElements, ignoreList));
    const rule = (node) => {
      const tag = elementType(node.openingElement);
      const role = jsxAstUtils.getLiteralPropValue(jsxAstUtils.getProp(node.openingElement.attributes, "role"));
      if (newIgnoreElements.has(tag)) {
        return;
      }
      if (ignoreRoles.includes(role)) {
        return;
      }
      const props = node.openingElement.attributes;
      const nodeIsDOMElement = isDOMElement(tag);
      const nodeIsHiddenFromScreenReader = isHiddenFromScreenReader(tag, props);
      const nodeIsInteractiveElement = isInteractiveElement(tag, props);
      const nodeIsInteractiveRole = isInteractiveRole(tag, props);
      const nodeIsControlComponent = controlComponents.indexOf(tag) > -1;
      if (nodeIsHiddenFromScreenReader) {
        return;
      }
      let hasAccessibleLabel = true;
      if (nodeIsInteractiveElement || nodeIsDOMElement && nodeIsInteractiveRole || nodeIsControlComponent) {
        const recursionDepth = Math.min(
          options.depth === void 0 ? 2 : options.depth,
          25
        );
        hasAccessibleLabel = mayHaveAccessibleLabel(
          node,
          recursionDepth,
          labelAttributes
        );
      }
      if (!hasAccessibleLabel) {
        context.report({
          node: node.openingElement,
          message: errorMessage
        });
      }
    };
    return {
      JSXElement: rule
    };
  }
};

module.exports = ruleOfControlHasAssociatedLabel;