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

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