interactive-supports-focus.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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 _arrayIncludes = _interopRequireDefault(require("array-includes"));
  7. var _schemas = require("../util/schemas");
  8. var _isDisabledElement = _interopRequireDefault(require("../util/isDisabledElement"));
  9. var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
  10. var _isInteractiveElement = _interopRequireDefault(require("../util/isInteractiveElement"));
  11. var _isInteractiveRole = _interopRequireDefault(require("../util/isInteractiveRole"));
  12. var _isNonInteractiveElement = _interopRequireDefault(require("../util/isNonInteractiveElement"));
  13. var _isNonInteractiveRole = _interopRequireDefault(require("../util/isNonInteractiveRole"));
  14. var _isPresentationRole = _interopRequireDefault(require("../util/isPresentationRole"));
  15. var _getTabIndex = _interopRequireDefault(require("../util/getTabIndex"));
  16. /**
  17. * @fileoverview Enforce that elements with onClick handlers must be tabbable.
  18. * @author Ethan Cohen
  19. *
  20. */
  21. // ----------------------------------------------------------------------------
  22. // Rule Definition
  23. // ----------------------------------------------------------------------------
  24. var schema = (0, _schemas.generateObjSchema)({
  25. tabbable: (0, _schemas.enumArraySchema)((0, _toConsumableArray2["default"])(_ariaQuery.roles.keys()).filter(function (name) {
  26. return !_ariaQuery.roles.get(name)["abstract"];
  27. }).filter(function (name) {
  28. return _ariaQuery.roles.get(name).superClass.some(function (klasses) {
  29. return (0, _arrayIncludes["default"])(klasses, 'widget');
  30. });
  31. }))
  32. });
  33. var domElements = (0, _toConsumableArray2["default"])(_ariaQuery.dom.keys());
  34. var interactiveProps = [].concat((0, _toConsumableArray2["default"])(_jsxAstUtils.eventHandlersByType.mouse), (0, _toConsumableArray2["default"])(_jsxAstUtils.eventHandlersByType.keyboard));
  35. module.exports = {
  36. meta: {
  37. docs: {
  38. url: 'https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules/interactive-supports-focus.md'
  39. },
  40. schema: [schema]
  41. },
  42. create: function create(context) {
  43. return {
  44. JSXOpeningElement: function JSXOpeningElement(node) {
  45. var tabbable = context.options && context.options[0] && context.options[0].tabbable || [];
  46. var attributes = node.attributes;
  47. var type = (0, _jsxAstUtils.elementType)(node);
  48. var hasInteractiveProps = (0, _jsxAstUtils.hasAnyProp)(attributes, interactiveProps);
  49. var hasTabindex = (0, _getTabIndex["default"])((0, _jsxAstUtils.getProp)(attributes, 'tabIndex')) !== undefined;
  50. if (!(0, _arrayIncludes["default"])(domElements, type)) {
  51. // Do not test higher level JSX components, as we do not know what
  52. // low-level DOM element this maps to.
  53. return;
  54. }
  55. if (!hasInteractiveProps || (0, _isDisabledElement["default"])(attributes) || (0, _isHiddenFromScreenReader["default"])(type, attributes) || (0, _isPresentationRole["default"])(type, attributes)) {
  56. // Presentation is an intentional signal from the author that this
  57. // element is not meant to be perceivable. For example, a click screen
  58. // to close a dialog .
  59. return;
  60. }
  61. if (hasInteractiveProps && (0, _isInteractiveRole["default"])(type, attributes) && !(0, _isInteractiveElement["default"])(type, attributes) && !(0, _isNonInteractiveElement["default"])(type, attributes) && !(0, _isNonInteractiveRole["default"])(type, attributes) && !hasTabindex) {
  62. var role = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(attributes, 'role'));
  63. if ((0, _arrayIncludes["default"])(tabbable, role)) {
  64. // Always tabbable, tabIndex = 0
  65. context.report({
  66. node,
  67. message: "Elements with the '".concat(role, "' interactive role must be tabbable.")
  68. });
  69. } else {
  70. // Focusable, tabIndex = -1 or 0
  71. context.report({
  72. node,
  73. message: "Elements with the '".concat(role, "' interactive role must be focusable.")
  74. });
  75. }
  76. }
  77. }
  78. };
  79. }
  80. };