@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -15,11 +16,13 @@ class Task extends ReactNodeView {
       const {
         tr
       } = this.view.state;
-      const nodePos = this.getPos();
-      tr.setNodeMarkup(nodePos, undefined, {
+      const 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.step(new SetAttrsStep(nodePos, {
         state: isChecked ? 'DONE' : 'TODO',
         localId: taskId
-      });
+      }));
       tr.setMeta('scrollIntoView', false);
       this.view.dispatch(tr);
     });

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

@@ -1,7 +1,6 @@
 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 const taskDecisionStyles = css`
   [data-decision-wrapper] {
     cursor: pointer;
@@ -17,8 +16,8 @@ export const taskDecisionStyles = css`
     .${TaskDecisionSharedCssClassName.DECISION_CONTAINER}.${akEditorSelectedNodeClassName}
       > div {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
       &::after {
         content: none; /* reset the Blanket selection style */
       }

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

@@ -45,6 +45,7 @@ export class ToolbarDecision extends PureComponent {
       disabled: disabled || isDisabled,
       spacing: isReducedSpacing ? 'none' : 'default',
       title: `${label} <>`,
+      "aria-keyshortcuts": "Shift+, Shift+. space",
       iconBefore: /*#__PURE__*/React.createElement(DecisionIcon, {
         label: label
       })

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

@@ -15,6 +15,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';
 const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 const EXPERIMENT_GROUP_CONTROL = 'control';
 export const messages = defineMessages({
@@ -51,12 +52,11 @@ export class ToolbarTextColor extends React.Component {
         const {
           pluginState: {
             palette,
-            paletteExpanded,
             defaultColor
           }
         } = this.props; // we store color names in analytics
 
-        const swatch = (paletteExpanded || palette).find(sw => sw.value === color);
+        const swatch = palette.find(sw => sw.value === color);
         const isNewColor = color !== defaultColor && !originalTextColors.some(col => col.value === color);
         this.dispatchAnalyticsEvent(this.buildAnalyticsSelectColor({
           color: (swatch ? swatch.label : color).toLowerCase(),
@@ -142,16 +142,16 @@ export class ToolbarTextColor extends React.Component {
       popupsScrollableElement,
       isReducedSpacing,
       pluginState,
-      pluginState: {
-        paletteExpanded
-      },
       intl: {
         formatMessage
       },
       disabled
     } = this.props;
     const labelTextColor = formatMessage(messages.textColor);
-    const palette = paletteExpanded || pluginState.palette;
+    const palette = pluginState.palette;
+    const {
+      useSomewhatSemanticTextColorNames
+    } = getFeatureFlags(this.props.editorView.state);
     let fitWidth;
 
     if (document.body.clientWidth <= 740) {
@@ -205,7 +205,8 @@ export class ToolbarTextColor extends React.Component {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color,
-      textPalette: true
+      textPalette: true,
+      useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
     }))), jsx("span", {
       css: separatorStyles
     }));

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

@@ -11,6 +11,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';
 
 const withToolbarInputMethod = func => func({
   inputMethod: INPUT_METHOD.TOOLBAR
@@ -91,7 +92,9 @@ const getIcon = ({
       name: iconType
     },
     isActive,
-    isDisabled
+    isDisabled,
+    'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
   };
 };
 

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

@@ -16,16 +16,22 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   }, [editorView.state, editorView.dispatch]);
   return jsx("span", {
     css: buttonGroupStyle
-  }, items.map(item => jsx(ToolbarButton, {
-    key: item.key,
-    buttonId: item.buttonId,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: onClick(item.command),
-    selected: item.isActive,
-    disabled: item.isDisabled,
-    title: item.tooltipElement,
-    iconBefore: item.iconElement,
-    "aria-pressed": item.isActive,
-    "aria-label": String(item.content)
-  })));
+  }, items.map(item => {
+    var _item$ariaLabel;
+
+    return jsx(ToolbarButton, {
+      key: item.key,
+      testId: `editor-toolbar__${String(item.content)}`,
+      buttonId: item.buttonId,
+      spacing: isReducedSpacing ? 'none' : 'default',
+      onClick: onClick(item.command),
+      selected: item.isActive,
+      disabled: item.isDisabled,
+      title: item.tooltipElement,
+      iconBefore: item.iconElement,
+      "aria-pressed": item.isActive,
+      "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
+      "aria-keyshortcuts": item['aria-keyshortcuts']
+    });
+  }));
 });

package/dist/es2019/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) {
   const {
     formatMessage
@@ -28,6 +29,8 @@ export function Toolbar(props) {
   } = props;
   const labelUnorderedList = formatMessage(messages.unorderedList);
   const labelOrderedList = formatMessage(messages.orderedList);
+  const indentMessage = formatMessage(indentationMessages.indent);
+  const outdentMessage = formatMessage(indentationMessages.outdent);
 
   const handleOnItemActivated = buttonName => event => onItemActivated({
     editorView: props.editorView,
@@ -38,11 +41,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,
@@ -53,11 +58,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,
@@ -75,9 +82,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, {
@@ -89,9 +97,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/es2019/plugins/type-ahead/index.js

@@ -6,7 +6,7 @@
  *
  *
  */
-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';
@@ -54,7 +54,7 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
       });
     });
   }, [onItemInsert, query]);
-  const cancel = useCallback(({
+  const cancel = React.useCallback(({
     setSelectionAt,
     addPrefixTrigger,
     forceFocusOnEditor

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

@@ -1,13 +1,53 @@
 import { defineMessages } from 'react-intl-next';
 export const 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/es2019/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 const factoryDecorations = ({
   intl,
   popupMountRef,
@@ -47,7 +46,6 @@ export const factoryDecorations = ({
 
       typeaheadComponent.setAttribute('id', decorationId);
       typeaheadComponent.setAttribute('role', 'search');
-      typeaheadComponent.setAttribute('aria-label', `On ${triggerHandler.id}`);
       typeaheadComponent.dataset.typeAheadQuery = 'true';
       typeaheadComponent.dataset.trigger = triggerHandler.trigger; // This line below seems weird,
       // we need that cuz the clickAreaHelper
@@ -57,7 +55,7 @@ export const factoryDecorations = ({
 
       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, ${B400})`;
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       const onUndoRedo = inputType => {

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

@@ -10,7 +10,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';
 
 const isNavigationKey = event => {
@@ -40,6 +39,22 @@ const isSelectAllShortcut = event => {
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
 
+const getAriaLabel = (triggerPrefix, intl) => {
+  switch (triggerPrefix) {
+    case '@':
+      return typeAheadListMessages.mentionInputLabel;
+
+    case '/':
+      return typeAheadListMessages.quickInsertInputLabel;
+
+    case ':':
+      return typeAheadListMessages.emojiInputLabel;
+
+    default:
+      return typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+
 export const InputQuery = /*#__PURE__*/React.memo(({
   triggerQueryPrefix,
   cancel,
@@ -214,7 +229,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     background: 'transparent',
     border: 'none',
     '&&': {
-      color: `${token('color.link', colors.B400)}`
+      color: `${`var(--ds-link, ${colors.B400})`}`
     }
   });
   useLayoutEffect(() => {
@@ -426,7 +441,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     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/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -8,7 +8,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';
@@ -34,7 +34,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   onItemClick,
   intl,
   fitHeight,
-  decorationElement
+  decorationElement,
+  triggerHandler
 }) => {
   var _decorationElement$qu2;
 
@@ -208,6 +209,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     style,
     parent
   }) => {
+    const currentItem = items[index];
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
@@ -221,21 +223,24 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       "data-testid": `list-item-height-observed-${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
     }))));
   };
 
+  const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
+
   if (!Array.isArray(items)) {
     return null;
   }
 
   const 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,

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -9,7 +9,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { token } from '@atlaskit/tokens';
 import { useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
 export const ICON_HEIGHT = 40;
@@ -19,7 +18,7 @@ export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
   overflow: hidden;
-  border: 1px solid ${token('color.border', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
+  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
 
@@ -42,15 +41,15 @@ const itemBody = css`
 const itemText = theme => css`
   white-space: initial;
   color: ${themed({
-  light: token('color.text', N800),
-  dark: token('color.text', DN600)
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${DN600})`
 })(theme)};
   .item-title {
     line-height: 1.4;
   }
   .item-description {
     font-size: ${relativeFontSizeToBase16(12)};
-    color: ${token('color.text.subtlest', N200)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     margin-top: 3px;
   }
 `;
@@ -61,10 +60,10 @@ const itemAfter = css`
 const customRenderItemDivStyle = css`
   overflow: hidden;
   &:hover {
-    background-color: ${token('color.background.selected', N30)};
+    background-color: ${`var(--ds-background-selected, ${N30})`};
   }
   &:focus {
-    box-shadow: inset 0px 0px 0px 2px ${token('color.border.focused', B100)};
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
     outline: none;
   }
 `;
@@ -76,7 +75,7 @@ const customRenderItemDivStyle = css`
 
 const selectionFrame = {
   '& > button:focus': {
-    boxShadow: `inset 0px 0px 0px 2px ${token('color.border.focused', B100)}`,
+    boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
     outline: 'none',
     '&:active': {
       boxShadow: 'none'
@@ -84,7 +83,7 @@ const selectionFrame = {
   }
 };
 const selectedStyle = css`
-  background-color: ${token('color.background.selected', N30)};
+  background-color: ${`var(--ds-background-selected, ${N30})`};
 `;
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label
@@ -112,7 +111,8 @@ export const TypeAheadListItem = ({
   itemsLength,
   selectedIndex,
   onItemClick,
-  itemIndex
+  itemIndex,
+  ariaLabel
 }) => {
   /**
    * To select and highlight the first Item when no item is selected
@@ -160,21 +160,23 @@ export const TypeAheadListItem = ({
     const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return jsx("div", {
       "aria-selected": isSelected,
-      "aria-label": title,
       role: "option",
+      "aria-label": ariaLabel,
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
       className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}` //CSS classes added for test cases purpose
       ,
       ref: customItemRef
+    }, jsx("div", {
+      "aria-hidden": true
     }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
       ,
       onHover: noop
-    }));
-  }, [customRenderItem, insertSelectedItem, isSelected, title, customItemRef, itemsLength]);
+    })));
+  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
 
   if (customItem) {
     return customItem;
@@ -187,7 +189,7 @@ export const TypeAheadListItem = ({
     iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
-    "aria-label": item.title,
+    "aria-label": title,
     "aria-setsize": itemsLength,
     role: "option",
     ref: buttonItemRef

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -10,12 +10,11 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 import { ITEM_PADDING } from './TypeAheadListItem';
-import { token } from '@atlaskit/tokens';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 const typeAheadContent = css`
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
   padding: ${gridSize() / 2}px 0;
   width: 320px;
   max-height: 380px; /* ~5.5 visibile items */
@@ -210,7 +209,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     onItemClick: onItemInsert,
     fitHeight: fitHeight,
     editorView: editorView,
-    decorationElement: anchorElement
+    decorationElement: anchorElement,
+    triggerHandler: triggerHandler
   })));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/plugins/type-ahead/utils.js

@@ -4,6 +4,7 @@ import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
+import { typeAheadListMessages } from './messages';
 export const findTypeAheadDecorations = state => {
   const {
     selection
@@ -107,4 +108,41 @@ export const moveSelectedIndex = ({
   }
 
   updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+};
+export const getTypeAheadListAriaLabels = (trigger, intl, item) => {
+  var _item$mention, _item$mention2, _item$emoji, _item$emoji2, _item$emoji3;
+
+  switch (trigger) {
+    case '@':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.mentionPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.metionListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.name) || '',
+          shortName: (item === null || item === void 0 ? void 0 : (_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.mentionName) || ''
+        })
+      };
+
+    case '/':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.quickInsertPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : item.title) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji = item.emoji) === null || _item$emoji === void 0 ? void 0 : _item$emoji.shortName) || ''
+        })
+      };
+
+    case ':':
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.emojiPopupLabel),
+        listItemAriaLabel: intl.formatMessage(typeAheadListMessages.emojiListItemLabel, {
+          name: (item === null || item === void 0 ? void 0 : (_item$emoji2 = item.emoji) === null || _item$emoji2 === void 0 ? void 0 : _item$emoji2.name) || '',
+          shortcut: (item === null || item === void 0 ? void 0 : (_item$emoji3 = item.emoji) === null || _item$emoji3 === void 0 ? void 0 : _item$emoji3.shortName) || ''
+        })
+      };
+
+    default:
+      return {
+        popupAriaLabel: intl.formatMessage(typeAheadListMessages.typeAheadPopupLabel)
+      };
+  }
 };