@atlaskit/reactions 22.10.13 → 22.10.14

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 22.10.14
4
+
5
+ ### Patch Changes
6
+
7
+ - [#131670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131670)
8
+ [`cf2674202fc67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf2674202fc67) -
9
+ CCA11Y-1062 - Introduced aria-pressed in reaction button for a11y reasons
10
+
3
11
  ## 22.10.13
4
12
 
5
13
  ### Patch Changes
@@ -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; }
13
13
  var packageName = "@atlaskit/reactions";
14
- var packageVersion = "22.10.13";
14
+ var packageVersion = "22.10.14";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
@@ -92,6 +92,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
92
92
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
93
93
  isTooltipEnabled = _useState4[0],
94
94
  setIsTooltipEnabled = _useState4[1];
95
+ var reacted = reaction.reacted;
95
96
  var emojiId = {
96
97
  id: reaction.emojiId,
97
98
  shortName: ''
@@ -126,9 +127,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
126
127
  var handleClick = (0, _react.useCallback)(function (event) {
127
128
  event.preventDefault();
128
129
  if ((0, _utils.isLeftClick)(event)) {
129
- var reacted = reaction.reacted,
130
+ var _reacted = reaction.reacted,
130
131
  _emojiId = reaction.emojiId;
131
- (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !reacted, _emojiId);
132
+ (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !_reacted, _emojiId);
132
133
  onClick(reaction.emojiId, event);
133
134
  }
134
135
  }, [createAnalyticsEvent, reaction, onClick]);
@@ -173,6 +174,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
173
174
  ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
174
175
  emoji: emojiName
175
176
  }),
177
+ ariaPressed: reacted,
176
178
  onMouseEnter: handleMouseEnter,
177
179
  onFocus: handleFocused,
178
180
  testId: RENDER_REACTION_TESTID,
@@ -49,6 +49,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
49
49
  _ref$additionalStyles = _ref.additionalStyles,
50
50
  additionalStyles = _ref$additionalStyles === void 0 ? [] : _ref$additionalStyles,
51
51
  ariaLabel = _ref.ariaLabel,
52
+ ariaPressed = _ref.ariaPressed,
52
53
  onMouseEnter = _ref.onMouseEnter,
53
54
  onFocus = _ref.onFocus,
54
55
  children = _ref.children,
@@ -60,6 +61,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
60
61
  onMouseEnter: onMouseEnter,
61
62
  onFocus: onFocus,
62
63
  "aria-label": ariaLabel,
64
+ "aria-pressed": ariaPressed,
63
65
  testId: testId,
64
66
  xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles))
65
67
  }, dataAttributes), (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
@@ -1,7 +1,7 @@
1
1
  import { createAndFireEvent } from '@atlaskit/analytics-next';
2
2
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
3
3
  const packageName = "@atlaskit/reactions";
4
- const packageVersion = "22.10.13";
4
+ const packageVersion = "22.10.14";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
@@ -68,6 +68,9 @@ export const Reaction = ({
68
68
  } = useAnalyticsEvents();
69
69
  const [emojiName, setEmojiName] = useState();
70
70
  const [isTooltipEnabled, setIsTooltipEnabled] = useState(true);
71
+ const {
72
+ reacted
73
+ } = reaction;
71
74
  const emojiId = {
72
75
  id: reaction.emojiId,
73
76
  shortName: ''
@@ -136,6 +139,7 @@ export const Reaction = ({
136
139
  ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
137
140
  emoji: emojiName
138
141
  }),
142
+ ariaPressed: reacted,
139
143
  onMouseEnter: handleMouseEnter,
140
144
  onFocus: handleFocused,
141
145
  testId: RENDER_REACTION_TESTID,
@@ -37,6 +37,7 @@ export const ReactionButton = ({
37
37
  flash = false,
38
38
  additionalStyles = [],
39
39
  ariaLabel,
40
+ ariaPressed,
40
41
  onMouseEnter,
41
42
  onFocus,
42
43
  children,
@@ -48,6 +49,7 @@ export const ReactionButton = ({
48
49
  onMouseEnter: onMouseEnter,
49
50
  onFocus: onFocus,
50
51
  "aria-label": ariaLabel,
52
+ "aria-pressed": ariaPressed,
51
53
  testId: testId,
52
54
  xcss: [reactionStyles, ...additionalStyles]
53
55
  }, dataAttributes), jsx(FlashAnimation, {
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import { createAndFireEvent } from '@atlaskit/analytics-next';
5
5
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
6
6
  var packageName = "@atlaskit/reactions";
7
- var packageVersion = "22.10.13";
7
+ var packageVersion = "22.10.14";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
@@ -81,6 +81,7 @@ export var Reaction = function Reaction(_ref) {
81
81
  _useState4 = _slicedToArray(_useState3, 2),
82
82
  isTooltipEnabled = _useState4[0],
83
83
  setIsTooltipEnabled = _useState4[1];
84
+ var reacted = reaction.reacted;
84
85
  var emojiId = {
85
86
  id: reaction.emojiId,
86
87
  shortName: ''
@@ -115,9 +116,9 @@ export var Reaction = function Reaction(_ref) {
115
116
  var handleClick = useCallback(function (event) {
116
117
  event.preventDefault();
117
118
  if (isLeftClick(event)) {
118
- var reacted = reaction.reacted,
119
+ var _reacted = reaction.reacted,
119
120
  _emojiId = reaction.emojiId;
120
- createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, _emojiId);
121
+ createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !_reacted, _emojiId);
121
122
  onClick(reaction.emojiId, event);
122
123
  }
123
124
  }, [createAnalyticsEvent, reaction, onClick]);
@@ -162,6 +163,7 @@ export var Reaction = function Reaction(_ref) {
162
163
  ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
163
164
  emoji: emojiName
164
165
  }),
166
+ ariaPressed: reacted,
165
167
  onMouseEnter: handleMouseEnter,
166
168
  onFocus: handleFocused,
167
169
  testId: RENDER_REACTION_TESTID,
@@ -40,6 +40,7 @@ export var ReactionButton = function ReactionButton(_ref) {
40
40
  _ref$additionalStyles = _ref.additionalStyles,
41
41
  additionalStyles = _ref$additionalStyles === void 0 ? [] : _ref$additionalStyles,
42
42
  ariaLabel = _ref.ariaLabel,
43
+ ariaPressed = _ref.ariaPressed,
43
44
  onMouseEnter = _ref.onMouseEnter,
44
45
  onFocus = _ref.onFocus,
45
46
  children = _ref.children,
@@ -51,6 +52,7 @@ export var ReactionButton = function ReactionButton(_ref) {
51
52
  onMouseEnter: onMouseEnter,
52
53
  onFocus: onFocus,
53
54
  "aria-label": ariaLabel,
55
+ "aria-pressed": ariaPressed,
54
56
  testId: testId,
55
57
  xcss: [reactionStyles].concat(_toConsumableArray(additionalStyles))
56
58
  }, dataAttributes), jsx(FlashAnimation, {
@@ -11,6 +11,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
11
11
  className?: string;
12
12
  additionalStyles?: Array<XCSS>;
13
13
  ariaLabel: string;
14
+ ariaPressed?: boolean;
14
15
  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
15
16
  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
16
17
  dataAttributes?: {
@@ -19,5 +20,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
19
20
  testId?: string;
20
21
  children?: React.ReactNode;
21
22
  }
22
- export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
23
+ export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
23
24
  export {};
@@ -11,6 +11,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
11
11
  className?: string;
12
12
  additionalStyles?: Array<XCSS>;
13
13
  ariaLabel: string;
14
+ ariaPressed?: boolean;
14
15
  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
15
16
  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
16
17
  dataAttributes?: {
@@ -19,5 +20,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
19
20
  testId?: string;
20
21
  children?: React.ReactNode;
21
22
  }
22
- export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
23
+ export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
23
24
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "22.10.13",
3
+ "version": "22.10.14",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-namespaced-context": "^6.11.0",
38
38
  "@atlaskit/analytics-next": "^10.1.0",
39
39
  "@atlaskit/avatar": "^21.15.0",
40
- "@atlaskit/button": "^20.0.0",
40
+ "@atlaskit/button": "^20.1.0",
41
41
  "@atlaskit/emoji": "^67.7.0",
42
42
  "@atlaskit/icon": "^22.13.0",
43
43
  "@atlaskit/modal-dialog": "^12.15.0",
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/spinner": "^16.3.0",
49
49
  "@atlaskit/tabs": "^16.4.0",
50
50
  "@atlaskit/theme": "^13.0.0",
51
- "@atlaskit/tokens": "^1.58.0",
51
+ "@atlaskit/tokens": "^1.59.0",
52
52
  "@atlaskit/tooltip": "^18.7.0",
53
53
  "@atlaskit/ufo": "^0.3.0",
54
54
  "@atlaskit/util-service-support": "^6.2.0",