@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/lib/rules/control-has-associated-label.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxAstUtils = require("jsx-ast-utils");
+var _arrayIncludes = _interopRequireDefault(require("array-includes"));
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _isDOMElement = _interopRequireDefault(require("../util/isDOMElement"));
+var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
+var _isInteractiveElement = _interopRequireDefault(require("../util/isInteractiveElement"));
+var _isInteractiveRole = _interopRequireDefault(require("../util/isInteractiveRole"));
+var _mayHaveAccessibleLabel = _interopRequireDefault(require("../util/mayHaveAccessibleLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce controls are associated with a text label.
+ * @author Jesse Beach
+ *
+ * 
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var errorMessage = 'A control must be associated with a text label.';
+var ignoreList = ['link'];
+var schema = (0, _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
+  }
+});
+var _default = exports["default"] = {
+  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: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    var options = context.options[0] || {};
+    var _options$labelAttribu = options.labelAttributes,
+      labelAttributes = _options$labelAttribu === void 0 ? [] : _options$labelAttribu,
+      _options$controlCompo = options.controlComponents,
+      controlComponents = _options$controlCompo === void 0 ? [] : _options$controlCompo,
+      _options$ignoreElemen = options.ignoreElements,
+      ignoreElements = _options$ignoreElemen === void 0 ? [] : _options$ignoreElemen,
+      _options$ignoreRoles = options.ignoreRoles,
+      ignoreRoles = _options$ignoreRoles === void 0 ? [] : _options$ignoreRoles;
+    var newIgnoreElements = new Set([].concat(ignoreElements, ignoreList));
+    var rule = function rule(node) {
+      var tag = elementType(node.openingElement);
+      var role = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(node.openingElement.attributes, 'role'));
+      // Ignore interactive elements that might get their label from a source
+      // that cannot be discerned from static analysis, like
+      // <label><input />Save</label>
+      if (newIgnoreElements.has(tag)) {
+        return;
+      }
+      // Ignore roles that are "interactive" but should not require a label.
+      if ((0, _arrayIncludes["default"])(ignoreRoles, role)) {
+        return;
+      }
+      var props = node.openingElement.attributes;
+      var nodeIsDOMElement = (0, _isDOMElement["default"])(tag);
+      var nodeIsHiddenFromScreenReader = (0, _isHiddenFromScreenReader["default"])(tag, props);
+      var nodeIsInteractiveElement = (0, _isInteractiveElement["default"])(tag, props);
+      var nodeIsInteractiveRole = (0, _isInteractiveRole["default"])(tag, props);
+      var nodeIsControlComponent = controlComponents.indexOf(tag) > -1;
+      if (nodeIsHiddenFromScreenReader) {
+        return;
+      }
+      var hasAccessibleLabel = true;
+      if (nodeIsInteractiveElement || nodeIsDOMElement && nodeIsInteractiveRole || nodeIsControlComponent) {
+        // Prevent crazy recursion.
+        var recursionDepth = Math.min(options.depth === undefined ? 2 : options.depth, 25);
+        hasAccessibleLabel = (0, _mayHaveAccessibleLabel["default"])(node, recursionDepth, labelAttributes, elementType, controlComponents);
+      }
+      if (!hasAccessibleLabel) {
+        context.report({
+          node: node.openingElement,
+          message: errorMessage
+        });
+      }
+    };
+
+    // Create visitor selectors.
+    return {
+      JSXElement: rule
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/heading-has-content.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _hasAccessibleChild = _interopRequireDefault(require("../util/hasAccessibleChild"));
+var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce heading (h1, h2, etc) elements contain accessible content.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var errorMessage = 'Headings must have content and the content must be accessible by a screen reader.';
+var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var schema = (0, _schemas.generateObjSchema)({
+  components: _schemas.arraySchema
+});
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/heading-has-content.md',
+      description: 'Enforce heading (`h1`, `h2`, etc) elements contain accessible content.'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    return {
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        var options = context.options[0] || {};
+        var componentOptions = options.components || [];
+        var typeCheck = headings.concat(componentOptions);
+        var nodeType = elementType(node);
+
+        // Only check 'h*' elements and custom types.
+        if (typeCheck.indexOf(nodeType) === -1) {
+          return;
+        }
+        if ((0, _hasAccessibleChild["default"])(node.parent, elementType)) {
+          return;
+        }
+        if ((0, _isHiddenFromScreenReader["default"])(nodeType, node.attributes)) {
+          return;
+        }
+        context.report({
+          node,
+          message: errorMessage
+        });
+      }
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/html-has-lang.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxAstUtils = require("jsx-ast-utils");
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce html element has lang prop.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var errorMessage = '<html> elements must have the lang prop.';
+var schema = (0, _schemas.generateObjSchema)();
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/html-has-lang.md',
+      description: 'Enforce `<html>` element has `lang` prop.'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    return {
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        var type = elementType(node);
+        if (type && type !== 'html') {
+          return;
+        }
+        var lang = (0, _jsxAstUtils.getPropValue)((0, _jsxAstUtils.getProp)(node.attributes, 'lang'));
+        if (lang) {
+          return;
+        }
+        context.report({
+          node,
+          message: errorMessage
+        });
+      }
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/iframe-has-title.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxAstUtils = require("jsx-ast-utils");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _schemas = require("../util/schemas");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce iframe elements have a title attribute.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var errorMessage = '<iframe> elements must have a unique title property.';
+var schema = (0, _schemas.generateObjSchema)();
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/iframe-has-title.md',
+      description: 'Enforce iframe elements have a title attribute.'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    return {
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        var type = elementType(node);
+        if (type && type !== 'iframe') {
+          return;
+        }
+        var title = (0, _jsxAstUtils.getPropValue)((0, _jsxAstUtils.getProp)(node.attributes, 'title'));
+        if (title && typeof title === 'string') {
+          return;
+        }
+        context.report({
+          node,
+          message: errorMessage
+        });
+      }
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/img-redundant-alt.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxAstUtils = require("jsx-ast-utils");
+var _arrayIncludes = _interopRequireDefault(require("array-includes"));
+var _stringPrototype = _interopRequireDefault(require("string.prototype.includes"));
+var _safeRegexTest = _interopRequireDefault(require("safe-regex-test"));
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce img alt attribute does not have the word image, picture, or photo.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var REDUNDANT_WORDS = ['image', 'photo', 'picture'];
+var errorMessage = 'Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop.';
+var schema = (0, _schemas.generateObjSchema)({
+  components: _schemas.arraySchema,
+  words: _schemas.arraySchema
+});
+var isASCII = (0, _safeRegexTest["default"])(/[\x20-\x7F]+/);
+function containsRedundantWord(value, redundantWords) {
+  var lowercaseRedundantWords = redundantWords.map(function (redundantWord) {
+    return redundantWord.toLowerCase();
+  });
+  if (isASCII(value)) {
+    return value.split(/\s+/).some(function (valueWord) {
+      return (0, _arrayIncludes["default"])(lowercaseRedundantWords, valueWord.toLowerCase());
+    });
+  }
+  return lowercaseRedundantWords.some(function (redundantWord) {
+    return (0, _stringPrototype["default"])(value.toLowerCase(), redundantWord);
+  });
+}
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/img-redundant-alt.md',
+      description: 'Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    return {
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        var options = context.options[0] || {};
+        var componentOptions = options.components || [];
+        var typesToValidate = ['img'].concat(componentOptions);
+        var nodeType = elementType(node);
+
+        // Only check 'label' elements and custom types.
+        if (typesToValidate.indexOf(nodeType) === -1) {
+          return;
+        }
+        var altProp = (0, _jsxAstUtils.getProp)(node.attributes, 'alt');
+        // Return if alt prop is not present.
+        if (altProp === undefined) {
+          return;
+        }
+        var value = (0, _jsxAstUtils.getLiteralPropValue)(altProp);
+        var isVisible = (0, _isHiddenFromScreenReader["default"])(nodeType, node.attributes) === false;
+        var _options$words = options.words,
+          words = _options$words === void 0 ? [] : _options$words;
+        var redundantWords = REDUNDANT_WORDS.concat(words);
+        if (typeof value === 'string' && isVisible) {
+          var hasRedundancy = containsRedundantWord(value, redundantWords);
+          if (hasRedundancy === true) {
+            context.report({
+              node,
+              message: errorMessage
+            });
+          }
+        }
+      }
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/interactive-supports-focus.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ariaQuery = require("aria-query");
+var _jsxAstUtils = require("jsx-ast-utils");
+var _arrayIncludes = _interopRequireDefault(require("array-includes"));
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _isDisabledElement = _interopRequireDefault(require("../util/isDisabledElement"));
+var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
+var _isInteractiveElement = _interopRequireDefault(require("../util/isInteractiveElement"));
+var _isInteractiveRole = _interopRequireDefault(require("../util/isInteractiveRole"));
+var _isNonInteractiveElement = _interopRequireDefault(require("../util/isNonInteractiveElement"));
+var _isNonInteractiveRole = _interopRequireDefault(require("../util/isNonInteractiveRole"));
+var _isPresentationRole = _interopRequireDefault(require("../util/isPresentationRole"));
+var _getTabIndex = _interopRequireDefault(require("../util/getTabIndex"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce that elements with onClick handlers must be tabbable.
+ * @author Ethan Cohen
+ * 
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var schema = (0, _schemas.generateObjSchema)({
+  tabbable: (0, _schemas.enumArraySchema)(_ariaQuery.roles.keys().filter(function (name) {
+    return !_ariaQuery.roles.get(name)["abstract"] && _ariaQuery.roles.get(name).superClass.some(function (klasses) {
+      return (0, _arrayIncludes["default"])(klasses, 'widget');
+    });
+  }))
+});
+var interactiveProps = [].concat(_jsxAstUtils.eventHandlersByType.mouse, _jsxAstUtils.eventHandlersByType.keyboard);
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/interactive-supports-focus.md',
+      description: 'Enforce that elements with interactive handlers like `onClick` must be focusable.'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var elementType = (0, _getElementType["default"])(context);
+    return {
+      JSXOpeningElement: function JSXOpeningElement(node) {
+        var tabbable = context.options && context.options[0] && context.options[0].tabbable || [];
+        var attributes = node.attributes;
+        var type = elementType(node);
+        var hasInteractiveProps = (0, _jsxAstUtils.hasAnyProp)(attributes, interactiveProps);
+        var hasTabindex = (0, _getTabIndex["default"])((0, _jsxAstUtils.getProp)(attributes, 'tabIndex')) !== undefined;
+        if (!_ariaQuery.dom.has(type)) {
+          // Do not test higher level JSX components, as we do not know what
+          // low-level DOM element this maps to.
+          return;
+        }
+        if (!hasInteractiveProps || (0, _isDisabledElement["default"])(attributes) || (0, _isHiddenFromScreenReader["default"])(type, attributes) || (0, _isPresentationRole["default"])(type, attributes)) {
+          // Presentation is an intentional signal from the author that this
+          // element is not meant to be perceivable. For example, a click screen
+          // to close a dialog .
+          return;
+        }
+        if (hasInteractiveProps && (0, _isInteractiveRole["default"])(type, attributes) && !(0, _isInteractiveElement["default"])(type, attributes) && !(0, _isNonInteractiveElement["default"])(type, attributes) && !(0, _isNonInteractiveRole["default"])(type, attributes) && !hasTabindex) {
+          var role = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(attributes, 'role'));
+          if ((0, _arrayIncludes["default"])(tabbable, role)) {
+            // Always tabbable, tabIndex = 0
+            context.report({
+              node,
+              message: "Elements with the '".concat(role, "' interactive role must be tabbable.")
+            });
+          } else {
+            // Focusable, tabIndex = -1 or 0
+            context.report({
+              node,
+              message: "Elements with the '".concat(role, "' interactive role must be focusable.")
+            });
+          }
+        }
+      }
+    };
+  }
+};
+module.exports = exports.default;

package/lib/rules/label-has-associated-control.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxAstUtils = require("jsx-ast-utils");
+var _schemas = require("../util/schemas");
+var _getElementType = _interopRequireDefault(require("../util/getElementType"));
+var _mayContainChildComponent = _interopRequireDefault(require("../util/mayContainChildComponent"));
+var _mayHaveAccessibleLabel = _interopRequireDefault(require("../util/mayHaveAccessibleLabel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @fileoverview Enforce label tags have an associated control.
+ * @author Jesse Beach
+ *
+ * 
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+var errorMessage = 'A form label must be associated with a control.';
+var errorMessageNoLabel = 'A form label must have accessible text.';
+var schema = (0, _schemas.generateObjSchema)({
+  labelComponents: _schemas.arraySchema,
+  labelAttributes: _schemas.arraySchema,
+  controlComponents: _schemas.arraySchema,
+  assert: {
+    description: 'Assert that the label has htmlFor, a nested label, both or either',
+    type: 'string',
+    "enum": ['htmlFor', 'nesting', 'both', 'either']
+  },
+  depth: {
+    description: 'JSX tree depth limit to check for accessible label',
+    type: 'integer',
+    minimum: 0
+  }
+});
+function validateID(node, context) {
+  var _settings$jsxA11y$at, _settings$jsxA11y, _settings$jsxA11y$att;
+  var settings = context.settings;
+  var htmlForAttributes = (_settings$jsxA11y$at = (_settings$jsxA11y = settings['jsx-a11y']) === null || _settings$jsxA11y === void 0 ? void 0 : (_settings$jsxA11y$att = _settings$jsxA11y.attributes) === null || _settings$jsxA11y$att === void 0 ? void 0 : _settings$jsxA11y$att["for"]) !== null && _settings$jsxA11y$at !== void 0 ? _settings$jsxA11y$at : ['htmlFor'];
+  for (var i = 0; i < htmlForAttributes.length; i += 1) {
+    var attribute = htmlForAttributes[i];
+    if ((0, _jsxAstUtils.hasProp)(node.attributes, attribute)) {
+      var htmlForAttr = (0, _jsxAstUtils.getProp)(node.attributes, attribute);
+      var htmlForValue = (0, _jsxAstUtils.getPropValue)(htmlForAttr);
+      return htmlForAttr !== false && !!htmlForValue;
+    }
+  }
+  return false;
+}
+var _default = exports["default"] = {
+  meta: {
+    docs: {
+      description: 'Enforce that a `label` tag has a text label and an associated control.',
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md'
+    },
+    schema: [schema]
+  },
+  create: function create(context) {
+    var options = context.options[0] || {};
+    var labelComponents = options.labelComponents || [];
+    var assertType = options.assert || 'either';
+    var componentNames = ['label'].concat(labelComponents);
+    var elementType = (0, _getElementType["default"])(context);
+    var rule = function rule(node) {
+      if (componentNames.indexOf(elementType(node.openingElement)) === -1) {
+        return;
+      }
+      var controlComponents = ['input', 'meter', 'output', 'progress', 'select', 'textarea'].concat(options.controlComponents || []);
+      // Prevent crazy recursion.
+      var recursionDepth = Math.min(options.depth === undefined ? 2 : options.depth, 25);
+      var hasLabelId = validateID(node.openingElement, context);
+      // Check for multiple control components.
+      var hasNestedControl = controlComponents.some(function (name) {
+        return (0, _mayContainChildComponent["default"])(node, name, recursionDepth, elementType);
+      });
+      var hasAccessibleLabel = (0, _mayHaveAccessibleLabel["default"])(node, recursionDepth, options.labelAttributes, elementType, controlComponents);
+      if (!hasAccessibleLabel) {
+        context.report({
+          node: node.openingElement,
+          message: errorMessageNoLabel
+        });
+        return;
+      }
+      switch (assertType) {
+        case 'htmlFor':
+          if (hasLabelId) {
+            return;
+          }
+          break;
+        case 'nesting':
+          if (hasNestedControl) {
+            return;
+          }
+          break;
+        case 'both':
+          if (hasLabelId && hasNestedControl) {
+            return;
+          }
+          break;
+        case 'either':
+          if (hasLabelId || hasNestedControl) {
+            return;
+          }
+          break;
+        default:
+          break;
+      }
+
+      // htmlFor case
+      context.report({
+        node: node.openingElement,
+        message: errorMessage
+      });
+    };
+
+    // Create visitor selectors.
+    return {
+      JSXElement: rule
+    };
+  }
+};
+module.exports = exports.default;