accessible-emoji.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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 _emojiRegex = _interopRequireDefault(require("emoji-regex"));
  8. var _jsxAstUtils = require("jsx-ast-utils");
  9. var _schemas = require("../util/schemas");
  10. var _getElementType = _interopRequireDefault(require("../util/getElementType"));
  11. var _isHiddenFromScreenReader = _interopRequireDefault(require("../util/isHiddenFromScreenReader"));
  12. /**
  13. * @fileoverview Enforce emojis are wrapped in <span> and provide screenreader access.
  14. * @author Ethan Cohen
  15. */
  16. // ----------------------------------------------------------------------------
  17. // Rule Definition
  18. // ----------------------------------------------------------------------------
  19. var errorMessage = 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.';
  20. var schema = (0, _schemas.generateObjSchema)();
  21. var _default = {
  22. meta: {
  23. docs: {
  24. url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/accessible-emoji.md'
  25. },
  26. deprecated: true,
  27. schema: [schema]
  28. },
  29. create: function create(context) {
  30. var elementType = (0, _getElementType["default"])(context);
  31. return {
  32. JSXOpeningElement: function JSXOpeningElement(node) {
  33. var literalChildValue = node.parent.children.find(function (child) {
  34. return child.type === 'Literal' || child.type === 'JSXText';
  35. });
  36. if (literalChildValue && (0, _emojiRegex["default"])().test(literalChildValue.value)) {
  37. var elementIsHidden = (0, _isHiddenFromScreenReader["default"])(elementType(node), node.attributes);
  38. if (elementIsHidden) {
  39. return; // emoji is decorative
  40. }
  41. var rolePropValue = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(node.attributes, 'role'));
  42. var ariaLabelProp = (0, _jsxAstUtils.getProp)(node.attributes, 'aria-label');
  43. var arialLabelledByProp = (0, _jsxAstUtils.getProp)(node.attributes, 'aria-labelledby');
  44. var hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
  45. var isSpan = elementType(node) === 'span';
  46. if (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
  47. context.report({
  48. node,
  49. message: errorMessage
  50. });
  51. }
  52. }
  53. }
  54. };
  55. }
  56. };
  57. exports["default"] = _default;
  58. module.exports = exports.default;