@atlaskit/reactions 36.0.2 → 36.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/analytics/index.js +1 -1
  3. package/dist/cjs/components/ReactionPicker.compiled.css +7 -0
  4. package/dist/cjs/components/ReactionPicker.js +13 -2
  5. package/dist/es2019/analytics/index.js +1 -1
  6. package/dist/es2019/components/ReactionPicker.compiled.css +7 -0
  7. package/dist/es2019/components/ReactionPicker.js +13 -2
  8. package/dist/esm/analytics/index.js +1 -1
  9. package/dist/esm/components/ReactionPicker.compiled.css +7 -0
  10. package/dist/esm/components/ReactionPicker.js +13 -2
  11. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 36.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 36.0.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`e14a534a5823b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e14a534a5823b) -
14
+ Add aria-modal="false" and "aria-labelledby" to quick reactions
15
+ - Updated dependencies
16
+
3
17
  ## 36.0.2
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/analytics/index.js CHANGED
@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
11
11
  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; }
12
12
  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
13
13
  var packageName = "@atlaskit/reactions";
14
- var packageVersion = "36.0.1";
14
+ var packageVersion = "36.0.3";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
package/dist/cjs/components/ReactionPicker.compiled.css CHANGED
@@ -1,8 +1,15 @@
1
1
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bsbt94y{width:1px}
2
4
  ._1e0c1txw{display:flex}
3
5
  ._1pra1o8l.miniMode{display:inline-block}
6
+ ._1reo15vq{overflow-x:hidden}
7
+ ._4t3it94y{height:1px}
4
8
  ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
5
9
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
10
+ ._kqswstnw{position:absolute}
11
+ ._o5721q9c{white-space:nowrap}
12
+ ._ogto7mnp{clip:rect(1px,1px,1px,1px)}
6
13
  ._s7n4nkob{vertical-align:middle}
7
14
  ._1hvw1o36:focus{outline-width:medium}
8
15
  ._49pcglyw:focus{outline-style:none}
package/dist/cjs/components/ReactionPicker.js CHANGED
@@ -20,6 +20,7 @@ var _main = require("@atlaskit/popper/main");
20
20
  var _reference = require("@atlaskit/popper/reference");
21
21
  var _constants = require("@atlaskit/theme/constants");
22
22
  var _compiled = require("@atlaskit/primitives/compiled");
23
+ var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
23
24
  var _useCloseManager = require("../hooks/useCloseManager");
24
25
  var _useDelayedState3 = require("../hooks/useDelayedState");
25
26
  var _useFocusTrap = require("../hooks/useFocusTrap");
@@ -36,6 +37,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
36
37
  var pickerStyle = null;
37
38
  var popupWrapperStyle = null;
38
39
  var popupStyle = null;
40
+ var visuallyHiddenStyle = null;
39
41
  var additionalStyles = {
40
42
  selectorContainer: "_1e0c1txw"
41
43
  };
@@ -54,6 +56,7 @@ var RENDER_REACTIONPICKERPANEL_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTI
54
56
  * Emoji Picker Controller Id for Accessibility Labels
55
57
  */
56
58
  var PICKER_CONTROL_ID = 'emoji-picker';
59
+ var PICKER_LABEL_ID = 'emoji-picker-label';
57
60
  /**
58
61
  * Picker component for adding reactions
59
62
  */
@@ -412,7 +415,9 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
412
415
  update = _ref3.update;
413
416
  return /*#__PURE__*/_react.default.createElement("div", {
414
417
  role: "dialog",
415
- "aria-label": formatMessage(_i18n.messages.popperWrapperLabel),
418
+ "aria-label": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? undefined : formatMessage(_i18n.messages.popperWrapperLabel),
419
+ "aria-modal": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? 'false' : undefined,
420
+ "aria-labelledby": (0, _fg.fg)('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
416
421
  id: PICKER_CONTROL_ID,
417
422
  "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
418
423
  style: _objectSpread({
@@ -431,7 +436,13 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
431
436
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
432
437
  tabIndex: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? undefined : 0,
433
438
  className: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
434
- }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
439
+ }, (0, _fg.fg)('platform_a11y_fixes_reading_order') ? /*#__PURE__*/_react.default.createElement("div", {
440
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
441
+ }, /*#__PURE__*/_react.default.createElement(_heading.default, {
442
+ as: "h2",
443
+ size: "small",
444
+ id: PICKER_LABEL_ID
445
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.popperWrapperLabel))) : null, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
435
446
  update: update,
436
447
  settings: settings
437
448
  }, /*#__PURE__*/_react.default.createElement("div", {
package/dist/es2019/analytics/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
3
3
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
4
4
  const packageName = "@atlaskit/reactions";
5
- const packageVersion = "36.0.1";
5
+ const packageVersion = "36.0.3";
6
6
  /**
7
7
  * TODO: move to utility package?
8
8
  * A random sampling function
package/dist/es2019/components/ReactionPicker.compiled.css CHANGED
@@ -1,8 +1,15 @@
1
1
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bsbt94y{width:1px}
2
4
  ._1e0c1txw{display:flex}
3
5
  ._1pra1o8l.miniMode{display:inline-block}
6
+ ._1reo15vq{overflow-x:hidden}
7
+ ._4t3it94y{height:1px}
4
8
  ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
5
9
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
10
+ ._kqswstnw{position:absolute}
11
+ ._o5721q9c{white-space:nowrap}
12
+ ._ogto7mnp{clip:rect(1px,1px,1px,1px)}
6
13
  ._s7n4nkob{vertical-align:middle}
7
14
  ._1hvw1o36:focus{outline-width:medium}
8
15
  ._49pcglyw:focus{outline-style:none}
package/dist/es2019/components/ReactionPicker.js CHANGED
@@ -10,6 +10,7 @@ import { Popper } from '@atlaskit/popper/main';
10
10
  import { Reference } from '@atlaskit/popper/reference';
11
11
  import { layers } from '@atlaskit/theme/constants';
12
12
  import { Box } from '@atlaskit/primitives/compiled';
13
+ import Heading from '@atlaskit/heading/heading';
13
14
  import { useCloseManagerV2 } from '../hooks/useCloseManager';
14
15
  import { useDelayedState } from '../hooks/useDelayedState';
15
16
  import { useFocusTrap } from '../hooks/useFocusTrap';
@@ -23,6 +24,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
23
24
  const pickerStyle = null;
24
25
  const popupWrapperStyle = null;
25
26
  const popupStyle = null;
27
+ const visuallyHiddenStyle = null;
26
28
  const additionalStyles = {
27
29
  selectorContainer: "_1e0c1txw"
28
30
  };
@@ -41,6 +43,7 @@ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
41
43
  * Emoji Picker Controller Id for Accessibility Labels
42
44
  */
43
45
  const PICKER_CONTROL_ID = 'emoji-picker';
46
+ const PICKER_LABEL_ID = 'emoji-picker-label';
44
47
  /**
45
48
  * Picker component for adding reactions
46
49
  */
@@ -367,7 +370,9 @@ export const PopperWrapper = props => {
367
370
  }) => {
368
371
  return /*#__PURE__*/React.createElement("div", {
369
372
  role: "dialog",
370
- "aria-label": formatMessage(messages.popperWrapperLabel),
373
+ "aria-label": fg('platform_a11y_fixes_reading_order') ? undefined : formatMessage(messages.popperWrapperLabel),
374
+ "aria-modal": fg('platform_a11y_fixes_reading_order') ? 'false' : undefined,
375
+ "aria-labelledby": fg('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
371
376
  id: PICKER_CONTROL_ID,
372
377
  "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
373
378
  style: {
@@ -388,7 +393,13 @@ export const PopperWrapper = props => {
388
393
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
389
394
  tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
390
395
  className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
391
- }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
396
+ }, fg('platform_a11y_fixes_reading_order') ? /*#__PURE__*/React.createElement("div", {
397
+ className: ax(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
398
+ }, /*#__PURE__*/React.createElement(Heading, {
399
+ as: "h2",
400
+ size: "small",
401
+ id: PICKER_LABEL_ID
402
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.popperWrapperLabel))) : null, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
392
403
  update: update,
393
404
  settings: settings
394
405
  }, /*#__PURE__*/React.createElement("div", {
package/dist/esm/analytics/index.js CHANGED
@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
5
5
  import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
6
6
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
7
7
  var packageName = "@atlaskit/reactions";
8
- var packageVersion = "36.0.1";
8
+ var packageVersion = "36.0.3";
9
9
  /**
10
10
  * TODO: move to utility package?
11
11
  * A random sampling function
package/dist/esm/components/ReactionPicker.compiled.css CHANGED
@@ -1,8 +1,15 @@
1
1
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bsbt94y{width:1px}
2
4
  ._1e0c1txw{display:flex}
3
5
  ._1pra1o8l.miniMode{display:inline-block}
6
+ ._1reo15vq{overflow-x:hidden}
7
+ ._4t3it94y{height:1px}
4
8
  ._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
5
9
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
10
+ ._kqswstnw{position:absolute}
11
+ ._o5721q9c{white-space:nowrap}
12
+ ._ogto7mnp{clip:rect(1px,1px,1px,1px)}
6
13
  ._s7n4nkob{vertical-align:middle}
7
14
  ._1hvw1o36:focus{outline-width:medium}
8
15
  ._49pcglyw:focus{outline-style:none}
package/dist/esm/components/ReactionPicker.js CHANGED
@@ -14,6 +14,7 @@ import { Popper } from '@atlaskit/popper/main';
14
14
  import { Reference } from '@atlaskit/popper/reference';
15
15
  import { layers } from '@atlaskit/theme/constants';
16
16
  import { Box } from '@atlaskit/primitives/compiled';
17
+ import Heading from '@atlaskit/heading/heading';
17
18
  import { useCloseManagerV2 } from '../hooks/useCloseManager';
18
19
  import { useDelayedState } from '../hooks/useDelayedState';
19
20
  import { useFocusTrap } from '../hooks/useFocusTrap';
@@ -27,6 +28,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
27
28
  var pickerStyle = null;
28
29
  var popupWrapperStyle = null;
29
30
  var popupStyle = null;
31
+ var visuallyHiddenStyle = null;
30
32
  var additionalStyles = {
31
33
  selectorContainer: "_1e0c1txw"
32
34
  };
@@ -45,6 +47,7 @@ export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
45
47
  * Emoji Picker Controller Id for Accessibility Labels
46
48
  */
47
49
  var PICKER_CONTROL_ID = 'emoji-picker';
50
+ var PICKER_LABEL_ID = 'emoji-picker-label';
48
51
  /**
49
52
  * Picker component for adding reactions
50
53
  */
@@ -403,7 +406,9 @@ export var PopperWrapper = function PopperWrapper(props) {
403
406
  update = _ref3.update;
404
407
  return /*#__PURE__*/React.createElement("div", {
405
408
  role: "dialog",
406
- "aria-label": formatMessage(messages.popperWrapperLabel),
409
+ "aria-label": fg('platform_a11y_fixes_reading_order') ? undefined : formatMessage(messages.popperWrapperLabel),
410
+ "aria-modal": fg('platform_a11y_fixes_reading_order') ? 'false' : undefined,
411
+ "aria-labelledby": fg('platform_a11y_fixes_reading_order') ? PICKER_LABEL_ID : undefined,
407
412
  id: PICKER_CONTROL_ID,
408
413
  "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
409
414
  style: _objectSpread({
@@ -422,7 +427,13 @@ export var PopperWrapper = function PopperWrapper(props) {
422
427
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
423
428
  tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
424
429
  className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
425
- }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
430
+ }, fg('platform_a11y_fixes_reading_order') ? /*#__PURE__*/React.createElement("div", {
431
+ className: ax(["_1reo15vq _18m915vq _ogto7mnp _4t3it94y _kqswstnw _o5721q9c _1bsbt94y"])
432
+ }, /*#__PURE__*/React.createElement(Heading, {
433
+ as: "h2",
434
+ size: "small",
435
+ id: PICKER_LABEL_ID
436
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.popperWrapperLabel))) : null, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
426
437
  update: update,
427
438
  settings: settings
428
439
  }, /*#__PURE__*/React.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "36.0.2",
3
+ "version": "36.0.4",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
55
55
  "@atlaskit/spinner": "^20.3.0",
56
56
  "@atlaskit/tabs": "^21.1.0",
57
57
  "@atlaskit/theme": "^28.1.0",
58
- "@atlaskit/tmp-editor-statsig": "^163.0.0",
58
+ "@atlaskit/tmp-editor-statsig": "^165.0.0",
59
59
  "@atlaskit/tokens": "^16.8.0",
60
60
  "@atlaskit/tooltip": "^24.2.0",
61
61
  "@atlaskit/ufo": "^1.0.0",
@@ -76,6 +76,7 @@
76
76
  "@atlassian/a11y-jest-testing": "^0.17.0",
77
77
  "@atlassian/experiment-test-utils": "^0.2.0",
78
78
  "@atlassian/feature-flags-test-utils": "^1.2.0",
79
+ "@atlassian/ufo": "^0.9.0",
79
80
  "@testing-library/dom": "^10.1.0",
80
81
  "@testing-library/jest-dom": "^6.4.5",
81
82
  "@testing-library/react": "^16.3.0",