@atlaskit/reactions 35.6.4 → 35.6.6

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 +25 -0
  2. package/dist/cjs/analytics/index.js +1 -1
  3. package/dist/cjs/components/ReactionsDialogHeader.js +2 -2
  4. package/dist/cjs/components/Selector.js +8 -4
  5. package/dist/es2019/analytics/index.js +1 -1
  6. package/dist/es2019/components/ReactionsDialogHeader.js +1 -1
  7. package/dist/es2019/components/Selector.js +8 -4
  8. package/dist/esm/analytics/index.js +1 -1
  9. package/dist/esm/components/ReactionsDialogHeader.js +1 -1
  10. package/dist/esm/components/Selector.js +8 -4
  11. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 35.6.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c75e9e104057f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c75e9e104057f) -
8
+ [ux] A11Y-35421: Fix screen readers announcing the reactions picker "More emojis" button as a list
9
+ item
10
+
11
+ The emoji reactions picker (`Selector`) previously wrapped its quick-reaction emoji buttons and
12
+ the "More emojis" button in `<ul>`/`<li>` list markup, causing screen readers to announce the
13
+ standalone "More emojis" button as a list item. Behind the
14
+ `platform_a11y_fixes_reactions_selector_list` experiment, the list markup is replaced with a
15
+ `<div>` container exposed as a labelled group (`role="group"` with an "Add reactions"
16
+ `aria-label`), so assistive technology still conveys that the controls belong together without the
17
+ misleading list-item semantics. The decorative separator is `aria-hidden`. There is no visual
18
+ change.
19
+
20
+ - Updated dependencies
21
+
22
+ ## 35.6.5
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 35.6.4
4
29
 
5
30
  ### 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 = "35.6.3";
14
+ var packageVersion = "35.6.5";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
package/dist/cjs/components/ReactionsDialogHeader.js CHANGED
@@ -17,7 +17,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
17
17
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
18
18
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
19
19
  var _reactIntl = require("react-intl");
20
- var _tokens = require("@atlaskit/tokens");
20
+ var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
21
21
  var _modalDialog = require("@atlaskit/modal-dialog");
22
22
  var _tabs = require("@atlaskit/tabs");
23
23
  var _compiled = require("@atlaskit/primitives/compiled");
@@ -99,7 +99,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
99
99
  var _useModal = (0, _modalDialog.useModal)(),
100
100
  titleId = _useModal.titleId;
101
101
  var intl = (0, _reactIntl.useIntl)();
102
- var _useThemeObserver = (0, _tokens.useThemeObserver)(),
102
+ var _useThemeObserver = (0, _useThemeObserver2.useThemeObserver)(),
103
103
  colorMode = _useThemeObserver.colorMode;
104
104
  var isSinglePage = maxPages === 1;
105
105
  var isOnFirstPage = currentPage === 1;
package/dist/cjs/components/Selector.js CHANGED
@@ -38,7 +38,7 @@ var Reveal = function Reveal(_ref) {
38
38
  var children = _ref.children,
39
39
  testId = _ref.testId;
40
40
  return /*#__PURE__*/React.createElement(_compiled.Box, {
41
- as: "li",
41
+ as: (0, _expValEquals.expValEquals)('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true) ? undefined : 'li',
42
42
  xcss: styles.emojiContainer
43
43
  }, /*#__PURE__*/React.createElement("div", {
44
44
  "data-testid": testId,
@@ -101,13 +101,17 @@ var Selector = exports.Selector = function Selector(_ref2) {
101
101
  xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
102
102
  }, quickReactionEmojiIds.map(renderEmoji)));
103
103
  }
104
+ var isSelectorListMarkupFixEnabled = (0, _expValEquals.expValEquals)('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);
104
105
  return /*#__PURE__*/React.createElement(_compiled.Inline, {
105
106
  alignBlock: "center",
106
107
  xcss: styles.container,
107
- as: "ul"
108
+ as: isSelectorListMarkupFixEnabled ? undefined : 'ul',
109
+ role: isSelectorListMarkupFixEnabled ? 'group' : undefined,
110
+ "aria-label": isSelectorListMarkupFixEnabled ? _i18n.messages.popperWrapperLabel.defaultMessage : undefined
108
111
  }, quickReactionEmojiIds.map(renderEmoji), showMore ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_compiled.Box, {
109
- as: "li",
110
- xcss: styles.separator
112
+ as: isSelectorListMarkupFixEnabled ? undefined : 'li',
113
+ xcss: styles.separator,
114
+ "aria-hidden": isSelectorListMarkupFixEnabled ? true : undefined
111
115
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(_ShowMore.ShowMore, {
112
116
  key: "more",
113
117
  onClick: onMoreClick
package/dist/es2019/analytics/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { createAndFireEvent } from '@atlaskit/analytics-next';
3
3
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
4
4
  const packageName = "@atlaskit/reactions";
5
- const packageVersion = "35.6.3";
5
+ const packageVersion = "35.6.5";
6
6
  /**
7
7
  * TODO: move to utility package?
8
8
  * A random sampling function
package/dist/es2019/components/ReactionsDialogHeader.js CHANGED
@@ -5,7 +5,7 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useState } from 'react';
7
7
  import { useIntl } from 'react-intl';
8
- import { useThemeObserver } from '@atlaskit/tokens';
8
+ import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
9
9
  import { CloseButton } from '@atlaskit/modal-dialog';
10
10
  import { Tab, TabList } from '@atlaskit/tabs';
11
11
  import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
package/dist/es2019/components/Selector.js CHANGED
@@ -29,7 +29,7 @@ const Reveal = ({
29
29
  testId
30
30
  }) => {
31
31
  return /*#__PURE__*/React.createElement(Box, {
32
- as: "li",
32
+ as: expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true) ? undefined : 'li',
33
33
  xcss: styles.emojiContainer
34
34
  }, /*#__PURE__*/React.createElement("div", {
35
35
  "data-testid": testId,
@@ -89,13 +89,17 @@ export const Selector = ({
89
89
  xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
90
90
  }, quickReactionEmojiIds.map(renderEmoji)));
91
91
  }
92
+ const isSelectorListMarkupFixEnabled = expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);
92
93
  return /*#__PURE__*/React.createElement(Inline, {
93
94
  alignBlock: "center",
94
95
  xcss: styles.container,
95
- as: "ul"
96
+ as: isSelectorListMarkupFixEnabled ? undefined : 'ul',
97
+ role: isSelectorListMarkupFixEnabled ? 'group' : undefined,
98
+ "aria-label": isSelectorListMarkupFixEnabled ? messages.popperWrapperLabel.defaultMessage : undefined
96
99
  }, quickReactionEmojiIds.map(renderEmoji), showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
97
- as: "li",
98
- xcss: styles.separator
100
+ as: isSelectorListMarkupFixEnabled ? undefined : 'li',
101
+ xcss: styles.separator,
102
+ "aria-hidden": isSelectorListMarkupFixEnabled ? true : undefined
99
103
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
100
104
  key: "more",
101
105
  onClick: onMoreClick
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';
6
6
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
7
7
  var packageName = "@atlaskit/reactions";
8
- var packageVersion = "35.6.3";
8
+ var packageVersion = "35.6.5";
9
9
  /**
10
10
  * TODO: move to utility package?
11
11
  * A random sampling function
package/dist/esm/components/ReactionsDialogHeader.js CHANGED
@@ -11,7 +11,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
11
11
  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) { _defineProperty(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; }
12
12
  import { useState } from 'react';
13
13
  import { useIntl } from 'react-intl';
14
- import { useThemeObserver } from '@atlaskit/tokens';
14
+ import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
15
15
  import { CloseButton } from '@atlaskit/modal-dialog';
16
16
  import { Tab, TabList } from '@atlaskit/tabs';
17
17
  import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
package/dist/esm/components/Selector.js CHANGED
@@ -29,7 +29,7 @@ var Reveal = function Reveal(_ref) {
29
29
  var children = _ref.children,
30
30
  testId = _ref.testId;
31
31
  return /*#__PURE__*/React.createElement(Box, {
32
- as: "li",
32
+ as: expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true) ? undefined : 'li',
33
33
  xcss: styles.emojiContainer
34
34
  }, /*#__PURE__*/React.createElement("div", {
35
35
  "data-testid": testId,
@@ -92,13 +92,17 @@ export var Selector = function Selector(_ref2) {
92
92
  xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
93
93
  }, quickReactionEmojiIds.map(renderEmoji)));
94
94
  }
95
+ var isSelectorListMarkupFixEnabled = expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);
95
96
  return /*#__PURE__*/React.createElement(Inline, {
96
97
  alignBlock: "center",
97
98
  xcss: styles.container,
98
- as: "ul"
99
+ as: isSelectorListMarkupFixEnabled ? undefined : 'ul',
100
+ role: isSelectorListMarkupFixEnabled ? 'group' : undefined,
101
+ "aria-label": isSelectorListMarkupFixEnabled ? messages.popperWrapperLabel.defaultMessage : undefined
99
102
  }, quickReactionEmojiIds.map(renderEmoji), showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
100
- as: "li",
101
- xcss: styles.separator
103
+ as: isSelectorListMarkupFixEnabled ? undefined : 'li',
104
+ xcss: styles.separator,
105
+ "aria-hidden": isSelectorListMarkupFixEnabled ? true : undefined
102
106
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
103
107
  key: "more",
104
108
  onClick: onMoreClick
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "35.6.4",
3
+ "version": "35.6.6",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,29 +33,29 @@
33
33
  "@atlaskit/afm-i18n-platform-elements-reactions": "2.168.0",
34
34
  "@atlaskit/analytics-gas-types": "^6.0.0",
35
35
  "@atlaskit/analytics-namespaced-context": "^8.1.0",
36
- "@atlaskit/analytics-next": "^12.2.0",
36
+ "@atlaskit/analytics-next": "^12.3.0",
37
37
  "@atlaskit/avatar": "^26.1.0",
38
38
  "@atlaskit/button": "^24.3.0",
39
39
  "@atlaskit/css": "^1.0.0",
40
- "@atlaskit/emoji": "^71.8.0",
40
+ "@atlaskit/emoji": "^71.9.0",
41
41
  "@atlaskit/feature-gate-js-client": "^6.0.0",
42
42
  "@atlaskit/heading": "^6.2.0",
43
43
  "@atlaskit/icon": "^37.0.0",
44
- "@atlaskit/link": "^4.1.0",
44
+ "@atlaskit/link": "^4.3.0",
45
45
  "@atlaskit/modal-dialog": "^16.1.0",
46
46
  "@atlaskit/motion": "^7.3.0",
47
47
  "@atlaskit/platform-feature-flags": "^2.0.0",
48
- "@atlaskit/popper": "^8.2.0",
48
+ "@atlaskit/popper": "^8.3.0",
49
49
  "@atlaskit/popup": "^5.1.0",
50
50
  "@atlaskit/portal": "^6.1.0",
51
- "@atlaskit/primitives": "^20.5.0",
51
+ "@atlaskit/primitives": "^20.6.0",
52
52
  "@atlaskit/react-compiler-gating": "^0.2.0",
53
53
  "@atlaskit/react-ufo": "^7.3.0",
54
54
  "@atlaskit/spinner": "^20.1.0",
55
55
  "@atlaskit/tabs": "^20.1.0",
56
56
  "@atlaskit/theme": "^26.1.0",
57
- "@atlaskit/tmp-editor-statsig": "^124.1.0",
58
- "@atlaskit/tokens": "^15.5.0",
57
+ "@atlaskit/tmp-editor-statsig": "^125.1.0",
58
+ "@atlaskit/tokens": "^15.8.0",
59
59
  "@atlaskit/tooltip": "^23.1.0",
60
60
  "@atlaskit/ufo": "^1.0.0",
61
61
  "@atlaskit/util-service-support": "^7.2.0",