@atlaskit/editor-common 78.17.1 → 78.18.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-common
 
+## 78.18.0
+
+### Minor Changes
+
+- [#71857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71857) [`bd0fdd102253`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd0fdd102253) - Added correct role for Browse tablist, added aria-selected toggle, added functionality for aria-controls, added tabpanel and functionality for that
+
+## 78.17.2
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+- Updated dependencies
+
 ## 78.17.1
 
 ### Patch Changes

package/analytics/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/analytics/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/analytics/index.d.ts"
       ]

package/annotation/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/annotation/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/annotation/index.d.ts"
       ]

package/card/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/card/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/card/index.d.ts"
       ]

package/clipboard/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/clipboard/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/clipboard/index.d.ts"
       ]

package/collab/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/collab/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/collab/index.d.ts"
       ]

package/commands/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/commands/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/commands/index.d.ts"
       ]

package/constants/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/link/constants.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/link/constants.d.ts"
       ]

package/copy-button/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/copy-button/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/copy-button/index.d.ts"
       ]

package/core-utils/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/core-utils/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/core-utils/index.d.ts"
       ]

package/dist/cjs/element-browser/components/CategoryList.js

@@ -54,7 +54,6 @@ function CategoryListItem(_ref2) {
   var ref = (0, _useFocus.default)(focus);
   var onClick = (0, _react.useCallback)(function () {
     onSelectCategory(category);
-
     /**
      * When user double clicks on same category, focus on first item.
      */
@@ -94,13 +93,18 @@ function CategoryListItem(_ref2) {
     }, rest);
   }, [category.name, selectedCategory]);
   return (0, _react2.jsx)("div", {
-    css: buttonWrapper
+    css: buttonWrapper,
+    role: "presentation"
   }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
     onFocus: onFocus,
     theme: getTheme,
+    role: "tab",
+    "aria-selected": selectedCategory === category.name ? 'true' : 'false',
+    "aria-controls": "browse-category-".concat(category.name, "-tab"),
+    id: "browse-category--".concat(category.name, "-button"),
     ref: ref,
     testId: "element-browser-category-item"
   }, category.title));

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -114,16 +114,20 @@ function ElementList(_ref) {
       }, props)));
     };
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
+    css: elementItemsWrapper,
+    "data-testid": "element-items",
+    id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
+    "aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
+    role: "tabpanel",
+    tabIndex: items.length === 0 ? 0 : undefined
+  }, !items.length ? emptyStateHandler ? emptyStateHandler({
     mode: mode,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
   }) : (0, _react2.jsx)(_EmptyState.default, {
     onExternalLinkClick: onExternalLinkClick
-  }) : (0, _react2.jsx)("div", {
-    css: elementItemsWrapper,
-    "data-testid": "element-items"
-  }, (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
+  }) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
     disableWidth: true
   }, function (_ref3) {
     var height = _ref3.height;
@@ -269,7 +273,7 @@ var elementItemWrapper = (0, _react2.css)({
     button: {
       height: '75px',
       alignItems: 'flex-start',
-      padding: "var(--ds-space-150, 12px)"
+      padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
     }
   }
 });

package/dist/cjs/element-browser/components/StatelessElementBrowser.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -21,25 +20,83 @@ var _ViewMore = require("../ViewMore");
 var _CategoryList = _interopRequireDefault(require("./CategoryList"));
 var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
 var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
-var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
-var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
-var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
-var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
-var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
-var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
-var sidebarHeading = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
-var mobileMainContent = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
-var mainContent = (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, _constants.GRID_SIZE * 2);
-var searchContainer = (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
-var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
-var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
+/** @jsx jsx */
+
+var wrapper = (0, _react2.css)({
+  width: '100%',
+  maxHeight: 'inherit',
+  overflow: 'hidden'
+});
+var baseBrowserContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100%',
+  minHeight: '-webkit-fill-available'
+});
+var mobileElementBrowserContainer = (0, _react2.css)(baseBrowserContainerStyles, {
+  flexDirection: 'column'
+});
+var elementBrowserContainer = (0, _react2.css)(baseBrowserContainerStyles, {
+  flexDirection: 'row'
+});
+var baseSidebarStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  overflowX: 'auto',
+  overflowY: 'hidden'
+});
+var mobileSideBar = (0, _react2.css)(baseSidebarStyles, {
+  flex: "0 0 ".concat(_constants.INLINE_SIDEBAR_HEIGHT),
+  padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-150, 12px)")
+});
+var mobileSideBarShowCategories = (0, _react2.css)({
+  flex: '0 0 auto'
+});
+var sideBar = (0, _react2.css)(baseSidebarStyles, {
+  flex: "0 0 'auto'"
+});
+var sideBarShowCategories = (0, _react2.css)(baseSidebarStyles, {
+  flex: "0 0 ".concat(_constants.SIDEBAR_WIDTH)
+});
+var sidebarHeading = (0, _react2.css)({
+  flex: "0 0 ".concat(_constants.SIDEBAR_HEADING_WRAPPER_HEIGHT),
+  display: 'inline-flex',
+  alignItems: 'center',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  fontWeight: 700
+});
+var mobileMainContent = (0, _react2.css)({
+  flex: '1 1 auto',
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto',
+  height: '100%'
+});
+var mainContent = (0, _react2.css)(mobileMainContent, {
+  marginLeft: "var(--ds-space-200, 16px)",
+  height: 'auto'
+});
+var searchContainer = (0, _react2.css)({
+  paddingBottom: "var(--ds-space-200, 16px)"
+});
+var mobileCategoryListWrapper = (0, _react2.css)({
+  display: 'flex',
+  overflowX: 'auto',
+  padding: "var(--ds-space-200, 8px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"),
+  minHeight: "".concat(_constants.GRID_SIZE * 4, "px"),
+  overflow: '-moz-scrollbars-none',
+  '::-webkit-scrollbar': {
+    display: 'none'
+  },
+  scrollbarWidth: 'none',
+  MsOverflowStyle: 'none'
+});
+var categoryListWrapper = (0, _react2.css)(mobileCategoryListWrapper, {
+  padding: 0,
+  marginTop: "var(--ds-space-200, 24px)",
+  flexDirection: 'column'
+});
 function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
@@ -225,12 +282,15 @@ function DesktopBrowser(_ref2) {
     css: showCategories ? sideBarShowCategories : sideBar
   }, (0, _react2.jsx)("h2", {
     css: sidebarHeading,
-    "data-testid": "sidebar-heading"
+    "data-testid": "sidebar-heading",
+    id: "sidebar-heading"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
   })), (0, _react2.jsx)("nav", {
+    role: "tablist",
+    "aria-labelledby": "sidebar-heading",
     css: categoryListWrapper
   }, (0, _react2.jsx)(_CategoryList.default, {
     categories: categories,
@@ -241,7 +301,9 @@ function DesktopBrowser(_ref2) {
     css: mainContent,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
-  }, showSearch && (0, _react2.jsx)("div", {
+  }, showSearch &&
+  // eslint-disable-next-line
+  (0, _react2.jsx)("div", {
     css: searchContainer
   }, (0, _react2.jsx)(_ElementSearch.default, {
     onSearch: onSearch,

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -165,19 +165,24 @@ var widthPluginKey = {
   }
 };
 var ExtensionDeprecated = function ExtensionDeprecated(props) {
-  return (0, _react2.jsx)(_withPluginState.WithPluginState, {
-    editorView: props.view,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: function render(_ref) {
-      var widthState = _ref.widthState;
-      return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
-        widthState: widthState
-      }, props));
-    }
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    (0, _react2.jsx)(_withPluginState.WithPluginState, {
+      editorView: props.view,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: function render(_ref) {
+        var widthState = _ref.widthState;
+        return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
+          widthState: widthState
+        }, props));
+      }
+    })
+  );
 };
+
 /**
  * End workaround
  */

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -197,18 +197,22 @@ var widthPluginKey = {
   }
 };
 var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
-  return (0, _react2.jsx)(_withPluginState.WithPluginState, {
-    editorView: props.editorView,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: function render(_ref2) {
-      var widthState = _ref2.widthState;
-      return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
-        widthState: widthState
-      }, props));
-    }
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    (0, _react2.jsx)(_withPluginState.WithPluginState, {
+      editorView: props.editorView,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: function render(_ref2) {
+        var widthState = _ref2.widthState;
+        return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
+          widthState: widthState
+        }, props));
+      }
+    })
+  );
 };
 /**
  * End workaround

package/dist/cjs/hooks/useSharedPluginState.js

@@ -109,6 +109,9 @@ function useSharedPluginState(injectionApi, plugins) {
       return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, "".concat(pluginName, "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]));
     }, {});
   }, [injectionApi, pluginNames]);
+
+  // @ts-expect-error - Type '`${K}State`' is not assignable to type '`${K}State`'. Two different types with this name exist, but they are unrelated.
+  // This error was introduced after upgrading to TypeScript 5
   return useSharedPluginStateInternal(namedExternalPlugins);
 }
 function useSharedPluginStateInternal(externalPlugins) {

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.17.1";
+var packageVersion = "78.18.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.17.1";
+var packageVersion = "78.18.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/element-browser/components/CategoryList.js

@@ -34,7 +34,6 @@ function CategoryListItem({
   const ref = useFocus(focus);
   const onClick = useCallback(() => {
     onSelectCategory(category);
-
     /**
      * When user double clicks on same category, focus on first item.
      */
@@ -78,13 +77,18 @@ function CategoryListItem({
     };
   }, [category.name, selectedCategory]);
   return jsx("div", {
-    css: buttonWrapper
+    css: buttonWrapper,
+    role: "presentation"
   }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
     onFocus: onFocus,
     theme: getTheme,
+    role: "tab",
+    "aria-selected": selectedCategory === category.name ? 'true' : 'false',
+    "aria-controls": `browse-category-${category.name}-tab`,
+    id: `browse-category--${category.name}-button`,
     ref: ref,
     testId: "element-browser-category-item"
   }, category.title));

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -98,16 +98,20 @@ function ElementList({
       focus: focusedItemIndex === index
     }, props)));
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
-  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
+    css: elementItemsWrapper,
+    "data-testid": "element-items",
+    id: selectedCategory ? `browse-category-${selectedCategory}-tab` : 'browse-category-tab',
+    "aria-labelledby": selectedCategory ? `browse-category--${selectedCategory}-button` : 'browse-category-button',
+    role: "tabpanel",
+    tabIndex: items.length === 0 ? 0 : undefined
+  }, !items.length ? emptyStateHandler ? emptyStateHandler({
     mode,
     selectedCategory,
     searchTerm
   }) : jsx(EmptyState, {
     onExternalLinkClick: onExternalLinkClick
-  }) : jsx("div", {
-    css: elementItemsWrapper,
-    "data-testid": "element-items"
-  }, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
+  }) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, ({
     height
@@ -253,7 +257,7 @@ const elementItemWrapper = css({
     button: {
       height: '75px',
       alignItems: 'flex-start',
-      padding: "var(--ds-space-150, 12px)"
+      padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px`
     }
   }
 });