@atlaskit/reactions 34.3.1 → 34.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/reactions
 
+## 34.4.0
+
+### Minor Changes
+
+- [`ec2c29c3c63b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec2c29c3c63b3) -
+  [ux] Reaction button a11y fixes
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 34.3.1
 
 ### 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 = "34.3.0";
+var packageVersion = "34.3.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionButton.js

@@ -14,6 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react2 = require("@compiled/react");
 var _FlashAnimation = require("./FlashAnimation");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -42,6 +43,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     useCompactStyles = _ref.useCompactStyles,
     reacted = _ref.reacted,
     ariaLabel = _ref.ariaLabel,
+    ariaExpanded = _ref.ariaExpanded,
     ariaPressed = _ref.ariaPressed,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
@@ -57,6 +59,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
+    "aria-expanded": (0, _expValEquals.expValEquals)('a11y-fixes-week4-may-2026', 'isEnabled', true) ? ariaExpanded : undefined,
     testId: testId,
     xcss: (0, _react2.cx)(styles.reactionButton, useCompactStyles && styles.compactButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(_FlashAnimation.FlashAnimation, {

package/dist/cjs/components/ReactionSummaryButton.js

@@ -58,7 +58,8 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     onMouseLeave = _ref.onMouseLeave,
     summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
-    summaryViewParticleEffectEmojiId = _ref.summaryViewParticleEffectEmojiId;
+    summaryViewParticleEffectEmojiId = _ref.summaryViewParticleEffectEmojiId,
+    isOpen = _ref.isOpen;
   var intl = (0, _reactIntl.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -96,6 +97,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     ariaLabel: intl.formatMessage(_i18n.messages.summary, {
       count: totalReactionsCount
     }),
+    ariaExpanded: isOpen,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(_compiled.Inline, {

package/dist/cjs/components/ReactionSummaryView.js

@@ -248,7 +248,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         useButtonAlignmentStyling: useButtonAlignmentStyling,
         summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
         summaryButtonIconAfter: summaryButtonIconAfter,
-        summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
+        summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId,
+        isOpen: isSummaryPopupOpen || isEmojiPickerOpen
       }));
     }
   });

package/dist/es2019/analytics/index.js

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

package/dist/es2019/components/ReactionButton.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
 import { FlashAnimation } from './FlashAnimation';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   reactionButton: "_2rko1rr0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syazazsu _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _irr31dpa _1di6fcek",
@@ -32,6 +33,7 @@ export const ReactionButton = ({
   useCompactStyles,
   reacted,
   ariaLabel,
+  ariaExpanded,
   ariaPressed,
   onMouseEnter,
   onMouseLeave,
@@ -47,6 +49,7 @@ export const ReactionButton = ({
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
+    "aria-expanded": expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true) ? ariaExpanded : undefined,
     testId: testId,
     xcss: cx(styles.reactionButton, useCompactStyles && styles.compactButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground, fg('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(FlashAnimation, {

package/dist/es2019/components/ReactionSummaryButton.js

@@ -43,7 +43,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   onMouseLeave,
   summaryGetOptimisticImageURL,
   summaryButtonIconAfter,
-  summaryViewParticleEffectEmojiId
+  summaryViewParticleEffectEmojiId,
+  isOpen
 }, ref) => {
   const intl = useIntl();
 
@@ -78,6 +79,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     ariaLabel: intl.formatMessage(messages.summary, {
       count: totalReactionsCount
     }),
+    ariaExpanded: isOpen,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(Inline, {

package/dist/es2019/components/ReactionSummaryView.js

@@ -211,7 +211,8 @@ export const ReactionSummaryView = ({
       useButtonAlignmentStyling: useButtonAlignmentStyling,
       summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
       summaryButtonIconAfter: summaryButtonIconAfter,
-      summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
+      summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId,
+      isOpen: isSummaryPopupOpen || isEmojiPickerOpen
     }))
   });
 };

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';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "34.3.0";
+var packageVersion = "34.3.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionButton.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
 import { FlashAnimation } from './FlashAnimation';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   reactionButton: "_2rko1rr0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syazazsu _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _irr31dpa _1di6fcek",
@@ -33,6 +34,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     useCompactStyles = _ref.useCompactStyles,
     reacted = _ref.reacted,
     ariaLabel = _ref.ariaLabel,
+    ariaExpanded = _ref.ariaExpanded,
     ariaPressed = _ref.ariaPressed,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
@@ -48,6 +50,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
+    "aria-expanded": expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true) ? ariaExpanded : undefined,
     testId: testId,
     xcss: cx(styles.reactionButton, useCompactStyles && styles.compactButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground, fg('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(FlashAnimation, {

package/dist/esm/components/ReactionSummaryButton.js

@@ -49,7 +49,8 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     onMouseLeave = _ref.onMouseLeave,
     summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
-    summaryViewParticleEffectEmojiId = _ref.summaryViewParticleEffectEmojiId;
+    summaryViewParticleEffectEmojiId = _ref.summaryViewParticleEffectEmojiId,
+    isOpen = _ref.isOpen;
   var intl = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -87,6 +88,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     ariaLabel: intl.formatMessage(messages.summary, {
       count: totalReactionsCount
     }),
+    ariaExpanded: isOpen,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(Inline, {

package/dist/esm/components/ReactionSummaryView.js

@@ -239,7 +239,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         useButtonAlignmentStyling: useButtonAlignmentStyling,
         summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
         summaryButtonIconAfter: summaryButtonIconAfter,
-        summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
+        summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId,
+        isOpen: isSummaryPopupOpen || isEmojiPickerOpen
       }));
     }
   });

package/dist/types/components/ReactionButton.d.ts

@@ -1,5 +1,6 @@
 import { type ReactionProps } from './Reaction';
 interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
+    ariaExpanded?: boolean;
     ariaLabel: string;
     ariaPressed?: boolean;
     children?: React.ReactNode;
@@ -17,5 +18,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     testId?: string;
     useCompactStyles?: boolean;
 }
-export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
+export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaExpanded, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

package/dist/types/components/ReactionSummaryButton.d.ts

@@ -44,6 +44,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
         id: string;
         shortName: string;
     } | null;
+    /**
+     * Optional prop to indicate whether the summary popup is open, used for aria-expanded
+     */
+    isOpen?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/dist/types-ts4.5/components/ReactionButton.d.ts

@@ -1,5 +1,6 @@
 import { type ReactionProps } from './Reaction';
 interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
+    ariaExpanded?: boolean;
     ariaLabel: string;
     ariaPressed?: boolean;
     children?: React.ReactNode;
@@ -17,5 +18,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     testId?: string;
     useCompactStyles?: boolean;
 }
-export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
+export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaExpanded, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/ReactionSummaryButton.d.ts

@@ -44,6 +44,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
         id: string;
         shortName: string;
     } | null;
+    /**
+     * Optional prop to indicate whether the summary popup is open, used for aria-expanded
+     */
+    isOpen?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "34.3.1",
+	"version": "34.4.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -60,7 +60,7 @@
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/tabs": "^19.1.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^90.0.0",
+		"@atlaskit/tmp-editor-statsig": "^90.2.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -78,7 +78,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.6.0",
-		"@atlassian/a11y-jest-testing": "^0.11.0",
+		"@atlassian/a11y-jest-testing": "^0.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@testing-library/dom": "^10.1.0",