@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/esm/plugins/placeholder/index.js

@@ -2,9 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
-import { isInEmptyLine, isEmptyDocument, bracketTyped } from '../../utils/document';
-import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
-import { placeHolderClassName } from './styles';
+import { isEmptyDocument, bracketTyped } from '../../utils/document';
 export var pluginKey = new PluginKey('placeholderPlugin');
 import { focusStateKey } from '../base/pm-plugins/focus-handler';
 import { isTypeAheadOpen } from '../type-ahead/utils';
@@ -14,22 +12,24 @@ function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
 }
 
+export var placeholderTestId = 'placeholder-test-id';
 export function createPlaceholderDecoration(editorState, placeholderText) {
   var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var placeholderDecoration = document.createElement('span');
-  var placeHolderClass = placeHolderClassName;
-  var alignment = alignmentPluginKey.getState(editorState);
+  var placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration'; // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
 
-  if (alignment && alignment.align === 'end') {
-    placeHolderClass = placeHolderClass + ' align-end';
-  } else if (alignment && alignment.align === 'center') {
-    placeHolderClass = placeHolderClass + ' align-center';
+  if (browser.gecko) {
+    var placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
   }
 
-  placeholderDecoration.className = placeHolderClass;
-  var placeholderNode = document.createElement('span');
-  placeholderNode.textContent = placeholderText;
-  placeholderDecoration.appendChild(placeholderNode); // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  placeholderNodeWithText.textContent = placeholderText || ' '; // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
   // Add a editable buff node as the cursor moving forward is inevitable
   // when backspace in GBoard composition
 
@@ -41,7 +41,7 @@ export function createPlaceholderDecoration(editorState, placeholderText) {
   }
 
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
-    side: -1,
+    side: 0,
     key: 'placeholder'
   })]);
 }
@@ -58,7 +58,7 @@ var emptyPlaceholder = {
   hasPlaceholder: false
 };
 
-function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
+function createPlaceHolderStateFrom(editorState, defaultPlaceholderText, bracketPlaceholderText) {
   var isEditorFocused = focusStateKey.getState(editorState);
 
   if (isTypeAheadOpen(editorState)) {
@@ -69,48 +69,26 @@ function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defa
     return setPlaceHolderState(defaultPlaceholderText);
   }
 
-  var placeholderHint = getPlaceholderHintMessage();
-
-  if (placeholderHint && isInEmptyLine(editorState) && isEditorFocused) {
-    var $from = editorState.selection.$from;
-    return setPlaceHolderState(placeholderHint, $from.pos);
-  }
-
   if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
-    var _$from = editorState.selection.$from; // Space is to account for positioning of the bracket
+    var $from = editorState.selection.$from; // Space is to account for positioning of the bracket
 
     var bracketHint = '  ' + bracketPlaceholderText;
-    return setPlaceHolderState(bracketHint, _$from.pos - 1);
+    return setPlaceHolderState(bracketHint, $from.pos - 1);
   }
 
   return emptyPlaceholder;
 }
 
-function createGetPlaceholderHintMessage(placeholderHints) {
-  var index = 0;
-  return function () {
-    if (!placeholderHints || placeholderHints.length === 0) {
-      return;
-    }
-
-    var length = placeholderHints.length;
-    var placeholder = placeholderHints[index++];
-    index = index % length;
-    return placeholder;
-  };
-}
-
-export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPlaceholderText) {
-  if (!defaultPlaceholderText && !placeholderHints && !bracketPlaceholderText) {
+export function createPlugin(defaultPlaceholderText, bracketPlaceholderText) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
     return;
   }
 
-  var getPlaceholderHintMessage = createGetPlaceholderHintMessage(placeholderHints);
   return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init(_, state) {
-        return createPlaceHolderStateFrom(state, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+        return createPlaceHolderStateFrom(state, defaultPlaceholderText, bracketPlaceholderText);
       },
       apply: function apply(tr, _oldPluginState, _oldEditorState, newEditorState) {
         var meta = tr.getMeta(pluginKey);
@@ -121,11 +99,11 @@ export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPl
           }
 
           if (meta.applyPlaceholderIfEmpty) {
-            return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+            return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
           }
         }
 
-        return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+        return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
       }
     },
     props: {
@@ -152,7 +130,7 @@ var placeholderPlugin = function placeholderPlugin(options) {
       return [{
         name: 'placeholder',
         plugin: function plugin() {
-          return createPlugin(options && options.placeholder, options && options.placeholderHints, options && options.placeholderBracketHint);
+          return createPlugin(options && options.placeholder, options && options.placeholderBracketHint);
         }
       }];
     }

package/dist/esm/plugins/placeholder/styles.js

@@ -4,6 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var placeHolderClassName = 'placeholder-decoration';
-export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n      outline: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, token('color.text.subtlest', N200));
+export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));

package/dist/esm/plugins/placeholder-text/styles.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), token('color.text.subtlest', N300), token('color.text.subtlest', N300), token('color.text.subtlest', N300), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), token('color.text.subtlest', N300));
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N300, ")"));

package/dist/esm/plugins/rule/styles.js

@@ -5,7 +5,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var ruleStyles = function ruleStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, token('color.border.selected', akEditorSelectedBorderColor));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 };

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -25,7 +25,6 @@ import { N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
 import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-import { token } from '@atlaskit/tokens';
 var PopupWithListeners = withOuterListeners(Popup);
 export var InputMethod;
 
@@ -35,7 +34,7 @@ export var InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (InputMethod = {}));
 
-var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), token('elevation.surface.overlay', N0), gridSize(), borderRadius(), token('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)'));
+var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), gridSize(), borderRadius(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   _inherits(StatusPickerWithoutAnalytcs, _React$Component);
 

package/dist/esm/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -17,6 +17,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { AnalyticsListener } from '@atlaskit/analytics-next';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReactNodeView } from '../../../nodeviews';
 import WithPluginState from '../../../ui/WithPluginState';
 import { stateKey as taskPluginKey } from '../pm-plugins/plugin-key';
@@ -42,12 +43,14 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (taskId, isChecked) {
       var tr = _this.view.state.tr;
 
-      var nodePos = _this.getPos();
+      var nodePos = _this.getPos(); // SetAttrsStep should be used to prevent task updates from being dropped when mapping task ticks
+      // from a previous version of the document, such as a published page.
 
-      tr.setNodeMarkup(nodePos, undefined, {
+
+      tr.step(new SetAttrsStep(nodePos, {
         state: isChecked ? 'DONE' : 'TODO',
         localId: taskId
-      });
+      }));
       tr.setMeta('scrollIntoView', false);
 
       _this.view.dispatch(tr);

package/dist/esm/plugins/tasks-and-decisions/styles.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));
+export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

package/dist/esm/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -65,6 +65,7 @@ export var ToolbarDecision = /*#__PURE__*/function (_PureComponent) {
         disabled: disabled || isDisabled,
         spacing: isReducedSpacing ? 'none' : 'default',
         title: "".concat(label, " <>"),
+        "aria-keyshortcuts": "Shift+, Shift+. space",
         iconBefore: /*#__PURE__*/React.createElement(DecisionIcon, {
           label: label
         })

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -29,6 +29,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
 import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
+import { getFeatureFlags } from '../../../feature-flags-context/get-feature-flags';
 var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 var EXPERIMENT_GROUP_CONTROL = 'control';
 export var messages = defineMessages({
@@ -78,10 +79,9 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
 
         var _this$props$pluginSta = _this.props.pluginState,
             palette = _this$props$pluginSta.palette,
-            paletteExpanded = _this$props$pluginSta.paletteExpanded,
             defaultColor = _this$props$pluginSta.defaultColor; // we store color names in analytics
 
-        var swatch = (paletteExpanded || palette).find(function (sw) {
+        var swatch = palette.find(function (sw) {
           return sw.value === color;
         });
         var isNewColor = color !== defaultColor && !originalTextColors.some(function (col) {
@@ -179,11 +179,14 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           popupsScrollableElement = _this$props.popupsScrollableElement,
           isReducedSpacing = _this$props.isReducedSpacing,
           pluginState = _this$props.pluginState,
-          paletteExpanded = _this$props.pluginState.paletteExpanded,
           formatMessage = _this$props.intl.formatMessage,
           disabled = _this$props.disabled;
       var labelTextColor = formatMessage(messages.textColor);
-      var palette = paletteExpanded || pluginState.palette;
+      var palette = pluginState.palette;
+
+      var _getFeatureFlags = getFeatureFlags(this.props.editorView.state),
+          useSomewhatSemanticTextColorNames = _getFeatureFlags.useSomewhatSemanticTextColorNames;
+
       var fitWidth;
 
       if (document.body.clientWidth <= 740) {
@@ -239,7 +242,8 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color,
-        textPalette: true
+        textPalette: true,
+        useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
       }))), jsx("span", {
         css: separatorStyles
       }));

package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -15,6 +15,7 @@ import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin
 import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent } from '../../../../../keymaps';
 import { INPUT_METHOD } from '../../../../analytics/types/enums';
 import { IconTypes } from '../types';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 var withToolbarInputMethod = function withToolbarInputMethod(func) {
   return func({
@@ -98,7 +99,9 @@ var getIcon = function getIcon(_ref) {
       name: iconType
     },
     isActive: isActive,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
   };
 };
 

package/dist/esm/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -16,8 +16,11 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
   return jsx("span", {
     css: buttonGroupStyle
   }, items.map(function (item) {
+    var _item$ariaLabel;
+
     return jsx(ToolbarButton, {
       key: item.key,
+      testId: "editor-toolbar__".concat(String(item.content)),
       buttonId: item.buttonId,
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: onClick(item.command),
@@ -26,7 +29,8 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
       title: item.tooltipElement,
       iconBefore: item.iconElement,
       "aria-pressed": item.isActive,
-      "aria-label": String(item.content)
+      "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
+      "aria-keyshortcuts": item['aria-keyshortcuts']
     });
   }));
 });

package/dist/esm/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -5,11 +5,12 @@ import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
 import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
 import IndentIcon from '@atlaskit/icon/glyph/editor/indent';
 import OutdentIcon from '@atlaskit/icon/glyph/editor/outdent';
-import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent } from '../../../keymaps';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent, tooltip } from '../../../keymaps';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
 import { messages } from '../../list/messages';
 import { messages as indentationMessages } from '../../indentation/messages';
 import { buttonGroupStyle, separatorStyles } from '../../../ui/styles';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 export function Toolbar(props) {
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -26,6 +27,8 @@ export function Toolbar(props) {
       onItemActivated = props.onItemActivated;
   var labelUnorderedList = formatMessage(messages.unorderedList);
   var labelOrderedList = formatMessage(messages.orderedList);
+  var indentMessage = formatMessage(indentationMessages.indent);
+  var outdentMessage = formatMessage(indentationMessages.outdent);
 
   var handleOnItemActivated = function handleOnItemActivated(buttonName) {
     return function (event) {
@@ -40,11 +43,13 @@ export function Toolbar(props) {
     css: buttonGroupStyle
   }, jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.BULLET_LIST,
+    testId: labelUnorderedList,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('bullet_list'),
     selected: bulletListActive,
     "aria-pressed": bulletListActive,
-    "aria-label": labelUnorderedList,
+    "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
     disabled: bulletListDisabled || disabled,
     title: jsx(ToolTipContent, {
       description: labelUnorderedList,
@@ -55,11 +60,13 @@ export function Toolbar(props) {
     })
   }), jsx(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
+    testId: labelOrderedList,
     spacing: isReducedSpacing ? 'none' : 'default',
     onClick: handleOnItemActivated('ordered_list'),
     selected: orderedListActive,
     "aria-pressed": orderedListActive,
-    "aria-label": labelOrderedList,
+    "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
     disabled: orderedListDisabled || disabled,
     title: jsx(ToolTipContent, {
       description: labelOrderedList,
@@ -77,9 +84,10 @@ export function Toolbar(props) {
       label: ""
     }),
     disabled: outdentDisabled || disabled,
-    "aria-label": formatMessage(indentationMessages.outdent),
+    "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.outdent),
+      description: outdentMessage,
       keymap: toggleOutdentKeymap
     })
   }), showIndentationButtons && jsx(ToolbarButton, {
@@ -91,9 +99,10 @@ export function Toolbar(props) {
       label: ""
     }),
     disabled: indentDisabled || disabled,
-    "aria-label": formatMessage(indentationMessages.indent),
+    "aria-label": tooltip(toggleIndentKeymap, indentMessage),
+    "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
     title: jsx(ToolTipContent, {
-      description: formatMessage(indentationMessages.indent),
+      description: indentMessage,
       keymap: toggleIndentKeymap
     })
   }), jsx("span", {

package/dist/esm/plugins/type-ahead/index.js

@@ -8,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  *
  *
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { createPlugin } from './pm-plugins/main';
 import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
@@ -60,7 +60,7 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
       });
     });
   }, [onItemInsert, query]);
-  var cancel = useCallback(function (_ref3) {
+  var cancel = React.useCallback(function (_ref3) {
     var setSelectionAt = _ref3.setSelectionAt,
         addPrefixTrigger = _ref3.addPrefixTrigger,
         forceFocusOnEditor = _ref3.forceFocusOnEditor;

package/dist/esm/plugins/type-ahead/messages.js

@@ -1,13 +1,53 @@
 import { defineMessages } from 'react-intl-next';
 export var typeAheadListMessages = defineMessages({
-  typeAheadResultLabel: {
-    id: 'fabric.editor.typeAheadResultLabel',
-    defaultMessage: 'TypeAhead results',
+  typeAheadPopupLabel: {
+    id: 'fabric.editor.typeAhead.popupLabel',
+    defaultMessage: 'Typeahead results',
     description: 'the result of a typeahead, similar to autocomplete results+'
   },
+  quickInsertPopupLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertPopupLabel',
+    defaultMessage: 'Shortcuts for inserts and formatting',
+    description: 'the result of a quick insert typeahead, similar to autocomplete results+'
+  },
+  quickInsertInputLabel: {
+    id: 'fabric.editor.typeAhead.quickInsertInputLabel',
+    defaultMessage: 'Begin typing to search or filter shortcut options',
+    description: 'assisitve text for typeahed input field'
+  },
+  emojiPopupLabel: {
+    id: 'fabric.editor.typeahead.emojiPopupLabel',
+    defaultMessage: 'Emoji shortcuts',
+    description: 'the result of a emoji typeahead, similar to autocomplete results+'
+  },
+  emojiInputLabel: {
+    id: 'fabric.editor.typeahead.emojiInputLabel',
+    defaultMessage: 'Begin typing to search or filter emoji options',
+    description: 'assisitve text for typeahed input field'
+  },
+  mentionPopupLabel: {
+    id: 'fabric.editor.typeahead.mentionPopupLabel',
+    defaultMessage: 'Users you can tag',
+    description: 'the aria label of a mention typeahead popup'
+  },
+  mentionInputLabel: {
+    id: 'fabric.editor.typeahead.mentionInputLabel',
+    defaultMessage: 'Begin typing to search for users to tag',
+    description: 'assisitve text for typeahed input field'
+  },
+  metionListItemLabel: {
+    id: 'fabric.editor.typeahead.metionListItemLabel',
+    defaultMessage: 'User {name} @{shortName}',
+    description: 'assistive text for user mention items username and nickname'
+  },
+  emojiListItemLabel: {
+    id: 'fabric.editor.typeahead.emojiListItemLabel',
+    defaultMessage: 'Emoji {name} Text Shortcut {shortcut}',
+    description: 'assistive text for emoji name and shortcut'
+  },
   inputQueryAssistiveLabel: {
     id: 'fabric.editor.inputQueryAssistiveTxt',
-    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.',
     description: 'Assistive text to the user when using typeahead shortcut'
   },
   searchResultsLabel: {

package/dist/esm/plugins/type-ahead/pm-plugins/decorations.js

@@ -12,7 +12,6 @@ import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { StatsModifier } from '../stats-modifier';
 import { getTypeAheadQuery } from '../utils';
 import { closeTypeAhead } from '../transforms/close-type-ahead';
-import { token } from '@atlaskit/tokens';
 export var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
       popupMountRef = _ref.popupMountRef,
@@ -42,7 +41,6 @@ export var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.setAttribute('id', decorationId);
       typeaheadComponent.setAttribute('role', 'search');
-      typeaheadComponent.setAttribute('aria-label', "On ".concat(triggerHandler.id));
       typeaheadComponent.dataset.typeAheadQuery = 'true';
       typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
       // we need that cuz the clickAreaHelper
@@ -52,7 +50,7 @@ export var factoryDecorations = function factoryDecorations(_ref) {
 
       typeaheadComponent.dataset.editorPopup = 'true';
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
-      typeaheadComponent.style.color = token('color.text.accent.blue', B400);
+      typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       var onUndoRedo = function onUndoRedo(inputType) {

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -13,7 +13,6 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
 import * as colors from '@atlaskit/theme/colors';
 
 var isNavigationKey = function isNavigationKey(event) {
@@ -43,6 +42,22 @@ var isSelectAllShortcut = function isSelectAllShortcut(event) {
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
 
+var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+  switch (triggerPrefix) {
+    case '@':
+      return typeAheadListMessages.mentionInputLabel;
+
+    case '/':
+      return typeAheadListMessages.quickInsertInputLabel;
+
+    case ':':
+      return typeAheadListMessages.emojiInputLabel;
+
+    default:
+      return typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+
 export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
   var triggerQueryPrefix = _ref.triggerQueryPrefix,
       cancel = _ref.cancel,
@@ -235,7 +250,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     background: 'transparent',
     border: 'none',
     '&&': {
-      color: "".concat(token('color.link', colors.B400))
+      color: "".concat("var(--ds-link, ".concat(colors.B400, ")"))
     }
   });
   useLayoutEffect(function () {
@@ -439,7 +454,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
+  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -13,7 +13,7 @@ import { List } from 'react-virtualized/dist/commonjs/List';
 import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-import { moveSelectedIndex } from '../utils';
+import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
 import { updateSelectedIndex } from '../commands/update-selected-index';
 import { AssistiveText } from './AssistiveText';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
@@ -40,7 +40,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       onItemClick = _ref2.onItemClick,
       intl = _ref2.intl,
       fitHeight = _ref2.fitHeight,
-      decorationElement = _ref2.decorationElement;
+      decorationElement = _ref2.decorationElement,
+      triggerHandler = _ref2.triggerHandler;
   var listRef = useRef();
   var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
@@ -223,6 +224,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         key = _ref4.key,
         style = _ref4.style,
         parent = _ref4.parent;
+    var currentItem = items[index];
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
@@ -236,21 +238,24 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       "data-testid": "list-item-height-observed-".concat(index)
     }, jsx(TypeAheadListItem, {
       key: items[index].title,
-      item: items[index],
+      item: currentItem,
       itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick
+      onItemClick: actions.onItemClick,
+      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
 
+  var popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+
   if (!Array.isArray(items)) {
     return null;
   }
 
   var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return jsx(MenuGroup, {
-    "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
+    "aria-label": popupAriaLabel,
     "aria-relevant": "additions removals"
   }, jsx("div", {
     id: menuGroupId,