accessible-emoji.js 2.3 KB

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