accessible-emoji.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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 = exports["default"] = {
  22. meta: {
  23. docs: {
  24. description: 'Enforce emojis are wrapped in `<span>` and provide screenreader access.',
  25. url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/accessible-emoji.md'
  26. },
  27. deprecated: true,
  28. schema: [schema]
  29. },
  30. create: function create(context) {
  31. var elementType = (0, _getElementType["default"])(context);
  32. return {
  33. JSXOpeningElement: function JSXOpeningElement(node) {
  34. var literalChildValue = node.parent.children.find(function (child) {
  35. return child.type === 'Literal' || child.type === 'JSXText';
  36. });
  37. if (literalChildValue && (0, _emojiRegex["default"])().test(literalChildValue.value)) {
  38. var elementIsHidden = (0, _isHiddenFromScreenReader["default"])(elementType(node), node.attributes);
  39. if (elementIsHidden) {
  40. return; // emoji is decorative
  41. }
  42. var rolePropValue = (0, _jsxAstUtils.getLiteralPropValue)((0, _jsxAstUtils.getProp)(node.attributes, 'role'));
  43. var ariaLabelProp = (0, _jsxAstUtils.getProp)(node.attributes, 'aria-label');
  44. var arialLabelledByProp = (0, _jsxAstUtils.getProp)(node.attributes, 'aria-labelledby');
  45. var hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
  46. var isSpan = elementType(node) === 'span';
  47. if (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
  48. context.report({
  49. node,
  50. message: errorMessage
  51. });
  52. }
  53. }
  54. }
  55. };
  56. }
  57. };
  58. module.exports = exports.default;