@atlaskit/emoji 67.5.2 → 67.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/emoji
 
+## 67.5.3
+
+### Patch Changes
+
+- [`aa456f60b3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aa456f60b3d) - [ux] [ECA11Y-31] Refactored Upload own emoji component accessibility
+
 ## 67.5.2
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiErrorMessage.js

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiErrorScreenreaderTestId = exports.emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTestId = exports.emojiErrorIconTestId = exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 /** @jsx jsx */
@@ -28,29 +26,25 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     tooltip = props.tooltip;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var visualContent = tooltip ? (0, _react2.jsx)("div", {
+  var visualContent = tooltip ? (0, _react.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
-  }, (0, _react2.jsx)(_tooltip.default, {
+  }, (0, _react.jsx)(_tooltip.default, {
     content: message,
     position: "top",
     testId: emojiErrorMessageTooltipTestId
-  }, (0, _react2.jsx)(_error.default, {
+  }, (0, _react.jsx)(_error.default, {
     label: formatMessage(_i18n.messages.error),
     size: "medium",
     testId: emojiErrorIconTestId
-  }))) : (0, _react2.jsx)("div", {
+  }))) : (0, _react.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
-  }, (0, _react2.jsx)(_error.default, {
+  }, (0, _react.jsx)(_error.default, {
     label: formatMessage(_i18n.messages.error),
     size: "small"
   }), message);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_visuallyHidden.default, {
-    id: emojiErrorScreenreaderTestId
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.error, function (errMsg) {
-    return (0, _react2.jsx)("span", null, errMsg, " ", message, ".");
-  })), visualContent);
+  return visualContent;
 };
 var _default = EmojiErrorMessage;
 exports.default = _default;

package/dist/cjs/components/common/EmojiUploadPicker.js

@@ -19,7 +19,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _i18n = require("../i18n");
-var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
+var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview"));
 var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
@@ -34,7 +34,6 @@ var uploadEmojiComponentTestId = 'upload-emoji-component';
 exports.uploadEmojiComponentTestId = uploadEmojiComponentTestId;
 var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
 exports.cancelEmojiUploadPickerTestId = cancelEmojiUploadPickerTestId;
-var addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -117,24 +116,18 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-required": true
   })), (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileBrowse
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
-      hidden: true,
-      id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), (0, _react2.jsx)("span", {
-      hidden: true,
-      id: addCustomEmojiChooseFileScreenreaderId
-    }, emojiChooseFileTitle), (0, _react2.jsx)(_FileChooser.default, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
+    return (0, _react2.jsx)(_FileChooser.default, {
       label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
-      ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(addCustomEmojiChooseFileScreenreaderId),
       isDisabled: disableChooser
-    }));
+    });
   }))), (0, _react2.jsx)("div", {
-    css: _styles.emojiUploadBottom
+    css: _styles.emojiUploadBottom,
+    id: fileChooserButtonDescriptionId
   }, !errorMessage ? (0, _react2.jsx)("p", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _react2.jsx)(_EmojiErrorMessage.default, {
     messageStyles: _styles.emojiChooseFileErrorMessage,
     message: errorMessage

package/dist/cjs/components/common/FileChooser.js

@@ -17,7 +17,6 @@ exports.fileUploadInputTestId = fileUploadInputTestId;
 var FileChooser = function FileChooser(props) {
   var accept = props.accept,
     ariaDescribedBy = props.ariaDescribedBy,
-    ariaLabelledBy = props.ariaLabelledBy,
     isDisabled = props.isDisabled,
     label = props.label,
     onChange = props.onChange,
@@ -39,7 +38,6 @@ var FileChooser = function FileChooser(props) {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
     testId: chooseFileButtonTestId,
     ref: fileButtonRef
   }, label), /*#__PURE__*/_react.default.createElement("input", {

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.5.2"
+      packageVersion: "67.5.3"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiErrorMessage.js

@@ -1,10 +1,9 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import VisuallyHidden from '@atlaskit/visually-hidden';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 export const emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export const emojiErrorMessageTestId = 'emoji-error-message';
@@ -37,8 +36,6 @@ const EmojiErrorMessage = props => {
     label: formatMessage(messages.error),
     size: "small"
   }), message);
-  return jsx(Fragment, null, jsx(VisuallyHidden, {
-    id: emojiErrorScreenreaderTestId
-  }, jsx(FormattedMessage, messages.error, errMsg => jsx("span", null, errMsg, " ", message, "."))), visualContent);
+  return visualContent;
 };
 export default EmojiErrorMessage;

package/dist/es2019/components/common/EmojiUploadPicker.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Fragment, useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
+import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -9,7 +9,7 @@ import FocusLock from 'react-focus-lock';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
-import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
+import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
@@ -17,7 +17,6 @@ import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emoji
 export const uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export const uploadEmojiComponentTestId = 'upload-emoji-component';
 export const cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
-const addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 const sanitizeName = name => {
   // prevent / replace certain characters, allow others
@@ -103,22 +102,16 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     "aria-required": true
   })), jsx("span", {
     css: uploadChooseFileBrowse
-  }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => jsx(Fragment, null, jsx("span", {
-    hidden: true,
-    id: fileChooserButtonDescriptionId
-  }, screenReaderDescription), jsx("span", {
-    hidden: true,
-    id: addCustomEmojiChooseFileScreenreaderId
-  }, emojiChooseFileTitle), jsx(FileChooser, {
+  }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => jsx(FileChooser, {
     label: emojiChooseFileTitle,
     onChange: onChooseFile,
     onClick: onClick,
     accept: "image/png,image/jpeg,image/gif",
     ariaDescribedBy: fileChooserButtonDescriptionId,
-    ariaLabelledBy: `${emojiErrorScreenreaderTestId} ${addCustomEmojiChooseFileScreenreaderId}`,
     isDisabled: disableChooser
-  }))))), jsx("div", {
-    css: emojiUploadBottom
+  })))), jsx("div", {
+    css: emojiUploadBottom,
+    id: fileChooserButtonDescriptionId
   }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
     messageStyles: emojiChooseFileErrorMessage,
     message: errorMessage

package/dist/es2019/components/common/FileChooser.js

@@ -6,7 +6,6 @@ const FileChooser = props => {
   const {
     accept,
     ariaDescribedBy,
-    ariaLabelledBy,
     isDisabled,
     label,
     onChange,
@@ -29,7 +28,6 @@ const FileChooser = props => {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
     testId: chooseFileButtonTestId,
     ref: fileButtonRef
   }, label), /*#__PURE__*/React.createElement("input", {

package/dist/es2019/util/analytics/analytics.js

@@ -7,7 +7,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "67.5.2",
+    packageVersion: "67.5.3",
     ...attributes
   }
 });

package/dist/esm/components/common/EmojiErrorMessage.js

@@ -1,10 +1,9 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import VisuallyHidden from '@atlaskit/visually-hidden';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 export var emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export var emojiErrorMessageTestId = 'emoji-error-message';
@@ -34,10 +33,6 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     label: formatMessage(messages.error),
     size: "small"
   }), message);
-  return jsx(Fragment, null, jsx(VisuallyHidden, {
-    id: emojiErrorScreenreaderTestId
-  }, jsx(FormattedMessage, messages.error, function (errMsg) {
-    return jsx("span", null, errMsg, " ", message, ".");
-  })), visualContent);
+  return visualContent;
 };
 export default EmojiErrorMessage;

package/dist/esm/components/common/EmojiUploadPicker.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
+import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -12,7 +12,7 @@ import FocusLock from 'react-focus-lock';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
-import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
+import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
@@ -20,7 +20,6 @@ import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emoji
 export var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export var uploadEmojiComponentTestId = 'upload-emoji-component';
 export var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
-var addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -103,24 +102,18 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     "aria-required": true
   })), jsx("span", {
     css: uploadChooseFileBrowse
-  }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-    return jsx(Fragment, null, jsx("span", {
-      hidden: true,
-      id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), jsx("span", {
-      hidden: true,
-      id: addCustomEmojiChooseFileScreenreaderId
-    }, emojiChooseFileTitle), jsx(FileChooser, {
+  }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
+    return jsx(FileChooser, {
       label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
-      ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(addCustomEmojiChooseFileScreenreaderId),
       isDisabled: disableChooser
-    }));
+    });
   }))), jsx("div", {
-    css: emojiUploadBottom
+    css: emojiUploadBottom,
+    id: fileChooserButtonDescriptionId
   }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
     messageStyles: emojiChooseFileErrorMessage,
     message: errorMessage

package/dist/esm/components/common/FileChooser.js

@@ -5,7 +5,6 @@ export var fileUploadInputTestId = 'file-upload';
 var FileChooser = function FileChooser(props) {
   var accept = props.accept,
     ariaDescribedBy = props.ariaDescribedBy,
-    ariaLabelledBy = props.ariaLabelledBy,
     isDisabled = props.isDisabled,
     label = props.label,
     onChange = props.onChange,
@@ -27,7 +26,6 @@ var FileChooser = function FileChooser(props) {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
     testId: chooseFileButtonTestId,
     ref: fileButtonRef
   }, label), /*#__PURE__*/React.createElement("input", {

package/dist/esm/util/analytics/analytics.js

@@ -12,7 +12,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.5.2"
+      packageVersion: "67.5.3"
     }, attributes)
   };
 };

package/dist/types/components/common/FileChooser.d.ts

@@ -1,7 +1,6 @@
 import { FC, ChangeEventHandler } from 'react';
 export interface Props {
     label: string;
-    ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     onChange?: ChangeEventHandler<any>;
     onClick?: () => void;

package/dist/types-ts4.5/components/common/FileChooser.d.ts

@@ -1,7 +1,6 @@
 import { FC, ChangeEventHandler } from 'react';
 export interface Props {
     label: string;
-    ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     onChange?: ChangeEventHandler<any>;
     onClick?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.5.2",
+  "version": "67.5.3",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.22.0",
+    "@atlaskit/tokens": "^1.24.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",