interactive-supports-focus.js 4.3 KB

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