role-has-required-aria-props.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports["default"] = void 0;
  7. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  8. var _ariaQuery = require("aria-query");
  9. var _jsxAstUtils = require("jsx-ast-utils");
  10. var _schemas = require("../util/schemas");
  11. var _getElementType = _interopRequireDefault(require("../util/getElementType"));
  12. var _isSemanticRoleElement = _interopRequireDefault(require("../util/isSemanticRoleElement"));
  13. /**
  14. * @fileoverview Enforce that elements with ARIA roles must
  15. * have all required attributes for that role.
  16. * @author Ethan Cohen
  17. */
  18. // ----------------------------------------------------------------------------
  19. // Rule Definition
  20. // ----------------------------------------------------------------------------
  21. var errorMessage = function errorMessage(role, requiredProps) {
  22. return "Elements with the ARIA role \"".concat(role, "\" must have the following attributes defined: ").concat(String(requiredProps).toLowerCase());
  23. };
  24. var schema = (0, _schemas.generateObjSchema)();
  25. var _default = exports["default"] = {
  26. meta: {
  27. docs: {
  28. url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/role-has-required-aria-props.md',
  29. description: 'Enforce that elements with ARIA roles must have all required attributes for that role.'
  30. },
  31. schema: [schema]
  32. },
  33. create: function create(context) {
  34. var elementType = (0, _getElementType["default"])(context);
  35. return {
  36. JSXAttribute: function JSXAttribute(attribute) {
  37. var name = (0, _jsxAstUtils.propName)(attribute).toLowerCase();
  38. if (name !== 'role') {
  39. return;
  40. }
  41. var type = elementType(attribute.parent);
  42. if (!_ariaQuery.dom.get(type)) {
  43. return;
  44. }
  45. var roleAttrValue = (0, _jsxAstUtils.getLiteralPropValue)(attribute);
  46. var attributes = attribute.parent.attributes;
  47. // If value is undefined, then the role attribute will be dropped in the DOM.
  48. // If value is null, then getLiteralAttributeValue is telling us
  49. // that the value isn't in the form of a literal.
  50. if (roleAttrValue === undefined || roleAttrValue === null) {
  51. return;
  52. }
  53. var normalizedValues = String(roleAttrValue).toLowerCase().split(' ');
  54. var validRoles = normalizedValues.filter(function (val) {
  55. return (0, _toConsumableArray2["default"])(_ariaQuery.roles.keys()).indexOf(val) > -1;
  56. });
  57. // Check semantic DOM elements
  58. // For example, <input type="checkbox" role="switch" />
  59. if ((0, _isSemanticRoleElement["default"])(type, attributes)) {
  60. return;
  61. }
  62. // Check arbitrary DOM elements
  63. validRoles.forEach(function (role) {
  64. var _roles$get = _ariaQuery.roles.get(role),
  65. requiredPropKeyValues = _roles$get.requiredProps;
  66. var requiredProps = Object.keys(requiredPropKeyValues);
  67. if (requiredProps.length > 0) {
  68. var hasRequiredProps = requiredProps.every(function (prop) {
  69. return (0, _jsxAstUtils.getProp)(attributes, prop);
  70. });
  71. if (hasRequiredProps === false) {
  72. context.report({
  73. node: attribute,
  74. message: errorMessage(role.toLowerCase(), requiredProps)
  75. });
  76. }
  77. }
  78. });
  79. }
  80. };
  81. }
  82. };
  83. module.exports = exports.default;