@atlaskit/emoji 71.11.0 → 71.11.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/emoji
 
+## 71.11.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 71.11.1
+
+### Patch Changes
+
+- [`79c6e92d799d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79c6e92d799d3) -
+  [ux] A11Y-31084: Expose the emoji picker grid as an accessible list
+
+  Behind the `platform_a11y_fixes_emoji_picker_list` experiment, the emoji picker's scrollable grid
+  is exposed to assistive technology as a single list: the scroll container becomes `role="list"`
+  and each emoji is a `role="listitem"` (`<li>`), so screen readers announce the list and its items
+  instead of a grid. The virtualizer is left intact. Also registers the experiment in the editor
+  experiments config so it can be resolved via `expValEqualsNoExposure`.
+
+- Updated dependencies
+
 ## 71.11.0
 
 ### Minor Changes

package/dist/cjs/components/picker/EmojiPickerCategoryHeading.js

@@ -11,6 +11,7 @@ require("./EmojiPickerCategoryHeading.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactIntl = require("react-intl");
 var _typeHelpers = require("../../util/type-helpers");
@@ -32,8 +33,12 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: className,
-    "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-    role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
+    "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID
+    // A11Y-31084: With the list-markup experiment (or the existing reaction-emoji
+    // flag) the picker no longer uses grid semantics, so the category heading
+    // must not be a "rowheader" (which requires a row parent).
+    ,
+    role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true) ? 'presentation' : 'rowheader'
   }, (0, _platformFeatureFlags.fg)('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
   }, /*#__PURE__*/React.createElement(_heading.default, {

package/dist/cjs/components/picker/EmojiPickerEmojiRow.js

@@ -49,7 +49,14 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       onFocus && onFocus(emojiId, emoji, event);
     };
   };
-  if ((0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji')) {
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row of
+  // emojis is exposed as an unordered list (<ul role="list">) with every emoji
+  // as a <li role="listitem">, so screen readers announce the list and its
+  // items. Each virtualized row is its own list (valid list/listitem ownership,
+  // virtualization-safe). This is gated separately from the existing
+  // platform_a11y_fixes_reaction_emoji flag.
+  var isEmojiPickerListEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  if (isEmojiPickerListEnabled || (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji')) {
     return /*#__PURE__*/React.createElement("ul", {
       role: "list",
       className: (0, _runtime.ax)(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _18u0u2gc"])

package/dist/cjs/components/picker/VirtualList.js

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactVirtual = require("@tanstack/react-virtual");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
 var _constants = require("../../util/constants");
@@ -44,6 +45,14 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
   var _useEmojiPickerListCo = (0, _useEmojiPickerListContext.useEmojiPickerListContext)(),
     currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
     setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
+
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row is
+  // rendered as its own <ul role="list"> (see EmojiPickerEmojiRow). For that
+  // list markup to be valid, the surrounding grid semantics must be dropped:
+  // the scroll container becomes an application container and each row wrapper
+  // becomes presentational, matching the existing a11y reaction-emoji flag.
+  var isEmojiPickerListEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  var useListSemantics = isEmojiPickerListEnabled || (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji');
   var getVirtualizerOptions = function getVirtualizerOptions() {
     var rowCount = props.rowCount,
       rowHeight = props.rowHeight,
@@ -284,8 +293,8 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: (0, _platformFeatureFlags.fg)('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
-    tabIndex: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? -1 : undefined,
+    role: useListSemantics ? 'application' : (0, _platformFeatureFlags.fg)('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
+    tabIndex: useListSemantics ? -1 : undefined,
     className: (0, _runtime.ax)(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -305,8 +314,8 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
         height: "".concat(virtualRow.size, "px"),
         transform: "translateY(".concat(virtualRow.start, "px)")
       },
-      role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
-    }, (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? {} : {
+      role: useListSemantics ? 'presentation' : 'row'
+    }, useListSemantics ? {} : {
       'aria-rowindex': index + 1
     }, {
       className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.10.0"
+      packageVersion: "71.11.1"
     }, attributes)
   };
 };

package/dist/es2019/components/picker/EmojiPickerCategoryHeading.js

@@ -3,6 +3,7 @@ import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
 import { isMessagesKey } from '../../util/type-helpers';
@@ -23,8 +24,12 @@ const EmojiPickerCategoryHeading = ({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
   className: className,
-  "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-  role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
+  "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID
+  // A11Y-31084: With the list-markup experiment (or the existing reaction-emoji
+  // flag) the picker no longer uses grid semantics, so the category heading
+  // must not be a "rowheader" (which requires a row parent).
+  ,
+  role: fg('platform_a11y_fixes_reaction_emoji') || expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true) ? 'presentation' : 'rowheader'
 }, fg('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
   className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
 }, /*#__PURE__*/React.createElement(Heading, {

package/dist/es2019/components/picker/EmojiPickerEmojiRow.js

@@ -41,7 +41,14 @@ const EmojiPickerEmojiRow = ({
     });
     onFocus && onFocus(emojiId, emoji, event);
   };
-  if (fg('platform_a11y_fixes_reaction_emoji')) {
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row of
+  // emojis is exposed as an unordered list (<ul role="list">) with every emoji
+  // as a <li role="listitem">, so screen readers announce the list and its
+  // items. Each virtualized row is its own list (valid list/listitem ownership,
+  // virtualization-safe). This is gated separately from the existing
+  // platform_a11y_fixes_reaction_emoji flag.
+  const isEmojiPickerListEnabled = expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  if (isEmojiPickerListEnabled || fg('platform_a11y_fixes_reaction_emoji')) {
     return /*#__PURE__*/React.createElement("ul", {
       role: "list",
       className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _18u0u2gc"])

package/dist/es2019/components/picker/VirtualList.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
@@ -35,6 +36,14 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     currentEmojisFocus,
     setEmojisFocus
   } = useEmojiPickerListContext();
+
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row is
+  // rendered as its own <ul role="list"> (see EmojiPickerEmojiRow). For that
+  // list markup to be valid, the surrounding grid semantics must be dropped:
+  // the scroll container becomes an application container and each row wrapper
+  // becomes presentational, matching the existing a11y reaction-emoji flag.
+  const isEmojiPickerListEnabled = expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  const useListSemantics = isEmojiPickerListEnabled || fg('platform_a11y_fixes_reaction_emoji');
   const getVirtualizerOptions = () => {
     const {
       rowCount,
@@ -272,8 +281,8 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: fg('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
-    tabIndex: fg('platform_a11y_fixes_reaction_emoji') ? -1 : undefined,
+    role: useListSemantics ? 'application' : fg('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
+    tabIndex: useListSemantics ? -1 : undefined,
     className: ax(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -292,8 +301,8 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
       height: `${virtualRow.size}px`,
       transform: `translateY(${virtualRow.start}px)`
     },
-    role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
-  }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+    role: useListSemantics ? 'presentation' : 'row'
+  }, useListSemantics ? {} : {
     'aria-rowindex': index + 1
   }, {
     className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.10.0",
+    packageVersion: "71.11.1",
     ...attributes
   }
 });

package/dist/esm/components/picker/EmojiPickerCategoryHeading.js

@@ -3,6 +3,7 @@ import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
 import { isMessagesKey } from '../../util/type-helpers';
@@ -23,8 +24,12 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: className,
-    "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-    role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
+    "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID
+    // A11Y-31084: With the list-markup experiment (or the existing reaction-emoji
+    // flag) the picker no longer uses grid semantics, so the category heading
+    // must not be a "rowheader" (which requires a row parent).
+    ,
+    role: fg('platform_a11y_fixes_reaction_emoji') || expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true) ? 'presentation' : 'rowheader'
   }, fg('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
     className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
   }, /*#__PURE__*/React.createElement(Heading, {

package/dist/esm/components/picker/EmojiPickerEmojiRow.js

@@ -40,7 +40,14 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       onFocus && onFocus(emojiId, emoji, event);
     };
   };
-  if (fg('platform_a11y_fixes_reaction_emoji')) {
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row of
+  // emojis is exposed as an unordered list (<ul role="list">) with every emoji
+  // as a <li role="listitem">, so screen readers announce the list and its
+  // items. Each virtualized row is its own list (valid list/listitem ownership,
+  // virtualization-safe). This is gated separately from the existing
+  // platform_a11y_fixes_reaction_emoji flag.
+  var isEmojiPickerListEnabled = expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  if (isEmojiPickerListEnabled || fg('platform_a11y_fixes_reaction_emoji')) {
     return /*#__PURE__*/React.createElement("ul", {
       role: "list",
       className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _18u0u2gc"])

package/dist/esm/components/picker/VirtualList.js

@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
@@ -35,6 +36,14 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useEmojiPickerListCo = useEmojiPickerListContext(),
     currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
     setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
+
+  // A11Y-31084: When the emoji picker list experiment is enabled, each row is
+  // rendered as its own <ul role="list"> (see EmojiPickerEmojiRow). For that
+  // list markup to be valid, the surrounding grid semantics must be dropped:
+  // the scroll container becomes an application container and each row wrapper
+  // becomes presentational, matching the existing a11y reaction-emoji flag.
+  var isEmojiPickerListEnabled = expValEqualsNoExposure('platform_a11y_fixes_emoji_picker_list', 'isEnabled', true);
+  var useListSemantics = isEmojiPickerListEnabled || fg('platform_a11y_fixes_reaction_emoji');
   var getVirtualizerOptions = function getVirtualizerOptions() {
     var rowCount = props.rowCount,
       rowHeight = props.rowHeight,
@@ -275,8 +284,8 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: fg('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
-    tabIndex: fg('platform_a11y_fixes_reaction_emoji') ? -1 : undefined,
+    role: useListSemantics ? 'application' : fg('platform_emoji_grid_presentation') ? 'presentation' : 'grid',
+    tabIndex: useListSemantics ? -1 : undefined,
     className: ax(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -296,8 +305,8 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
         height: "".concat(virtualRow.size, "px"),
         transform: "translateY(".concat(virtualRow.start, "px)")
       },
-      role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
-    }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+      role: useListSemantics ? 'presentation' : 'row'
+    }, useListSemantics ? {} : {
       'aria-rowindex': index + 1
     }, {
       className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.10.0"
+      packageVersion: "71.11.1"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.11.0",
+	"version": "71.11.2",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,14 +50,14 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^130.2.0",
+		"@atlaskit/tmp-editor-statsig": "^132.0.0",
 		"@atlaskit/tokens": "^16.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.22.2",
+		"@compiled/react": "^1.0.0",
 		"@tanstack/react-virtual": "3.0.0-beta.60",
 		"js-search": "^2.0.0",
 		"lru_map": "^0.4.1",