no-noninteractive-tabindex.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  8. var _ariaQuery = require("aria-query");
  9. var _jsxAstUtils = require("jsx-ast-utils");
  10. var _arrayIncludes = _interopRequireDefault(require("array-includes"));
  11. var _getElementType = _interopRequireDefault(require("../util/getElementType"));
  12. var _isInteractiveElement = _interopRequireDefault(require("../util/isInteractiveElement"));
  13. var _isInteractiveRole = _interopRequireDefault(require("../util/isInteractiveRole"));
  14. var _isNonLiteralProperty = _interopRequireDefault(require("../util/isNonLiteralProperty"));
  15. var _schemas = require("../util/schemas");
  16. var _getTabIndex = _interopRequireDefault(require("../util/getTabIndex"));
  17. function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
  18. function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  19. * @fileoverview Disallow tabindex on static and noninteractive elements
  20. * @author jessebeach
  21. *
  22. */ // ----------------------------------------------------------------------------
  23. // Rule Definition
  24. // ----------------------------------------------------------------------------
  25. var errorMessage = '`tabIndex` should only be declared on interactive elements.';
  26. var schema = (0, _schemas.generateObjSchema)({
  27. roles: _objectSpread(_objectSpread({}, _schemas.arraySchema), {}, {
  28. description: 'An array of ARIA roles'
  29. }),
  30. tags: _objectSpread(_objectSpread({}, _schemas.arraySchema), {}, {
  31. description: 'An array of HTML tag names'
  32. })
  33. });
  34. var _default = exports["default"] = {
  35. meta: {
  36. docs: {
  37. url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-noninteractive-tabindex.md',
  38. description: '`tabIndex` should only be declared on interactive elements.'
  39. },
  40. schema: [schema]
  41. },
  42. create: function create(context) {
  43. var options = context.options;
  44. var elementType = (0, _getElementType["default"])(context);
  45. return {
  46. JSXOpeningElement: function (_JSXOpeningElement) {
  47. function JSXOpeningElement(_x) {
  48. return _JSXOpeningElement.apply(this, arguments);
  49. }
  50. JSXOpeningElement.toString = function () {
  51. return _JSXOpeningElement.toString();
  52. };
  53. return JSXOpeningElement;
  54. }(function (node) {
  55. var type = elementType(node);
  56. var attributes = node.attributes;
  57. var tabIndexProp = (0, _jsxAstUtils.getProp)(attributes, 'tabIndex');
  58. var tabIndex = (0, _getTabIndex["default"])(tabIndexProp);
  59. // Early return;
  60. if (typeof tabIndex === 'undefined') {
  61. return;
  62. }
  63. var role = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(node.attributes, 'role'));
  64. if (!_ariaQuery.dom.has(type)) {
  65. // Do not test higher level JSX components, as we do not know what
  66. // low-level DOM element this maps to.
  67. return;
  68. }
  69. // Allow for configuration overrides.
  70. var _ref = options[0] || {},
  71. tags = _ref.tags,
  72. roles = _ref.roles,
  73. allowExpressionValues = _ref.allowExpressionValues;
  74. if (tags && (0, _arrayIncludes["default"])(tags, type)) {
  75. return;
  76. }
  77. if (roles && (0, _arrayIncludes["default"])(roles, role)) {
  78. return;
  79. }
  80. if (allowExpressionValues === true && (0, _isNonLiteralProperty["default"])(attributes, 'role')) {
  81. // Special case if role is assigned using ternary with literals on both side
  82. var roleProp = (0, _jsxAstUtils.getProp)(attributes, 'role');
  83. if (roleProp && roleProp.type === 'JSXAttribute' && roleProp.value.type === 'JSXExpressionContainer') {
  84. if (roleProp.value.expression.type === 'ConditionalExpression') {
  85. if (roleProp.value.expression.consequent.type === 'Literal' && roleProp.value.expression.alternate.type === 'Literal') {
  86. return;
  87. }
  88. }
  89. }
  90. return;
  91. }
  92. if ((0, _isInteractiveElement["default"])(type, attributes) || (0, _isInteractiveRole["default"])(type, attributes)) {
  93. return;
  94. }
  95. if (tabIndex >= 0) {
  96. context.report({
  97. node: tabIndexProp,
  98. message: errorMessage
  99. });
  100. }
  101. })
  102. };
  103. }
  104. };
  105. module.exports = exports.default;