@atlaskit/reactions 36.0.2 → 36.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 36.0.3
+
+### Patch Changes
+
+- [`e14a534a5823b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e14a534a5823b) -
+  Add aria-modal="false" and "aria-labelledby" to quick reactions
+- Updated dependencies
+
 ## 36.0.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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; }
 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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "36.0.1";
+var packageVersion = "36.0.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.compiled.css

@@ -1,8 +1,15 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
+._1reo15vq{overflow-x:hidden}
+._4t3it94y{height:1px}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqswstnw{position:absolute}
+._o5721q9c{white-space:nowrap}
+._ogto7mnp{clip:rect(1px,1px,1px,1px)}
 ._s7n4nkob{vertical-align:middle}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}

package/dist/cjs/components/ReactionPicker.js

@@ -20,6 +20,7 @@ var _main = require("@atlaskit/popper/main");
 var _reference = require("@atlaskit/popper/reference");
 var _constants = require("@atlaskit/theme/constants");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
 var _useCloseManager = require("../hooks/useCloseManager");
 var _useDelayedState3 = require("../hooks/useDelayedState");
 var _useFocusTrap = require("../hooks/useFocusTrap");
@@ -36,6 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var pickerStyle = null;
 var popupWrapperStyle = null;
 var popupStyle = null;
+var visuallyHiddenStyle = null;
 var additionalStyles = {
   selectorContainer: "_1e0c1txw"
 };
@@ -54,6 +56,7 @@ var RENDER_REACTIONPICKERPANEL_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTI
  * Emoji Picker Controller Id for Accessibility Labels
  */
 var PICKER_CONTROL_ID = 'emoji-picker';
+var PICKER_LABEL_ID = 'emoji-picker-label';
 /**
  * Picker component for adding reactions
  */
@@ -412,7 +415,9 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       update = _ref3.update;
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "dialog",
-      "aria-label": formatMessage(_i18n.messages.popperWrapperLabel),
+      "aria-label": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? undefined : formatMessage(_i18n.messages.popperWrapperLabel),
+      "aria-modal": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? 'false' : undefined,
+      "aria-labelledby": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
@@ -431,7 +436,13 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
       tabIndex: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
-    }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
+    }, (0, _fg.fg)('platform_a11y_fixes_reading_order') ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
+    }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+      as: "h2",
+      size: "small",
+      id: PICKER_LABEL_ID
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.popperWrapperLabel))) : null, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
       update: update,
       settings: settings
     }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "36.0.1";
+const packageVersion = "36.0.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker.compiled.css

@@ -1,8 +1,15 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
+._1reo15vq{overflow-x:hidden}
+._4t3it94y{height:1px}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqswstnw{position:absolute}
+._o5721q9c{white-space:nowrap}
+._ogto7mnp{clip:rect(1px,1px,1px,1px)}
 ._s7n4nkob{vertical-align:middle}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}

package/dist/es2019/components/ReactionPicker.js

@@ -10,6 +10,7 @@ import { Popper } from '@atlaskit/popper/main';
 import { Reference } from '@atlaskit/popper/reference';
 import { layers } from '@atlaskit/theme/constants';
 import { Box } from '@atlaskit/primitives/compiled';
+import Heading from '@atlaskit/heading/heading';
 import { useCloseManagerV2 } from '../hooks/useCloseManager';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
@@ -23,6 +24,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const pickerStyle = null;
 const popupWrapperStyle = null;
 const popupStyle = null;
+const visuallyHiddenStyle = null;
 const additionalStyles = {
   selectorContainer: "_1e0c1txw"
 };
@@ -41,6 +43,7 @@ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
  * Emoji Picker Controller Id for Accessibility Labels
  */
 const PICKER_CONTROL_ID = 'emoji-picker';
+const PICKER_LABEL_ID = 'emoji-picker-label';
 /**
  * Picker component for adding reactions
  */
@@ -367,7 +370,9 @@ export const PopperWrapper = props => {
   }) => {
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
-      "aria-label": formatMessage(messages.popperWrapperLabel),
+      "aria-label": fg('platform_a11y_fixes_reading_order') ? undefined : formatMessage(messages.popperWrapperLabel),
+      "aria-modal": fg('platform_a11y_fixes_reading_order') ? 'false' : undefined,
+      "aria-labelledby": fg('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: {
@@ -388,7 +393,13 @@ export const PopperWrapper = props => {
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
       tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
-    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+    }, fg('platform_a11y_fixes_reading_order') ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
+    }, /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
+      size: "small",
+      id: PICKER_LABEL_ID
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.popperWrapperLabel))) : null, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update,
       settings: settings
     }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "36.0.1";
+var packageVersion = "36.0.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionPicker.compiled.css

@@ -1,8 +1,15 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsbt94y{width:1px}
 ._1e0c1txw{display:flex}
 ._1pra1o8l.miniMode{display:inline-block}
+._1reo15vq{overflow-x:hidden}
+._4t3it94y{height:1px}
 ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqswstnw{position:absolute}
+._o5721q9c{white-space:nowrap}
+._ogto7mnp{clip:rect(1px,1px,1px,1px)}
 ._s7n4nkob{vertical-align:middle}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}

package/dist/esm/components/ReactionPicker.js

@@ -14,6 +14,7 @@ import { Popper } from '@atlaskit/popper/main';
 import { Reference } from '@atlaskit/popper/reference';
 import { layers } from '@atlaskit/theme/constants';
 import { Box } from '@atlaskit/primitives/compiled';
+import Heading from '@atlaskit/heading/heading';
 import { useCloseManagerV2 } from '../hooks/useCloseManager';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
@@ -27,6 +28,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var pickerStyle = null;
 var popupWrapperStyle = null;
 var popupStyle = null;
+var visuallyHiddenStyle = null;
 var additionalStyles = {
   selectorContainer: "_1e0c1txw"
 };
@@ -45,6 +47,7 @@ export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
  * Emoji Picker Controller Id for Accessibility Labels
  */
 var PICKER_CONTROL_ID = 'emoji-picker';
+var PICKER_LABEL_ID = 'emoji-picker-label';
 /**
  * Picker component for adding reactions
  */
@@ -403,7 +406,9 @@ export var PopperWrapper = function PopperWrapper(props) {
       update = _ref3.update;
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
-      "aria-label": formatMessage(messages.popperWrapperLabel),
+      "aria-label": fg('platform_a11y_fixes_reading_order') ? undefined : formatMessage(messages.popperWrapperLabel),
+      "aria-modal": fg('platform_a11y_fixes_reading_order') ? 'false' : undefined,
+      "aria-labelledby": fg('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
@@ -422,7 +427,13 @@ export var PopperWrapper = function PopperWrapper(props) {
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
       tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
-    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+    }, fg('platform_a11y_fixes_reading_order') ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
+    }, /*#__PURE__*/React.createElement(Heading, {
+      as: "h2",
+      size: "small",
+      id: PICKER_LABEL_ID
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.popperWrapperLabel))) : null, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update,
       settings: settings
     }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "36.0.2",
+	"version": "36.0.3",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
 		"@atlaskit/spinner": "^20.3.0",
 		"@atlaskit/tabs": "^21.1.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^163.0.0",
+		"@atlaskit/tmp-editor-statsig": "^164.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -76,6 +76,7 @@
 		"@atlassian/a11y-jest-testing": "^0.17.0",
 		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
+		"@atlassian/ufo": "^0.9.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",