@atlaskit/reactions 35.6.7 → 35.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 35.7.0
+
+### Minor Changes
+
+- [`9b741c5c274ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b741c5c274ba) -
+  A11Y: Expose the reactions picker panel as a non-modal dialog (role="dialog", aria-modal="false")
+  for screen reader users, behind the `platform_ceps-5921-a11y-fix-reactions` feature gate.
+
+## 35.6.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 35.6.7
 
 ### 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 = "35.6.6";
+var packageVersion = "35.6.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -372,6 +372,11 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     setPopupRef = _useState12[1];
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  /**
+   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
+   * When disabled, fall back to the previous `role="group"` semantics.
+   */
+  var isDialogRoleEnabled = (0, _platformFeatureFlags.fg)('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -399,7 +404,8 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/_react.default.createElement("div", {
-      role: "group",
+      role: isDialogRoleEnabled ? 'dialog' : 'group',
+      "aria-modal": isDialogRoleEnabled ? false : undefined,
       "aria-label": formatMessage(_i18n.messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

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 = "35.6.6";
+const packageVersion = "35.6.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker.js

@@ -328,6 +328,11 @@ export const PopperWrapper = props => {
   const {
     formatMessage
   } = useIntl();
+  /**
+   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
+   * When disabled, fall back to the previous `role="group"` semantics.
+   */
+  const isDialogRoleEnabled = fg('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -354,7 +359,8 @@ export const PopperWrapper = props => {
     update
   }) => {
     return /*#__PURE__*/React.createElement("div", {
-      role: "group",
+      role: isDialogRoleEnabled ? 'dialog' : 'group',
+      "aria-modal": isDialogRoleEnabled ? false : undefined,
       "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

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 = "35.6.6";
+var packageVersion = "35.6.8";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionPicker.js

@@ -363,6 +363,11 @@ export var PopperWrapper = function PopperWrapper(props) {
     setPopupRef = _useState12[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  /**
+   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
+   * When disabled, fall back to the previous `role="group"` semantics.
+   */
+  var isDialogRoleEnabled = fg('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -390,7 +395,8 @@ export var PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/React.createElement("div", {
-      role: "group",
+      role: isDialogRoleEnabled ? 'dialog' : 'group',
+      "aria-modal": isDialogRoleEnabled ? false : undefined,
       "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.6.7",
+	"version": "35.7.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tabs": "^20.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^125.2.0",
+		"@atlaskit/tmp-editor-statsig": "^126.1.0",
 		"@atlaskit/tokens": "^15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -131,6 +131,9 @@
 		"platform_suppression_removal_fix_reactions": {
 			"type": "boolean"
 		},
+		"platform_ceps-5921-a11y-fix-reactions": {
+			"type": "boolean"
+		},
 		"platform_reactions_view_more_styling_fix": {
 			"type": "boolean"
 		},