@atlaskit/reactions 31.6.2 → 31.6.3

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
+ ## 31.6.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#151050](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/151050)
8
+ [`bed009e6ccbf2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bed009e6ccbf2) -
9
+ A11y fix to allow screenreaders to read out the current emoji counts
10
+
3
11
  ## 31.6.2
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 = "31.6.2";
14
+ var packageVersion = "31.6.3";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
@@ -146,6 +146,15 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
146
146
  value: reaction.count,
147
147
  highlight: !isViewOnly && reaction.reacted
148
148
  }));
149
+ var reactionAriaLabel = intl.formatMessage(_i18n.messages.reactWithEmoji, {
150
+ emoji: emojiName
151
+ });
152
+ if (reaction.count) {
153
+ reactionAriaLabel = intl.formatMessage(_i18n.messages.reactWithEmojiAndCount, {
154
+ emoji: emojiName,
155
+ count: reaction.count
156
+ });
157
+ }
149
158
  return /*#__PURE__*/React.createElement(_compiled.Box, {
150
159
  xcss: styles.container
151
160
  }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
@@ -168,9 +177,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
168
177
  }, emojiAndCount) : /*#__PURE__*/React.createElement(_ReactionButton.ReactionButton, {
169
178
  onClick: handleClick,
170
179
  flash: flash,
171
- ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
172
- emoji: emojiName
173
- }),
180
+ ariaLabel: reactionAriaLabel,
174
181
  ariaPressed: reacted,
175
182
  onMouseEnter: handleMouseEnter,
176
183
  onFocus: handleFocused,
@@ -31,6 +31,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
31
31
  defaultMessage: 'React with {emoji} emoji',
32
32
  description: 'Aria label on reaction button'
33
33
  },
34
+ reactWithEmojiAndCount: {
35
+ id: 'fabric.reactions.reactwithemojiandcount',
36
+ defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
37
+ description: 'Aria label on reaction button'
38
+ },
34
39
  summary: {
35
40
  id: 'fabric.reactions.summary',
36
41
  defaultMessage: 'View all user reactions',
@@ -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 = "31.6.2";
4
+ const packageVersion = "31.6.3";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
@@ -112,6 +112,15 @@ export const Reaction = ({
112
112
  value: reaction.count,
113
113
  highlight: !isViewOnly && reaction.reacted
114
114
  }));
115
+ let reactionAriaLabel = intl.formatMessage(messages.reactWithEmoji, {
116
+ emoji: emojiName
117
+ });
118
+ if (reaction.count) {
119
+ reactionAriaLabel = intl.formatMessage(messages.reactWithEmojiAndCount, {
120
+ emoji: emojiName,
121
+ count: reaction.count
122
+ });
123
+ }
115
124
  return /*#__PURE__*/React.createElement(Box, {
116
125
  xcss: styles.container
117
126
  }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
@@ -134,9 +143,7 @@ export const Reaction = ({
134
143
  }, emojiAndCount) : /*#__PURE__*/React.createElement(ReactionButton, {
135
144
  onClick: handleClick,
136
145
  flash: flash,
137
- ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
138
- emoji: emojiName
139
- }),
146
+ ariaLabel: reactionAriaLabel,
140
147
  ariaPressed: reacted,
141
148
  onMouseEnter: handleMouseEnter,
142
149
  onFocus: handleFocused,
@@ -25,6 +25,11 @@ export const messages = defineMessages({
25
25
  defaultMessage: 'React with {emoji} emoji',
26
26
  description: 'Aria label on reaction button'
27
27
  },
28
+ reactWithEmojiAndCount: {
29
+ id: 'fabric.reactions.reactwithemojiandcount',
30
+ defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
31
+ description: 'Aria label on reaction button'
32
+ },
28
33
  summary: {
29
34
  id: 'fabric.reactions.summary',
30
35
  defaultMessage: 'View all user reactions',
@@ -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 = "31.6.2";
7
+ var packageVersion = "31.6.3";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
@@ -136,6 +136,15 @@ export var Reaction = function Reaction(_ref) {
136
136
  value: reaction.count,
137
137
  highlight: !isViewOnly && reaction.reacted
138
138
  }));
139
+ var reactionAriaLabel = intl.formatMessage(messages.reactWithEmoji, {
140
+ emoji: emojiName
141
+ });
142
+ if (reaction.count) {
143
+ reactionAriaLabel = intl.formatMessage(messages.reactWithEmojiAndCount, {
144
+ emoji: emojiName,
145
+ count: reaction.count
146
+ });
147
+ }
139
148
  return /*#__PURE__*/React.createElement(Box, {
140
149
  xcss: styles.container
141
150
  }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
@@ -158,9 +167,7 @@ export var Reaction = function Reaction(_ref) {
158
167
  }, emojiAndCount) : /*#__PURE__*/React.createElement(ReactionButton, {
159
168
  onClick: handleClick,
160
169
  flash: flash,
161
- ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
162
- emoji: emojiName
163
- }),
170
+ ariaLabel: reactionAriaLabel,
164
171
  ariaPressed: reacted,
165
172
  onMouseEnter: handleMouseEnter,
166
173
  onFocus: handleFocused,
@@ -25,6 +25,11 @@ export var messages = defineMessages({
25
25
  defaultMessage: 'React with {emoji} emoji',
26
26
  description: 'Aria label on reaction button'
27
27
  },
28
+ reactWithEmojiAndCount: {
29
+ id: 'fabric.reactions.reactwithemojiandcount',
30
+ defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
31
+ description: 'Aria label on reaction button'
32
+ },
28
33
  summary: {
29
34
  id: 'fabric.reactions.summary',
30
35
  defaultMessage: 'View all user reactions',
@@ -24,6 +24,11 @@ export declare const messages: {
24
24
  defaultMessage: string;
25
25
  description: string;
26
26
  };
27
+ reactWithEmojiAndCount: {
28
+ id: string;
29
+ defaultMessage: string;
30
+ description: string;
31
+ };
27
32
  summary: {
28
33
  id: string;
29
34
  defaultMessage: string;
@@ -24,6 +24,11 @@ export declare const messages: {
24
24
  defaultMessage: string;
25
25
  description: string;
26
26
  };
27
+ reactWithEmojiAndCount: {
28
+ id: string;
29
+ defaultMessage: string;
30
+ description: string;
31
+ };
27
32
  summary: {
28
33
  id: string;
29
34
  defaultMessage: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "31.6.2",
3
+ "version": "31.6.3",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/popper": "^7.0.0",
49
49
  "@atlaskit/popup": "^4.1.0",
50
50
  "@atlaskit/primitives": "^14.7.0",
51
- "@atlaskit/react-ufo": "^3.9.0",
51
+ "@atlaskit/react-ufo": "^3.10.0",
52
52
  "@atlaskit/spinner": "^18.0.0",
53
53
  "@atlaskit/tabs": "^18.0.0",
54
54
  "@atlaskit/theme": "^18.0.0",