@atlaskit/editor-toolbar 0.19.14 → 0.19.16

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-toolbar
 
+## 0.19.16
+
+### Patch Changes
+
+- [`2d81bc503e714`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d81bc503e714) -
+  [ux] [EDITOR-4500] export AppIcon, add optional title prop to ToolbarDropdownItem and create the
+  CustomDropdownMenuItemAnchor component for DropdownMenuItems that render anchor elements
+- [`3b3aa281c8524`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b3aa281c8524) -
+  Editor 4149 Fix keyboard navigation inside turn into
+- [`d4b2e174e207c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4b2e174e207c) -
+  [EDITOR-4500] apply a11y fix to new custom ToolbarDropdownItem component
+- Updated dependencies
+
+## 0.19.15
+
+### Patch Changes
+
+- [`9b8e6a65567af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b8e6a65567af) -
+  ENGHEALTH-48871: Fix aria-required-children a11y issue with Editor toolbar.
+- Updated dependencies
+
 ## 0.19.14
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -100,6 +100,12 @@ Object.defineProperty(exports, "AlignTextRightIcon", {
     return _AlignTextRightIcon.AlignTextRightIcon;
   }
 });
+Object.defineProperty(exports, "AppIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AppIcon.AppIcon;
+  }
+});
 Object.defineProperty(exports, "AppsIcon", {
   enumerable: true,
   get: function get() {
@@ -519,6 +525,7 @@ var _AITranslateIcon = require("./ui/icons/AITranslateIcon");
 var _NestedDropdownRightIcon = require("./ui/icons/NestedDropdownRightIcon");
 var _AICommandIcon = require("./ui/icons/AICommandIcon");
 var _AddIcon = require("./ui/icons/AddIcon");
+var _AppIcon = require("./ui/icons/AppIcon");
 var _AppsIcon = require("./ui/icons/AppsIcon");
 var _BoldIcon = require("./ui/icons/BoldIcon");
 var _CommentIcon = require("./ui/icons/CommentIcon");

package/dist/cjs/ui/ToolbarDropdownItem.compiled.css

@@ -1,20 +1,28 @@
+
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
+._4bfu1r31{text-decoration-color:currentColor}
 ._80om13gf{cursor:not-allowed}
+._ajmmnqa1{text-decoration-style:solid}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
+._9oik1r31:hover{text-decoration-color:currentColor}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._jf4cnqa1:hover{text-decoration-style:solid}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -10,17 +10,23 @@ exports.ToolbarDropdownItem = void 0;
 require("./ToolbarDropdownItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
+var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
+  _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
 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); }
 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; }
 var styles = {
   toolbarDropdownItem: "_11c8fhey _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
   selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
@@ -33,37 +39,80 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function
     ariaPressed = _ref['aria-pressed'],
     ariaKeyshortcuts = _ref['aria-keyshortcuts'],
     onClick = _ref.onClick,
-    tabIndex = _ref.tabIndex;
+    tabIndex = _ref.tabIndex,
+    title = _ref.title;
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    role: (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
     testId: testId,
     xcss: (0, _css.cx)(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
     onClick: onClick,
     tabIndex: tabIndex,
     "aria-haspopup": ariaHasPopup,
-    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
-    "aria-pressed": ariaPressed,
+    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+    // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+    ,
+    "aria-pressed": (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
     "aria-disabled": ariaDisabled,
     "aria-keyshortcuts": ariaKeyshortcuts,
     "data-toolbar-component": (0, _experiments.editorExperiment)('platform_synced_block', true) ? 'menu-item' : undefined,
-    ref: ref
+    ref: ref,
+    title: (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? title : undefined
   }, children);
 });
-var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
-  var _onClick = _ref2.onClick,
-    elemBefore = _ref2.elemBefore,
-    elemAfter = _ref2.elemAfter,
-    isSelected = _ref2.isSelected,
-    children = _ref2.children,
-    isDisabled = _ref2.isDisabled,
-    hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
-    triggerRef = _ref2.triggerRef,
-    _ref2$shouldTitleWrap = _ref2.shouldTitleWrap,
-    shouldTitleWrap = _ref2$shouldTitleWrap === void 0 ? true : _ref2$shouldTitleWrap,
-    testId = _ref2.testId,
-    ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
+var CustomDropdownMenuItemAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var children = _ref2.children,
+    testId = _ref2['data-testid'],
+    ariaHasPopup = _ref2['aria-haspopup'],
+    ariaDisabled = _ref2['aria-disabled'],
+    ariaPressed = _ref2['aria-pressed'],
+    ariaKeyshortcuts = _ref2['aria-keyshortcuts'],
+    onClick = _ref2.onClick,
+    tabIndex = _ref2.tabIndex,
     href = _ref2.href,
     target = _ref2.target,
-    rel = _ref2.rel;
+    rel = _ref2.rel,
+    title = _ref2.title,
+    dataAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({
+    role: (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
+    testId: testId,
+    xcss: (0, _css.cx)(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
+    onClick: onClick,
+    tabIndex: tabIndex,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+    // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+    ,
+    "aria-pressed": (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
+    "aria-disabled": ariaDisabled,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    "data-toolbar-component": "menu-item",
+    ref: ref,
+    href: href,
+    target: target,
+    rel: rel,
+    title: title
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, dataAttributes), children);
+});
+var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
+  var _onClick = _ref3.onClick,
+    elemBefore = _ref3.elemBefore,
+    elemAfter = _ref3.elemAfter,
+    isSelected = _ref3.isSelected,
+    children = _ref3.children,
+    isDisabled = _ref3.isDisabled,
+    hasNestedDropdownMenu = _ref3.hasNestedDropdownMenu,
+    triggerRef = _ref3.triggerRef,
+    title = _ref3.title,
+    _ref3$shouldTitleWrap = _ref3.shouldTitleWrap,
+    shouldTitleWrap = _ref3$shouldTitleWrap === void 0 ? true : _ref3$shouldTitleWrap,
+    testId = _ref3.testId,
+    ariaKeyshortcuts = _ref3.ariaKeyshortcuts,
+    href = _ref3.href,
+    target = _ref3.target,
+    rel = _ref3.rel,
+    dataAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   var parentContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
   var injectedElemAfter = function () {
     if (! /*#__PURE__*/(0, _react.isValidElement)(elemAfter)) {
@@ -77,7 +126,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
       isDisabled: isDisabled
     }));
   }();
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, (0, _extends2.default)({
     onClick: function onClick(e) {
       if (!hasNestedDropdownMenu) {
         parentContext === null || parentContext === void 0 || parentContext.closeMenu(e);
@@ -97,9 +146,11 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     rel: rel
     // @ts-ignore -- This `CustomDropdownMenuItemButton` has type conflicts with the `DropdownItem` component in a way that cannot be reconciled (ignored as it fails types in Jira and should in Platform)
     ,
-    component: href ? undefined : CustomDropdownMenuItemButton,
+    component: href ? (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? CustomDropdownMenuItemAnchor : undefined : CustomDropdownMenuItemButton,
     testId: testId,
     "data-toolbar-component": "menu-item",
+    title: title,
     shouldTitleWrap: shouldTitleWrap
-  }, children);
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
 };

package/dist/cjs/ui/ToolbarNestedDropdownMenu.js

@@ -52,6 +52,7 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
       }, text);
     }
   }, /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: (0, _react2.cx)(enableMaxHeight && styles.scrollContainer)
+    xcss: (0, _react2.cx)(enableMaxHeight && styles.scrollContainer),
+    "data-toolbar-nested-dropdown-menu": true
   }, children));
 };

package/dist/cjs/ui/icons/AppIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AppIcon", {
+  enumerable: true,
+  get: function get() {
+    return _app.default;
+  }
+});
+var _app = _interopRequireDefault(require("@atlaskit/icon/core/app"));

package/dist/es2019/index.js

@@ -28,6 +28,7 @@ export { AITranslateIcon } from './ui/icons/AITranslateIcon';
 export { NestedDropdownRightIcon } from './ui/icons/NestedDropdownRightIcon';
 export { AICommandIcon } from './ui/icons/AICommandIcon';
 export { AddIcon } from './ui/icons/AddIcon';
+export { AppIcon } from './ui/icons/AppIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';

package/dist/es2019/ui/ToolbarDropdownItem.compiled.css

@@ -1,20 +1,28 @@
+
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
+._4bfu1r31{text-decoration-color:currentColor}
 ._80om13gf{cursor:not-allowed}
+._ajmmnqa1{text-decoration-style:solid}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
+._9oik1r31:hover{text-decoration-color:currentColor}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._jf4cnqa1:hover{text-decoration-style:solid}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -1,14 +1,17 @@
 /* ToolbarDropdownItem.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ToolbarDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Pressable } from '@atlaskit/primitives/compiled';
+import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 const styles = {
   toolbarDropdownItem: "_11c8fhey _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
   selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
@@ -21,20 +24,60 @@ const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   'aria-pressed': ariaPressed,
   'aria-keyshortcuts': ariaKeyshortcuts,
   onClick,
-  tabIndex
+  tabIndex,
+  title
 }, ref) => /*#__PURE__*/React.createElement(Pressable, {
+  role: expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
   testId: testId,
   xcss: cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
   onClick: onClick,
   tabIndex: tabIndex,
   "aria-haspopup": ariaHasPopup,
-  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
-  "aria-pressed": ariaPressed,
+  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+  ,
+  "aria-pressed": expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
   "aria-disabled": ariaDisabled,
   "aria-keyshortcuts": ariaKeyshortcuts,
   "data-toolbar-component": editorExperiment('platform_synced_block', true) ? 'menu-item' : undefined,
-  ref: ref
+  ref: ref,
+  title: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? title : undefined
 }, children));
+const CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(({
+  children,
+  'data-testid': testId,
+  'aria-haspopup': ariaHasPopup,
+  'aria-disabled': ariaDisabled,
+  'aria-pressed': ariaPressed,
+  'aria-keyshortcuts': ariaKeyshortcuts,
+  onClick,
+  tabIndex,
+  href,
+  target,
+  rel,
+  title,
+  ...dataAttributes
+}, ref) => /*#__PURE__*/React.createElement(Anchor, _extends({
+  role: expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
+  testId: testId,
+  xcss: cx(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
+  onClick: onClick,
+  tabIndex: tabIndex,
+  "aria-haspopup": ariaHasPopup,
+  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+  ,
+  "aria-pressed": expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
+  "aria-disabled": ariaDisabled,
+  "aria-keyshortcuts": ariaKeyshortcuts,
+  "data-toolbar-component": "menu-item",
+  ref: ref,
+  href: href,
+  target: target,
+  rel: rel,
+  title: title
+  // eslint-disable-next-line react/jsx-props-no-spreading
+}, dataAttributes), children));
 export const ToolbarDropdownItem = ({
   onClick,
   elemBefore,
@@ -44,12 +87,14 @@ export const ToolbarDropdownItem = ({
   isDisabled,
   hasNestedDropdownMenu,
   triggerRef,
+  title,
   shouldTitleWrap = true,
   testId,
   ariaKeyshortcuts,
   href,
   target,
-  rel
+  rel,
+  ...dataAttributes
 }) => {
   const parentContext = useToolbarDropdownMenu();
   const injectedElemAfter = (() => {
@@ -65,7 +110,7 @@ export const ToolbarDropdownItem = ({
       isDisabled
     });
   })();
-  return /*#__PURE__*/React.createElement(DropdownItem, {
+  return /*#__PURE__*/React.createElement(DropdownItem, _extends({
     onClick: e => {
       if (!hasNestedDropdownMenu) {
         parentContext === null || parentContext === void 0 ? void 0 : parentContext.closeMenu(e);
@@ -85,9 +130,11 @@ export const ToolbarDropdownItem = ({
     rel: rel
     // @ts-ignore -- This `CustomDropdownMenuItemButton` has type conflicts with the `DropdownItem` component in a way that cannot be reconciled (ignored as it fails types in Jira and should in Platform)
     ,
-    component: href ? undefined : CustomDropdownMenuItemButton,
+    component: href ? expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? CustomDropdownMenuItemAnchor : undefined : CustomDropdownMenuItemButton,
     testId: testId,
     "data-toolbar-component": "menu-item",
+    title: title,
     shouldTitleWrap: shouldTitleWrap
-  }, children);
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
 };

package/dist/es2019/ui/ToolbarNestedDropdownMenu.js

@@ -40,6 +40,7 @@ export const ToolbarNestedDropdownMenu = ({
       isDisabled: isDisabled
     }, text)
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(enableMaxHeight && styles.scrollContainer)
+    xcss: cx(enableMaxHeight && styles.scrollContainer),
+    "data-toolbar-nested-dropdown-menu": true
   }, children));
 };

package/dist/es2019/ui/icons/AppIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AppIcon } from '@atlaskit/icon/core/app';

package/dist/esm/index.js

@@ -28,6 +28,7 @@ export { AITranslateIcon } from './ui/icons/AITranslateIcon';
 export { NestedDropdownRightIcon } from './ui/icons/NestedDropdownRightIcon';
 export { AICommandIcon } from './ui/icons/AICommandIcon';
 export { AddIcon } from './ui/icons/AddIcon';
+export { AppIcon } from './ui/icons/AppIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';

package/dist/esm/ui/ToolbarDropdownItem.compiled.css

@@ -1,20 +1,28 @@
+
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
+._4bfu1r31{text-decoration-color:currentColor}
 ._80om13gf{cursor:not-allowed}
+._ajmmnqa1{text-decoration-style:solid}
 ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
-._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
+._9oik1r31:hover{text-decoration-color:currentColor}
 ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._jf4cnqa1:hover{text-decoration-style:solid}
 ._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -1,5 +1,9 @@
 /* ToolbarDropdownItem.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
+  _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
 import "./ToolbarDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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; }
@@ -7,11 +11,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Pressable } from '@atlaskit/primitives/compiled';
+import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 var styles = {
   toolbarDropdownItem: "_11c8fhey _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
   selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
@@ -24,37 +30,80 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     ariaPressed = _ref['aria-pressed'],
     ariaKeyshortcuts = _ref['aria-keyshortcuts'],
     onClick = _ref.onClick,
-    tabIndex = _ref.tabIndex;
+    tabIndex = _ref.tabIndex,
+    title = _ref.title;
   return /*#__PURE__*/React.createElement(Pressable, {
+    role: expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
     testId: testId,
     xcss: cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
     onClick: onClick,
     tabIndex: tabIndex,
     "aria-haspopup": ariaHasPopup,
-    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
-    "aria-pressed": ariaPressed,
+    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+    // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+    ,
+    "aria-pressed": expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
     "aria-disabled": ariaDisabled,
     "aria-keyshortcuts": ariaKeyshortcuts,
     "data-toolbar-component": editorExperiment('platform_synced_block', true) ? 'menu-item' : undefined,
-    ref: ref
+    ref: ref,
+    title: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? title : undefined
   }, children);
 });
-export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
-  var _onClick = _ref2.onClick,
-    elemBefore = _ref2.elemBefore,
-    elemAfter = _ref2.elemAfter,
-    isSelected = _ref2.isSelected,
-    children = _ref2.children,
-    isDisabled = _ref2.isDisabled,
-    hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
-    triggerRef = _ref2.triggerRef,
-    _ref2$shouldTitleWrap = _ref2.shouldTitleWrap,
-    shouldTitleWrap = _ref2$shouldTitleWrap === void 0 ? true : _ref2$shouldTitleWrap,
-    testId = _ref2.testId,
-    ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
+var CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    testId = _ref2['data-testid'],
+    ariaHasPopup = _ref2['aria-haspopup'],
+    ariaDisabled = _ref2['aria-disabled'],
+    ariaPressed = _ref2['aria-pressed'],
+    ariaKeyshortcuts = _ref2['aria-keyshortcuts'],
+    onClick = _ref2.onClick,
+    tabIndex = _ref2.tabIndex,
     href = _ref2.href,
     target = _ref2.target,
-    rel = _ref2.rel;
+    rel = _ref2.rel,
+    title = _ref2.title,
+    dataAttributes = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Anchor, _extends({
+    role: expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
+    testId: testId,
+    xcss: cx(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
+    onClick: onClick,
+    tabIndex: tabIndex,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined
+    // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
+    ,
+    "aria-pressed": expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
+    "aria-disabled": ariaDisabled,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    "data-toolbar-component": "menu-item",
+    ref: ref,
+    href: href,
+    target: target,
+    rel: rel,
+    title: title
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, dataAttributes), children);
+});
+export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
+  var _onClick = _ref3.onClick,
+    elemBefore = _ref3.elemBefore,
+    elemAfter = _ref3.elemAfter,
+    isSelected = _ref3.isSelected,
+    children = _ref3.children,
+    isDisabled = _ref3.isDisabled,
+    hasNestedDropdownMenu = _ref3.hasNestedDropdownMenu,
+    triggerRef = _ref3.triggerRef,
+    title = _ref3.title,
+    _ref3$shouldTitleWrap = _ref3.shouldTitleWrap,
+    shouldTitleWrap = _ref3$shouldTitleWrap === void 0 ? true : _ref3$shouldTitleWrap,
+    testId = _ref3.testId,
+    ariaKeyshortcuts = _ref3.ariaKeyshortcuts,
+    href = _ref3.href,
+    target = _ref3.target,
+    rel = _ref3.rel,
+    dataAttributes = _objectWithoutProperties(_ref3, _excluded2);
   var parentContext = useToolbarDropdownMenu();
   var injectedElemAfter = function () {
     if (! /*#__PURE__*/isValidElement(elemAfter)) {
@@ -68,7 +117,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
       isDisabled: isDisabled
     }));
   }();
-  return /*#__PURE__*/React.createElement(DropdownItem, {
+  return /*#__PURE__*/React.createElement(DropdownItem, _extends({
     onClick: function onClick(e) {
       if (!hasNestedDropdownMenu) {
         parentContext === null || parentContext === void 0 || parentContext.closeMenu(e);
@@ -88,9 +137,11 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     rel: rel
     // @ts-ignore -- This `CustomDropdownMenuItemButton` has type conflicts with the `DropdownItem` component in a way that cannot be reconciled (ignored as it fails types in Jira and should in Platform)
     ,
-    component: href ? undefined : CustomDropdownMenuItemButton,
+    component: href ? expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? CustomDropdownMenuItemAnchor : undefined : CustomDropdownMenuItemButton,
     testId: testId,
     "data-toolbar-component": "menu-item",
+    title: title,
     shouldTitleWrap: shouldTitleWrap
-  }, children);
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
 };

package/dist/esm/ui/ToolbarNestedDropdownMenu.js

@@ -43,6 +43,7 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
       }, text);
     }
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(enableMaxHeight && styles.scrollContainer)
+    xcss: cx(enableMaxHeight && styles.scrollContainer),
+    "data-toolbar-nested-dropdown-menu": true
   }, children));
 };

package/dist/esm/ui/icons/AppIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AppIcon } from '@atlaskit/icon/core/app';

package/dist/types/index.d.ts

@@ -27,6 +27,7 @@ export { AITranslateIcon } from './ui/icons/AITranslateIcon';
 export { NestedDropdownRightIcon } from './ui/icons/NestedDropdownRightIcon';
 export { AICommandIcon } from './ui/icons/AICommandIcon';
 export { AddIcon } from './ui/icons/AddIcon';
+export { AppIcon } from './ui/icons/AppIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';

package/dist/types/types.d.ts

@@ -9,3 +9,6 @@ export type ToolbarKeyboardNavigationProviderConfig = {
     handleFocus: (event: KeyboardEvent) => void;
     isShortcutToFocusToolbar: (event: KeyboardEvent) => boolean;
 };
+export type DataAttributes = {
+    [K in `data-${string}`]?: string | number | boolean | undefined;
+};

package/dist/types/ui/ToolbarDropdownItem.d.ts

@@ -1,11 +1,13 @@
 import React, { type ReactNode, type Ref } from 'react';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
+import type { DataAttributes } from '../types';
 type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
     'aria-disabled'?: boolean;
     'aria-haspopup'?: boolean;
     'aria-keyshortcuts'?: string;
     'aria-pressed'?: boolean;
+    title?: string;
 };
 type ToolbarDropdownItemProps = {
     ariaKeyshortcuts?: string;
@@ -22,7 +24,8 @@ type ToolbarDropdownItemProps = {
     target?: string;
     testId?: string;
     textStyle?: TextStyle;
+    title?: string;
     triggerRef?: Ref<HTMLButtonElement>;
-};
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
+} & DataAttributes;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/AppIcon.d.ts

@@ -0,0 +1 @@
+export { default as AppIcon } from '@atlaskit/icon/core/app';

package/dist/types-ts4.5/index.d.ts

@@ -27,6 +27,7 @@ export { AITranslateIcon } from './ui/icons/AITranslateIcon';
 export { NestedDropdownRightIcon } from './ui/icons/NestedDropdownRightIcon';
 export { AICommandIcon } from './ui/icons/AICommandIcon';
 export { AddIcon } from './ui/icons/AddIcon';
+export { AppIcon } from './ui/icons/AppIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';

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

@@ -9,3 +9,6 @@ export type ToolbarKeyboardNavigationProviderConfig = {
     handleFocus: (event: KeyboardEvent) => void;
     isShortcutToFocusToolbar: (event: KeyboardEvent) => boolean;
 };
+export type DataAttributes = {
+    [K in `data-${string}`]?: string | number | boolean | undefined;
+};

package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts

@@ -1,11 +1,13 @@
 import React, { type ReactNode, type Ref } from 'react';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
+import type { DataAttributes } from '../types';
 type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
     'aria-disabled'?: boolean;
     'aria-haspopup'?: boolean;
     'aria-keyshortcuts'?: string;
     'aria-pressed'?: boolean;
+    title?: string;
 };
 type ToolbarDropdownItemProps = {
     ariaKeyshortcuts?: string;
@@ -22,7 +24,8 @@ type ToolbarDropdownItemProps = {
     target?: string;
     testId?: string;
     textStyle?: TextStyle;
+    title?: string;
     triggerRef?: Ref<HTMLButtonElement>;
-};
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
+} & DataAttributes;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/AppIcon.d.ts

@@ -0,0 +1 @@
+export { default as AppIcon } from '@atlaskit/icon/core/app';

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.19.14",
+	"version": "0.19.16",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -30,7 +30,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^18.0.0",
+		"@atlaskit/tmp-editor-statsig": "^20.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",