@atlaskit/editor-plugin-type-ahead 7.0.23 → 7.0.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 7.0.24
+
+### Patch Changes
+
+- [`3a649003f9b55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a649003f9b55) -
+  [ux] [A11Y-22843] handle Tab and Shift+Tab keypress inside typeahead list
+- Updated dependencies
+
 ## 7.0.23
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -80,7 +80,7 @@ var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
   }
   return false;
 };
-var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
   switch (triggerPrefix) {
     case '@':
       return _typeAhead.typeAheadListMessages.mentionInputLabel;
@@ -127,7 +127,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw;
   }, []);
-  var onKeyUp = (0, _react.useCallback)(function (event) {
+  var onKeyUp = (0, _react.useCallback)(function (_event) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
@@ -211,21 +211,26 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         }
         break;
       case 'Tab':
-        if (selectedIndex === -1) {
-          /**
-           * TODO DTR-1401: (also see ED-17200) There are two options
-           * here, either
-           * - set the index directly to 1 in WrapperTypeAhead.tsx's
-           *   `insertSelectedItem` at the cost of breaking some of the a11y
-           *   focus changes,
-           * - or do this jank at the cost of some small analytics noise.
-           *
-           */
-          selectPreviousItem();
-          selectNextItem();
+        if ((0, _expValEquals.expValEquals)('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+          event.shiftKey ? selectPreviousItem() : selectNextItem();
+          break;
+        } else {
+          if (selectedIndex === -1) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+            selectNextItem();
+          }
+          // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
+          onItemSelect(_typeAhead.SelectItemMode.TAB);
         }
-        // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
-        onItemSelect(_typeAhead.SelectItemMode.TAB);
         break;
       case 'ArrowDown':
         selectNextItem();
@@ -252,7 +257,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var element = ref.current;
     var _ref3 = (0, _utils2.getPluginState)(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
-    var onFocusIn = function onFocusIn(event) {
+    var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
     var keyDown = function keyDown(event) {

package/dist/cjs/ui/MoreOptions.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -47,7 +48,7 @@ var MoreOptions = exports.MoreOptions = function MoreOptions(_ref) {
         onClick();
         // Prevent keydown listener in TypeaheadList from handling Enter pressed
         e.stopPropagation();
-      } else if (e.key === 'Tab') {
+      } else if (e.key === 'Tab' && !(0, _expValEquals.expValEquals)('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
         // TypeaheadList will try to insert selected item on Tab press
         // hence stop propagation to prevent that and treat this as noop
         e.stopPropagation();

package/dist/cjs/ui/TypeAheadList.js

@@ -18,6 +18,7 @@ var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
@@ -100,6 +101,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     };
   }, [onItemClick]);
   var isNavigationKey = function isNavigationKey(event) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+      return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter', 'Shift'].includes(event.key);
+    }
     return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
   };
   var focusTargetElement = (0, _react.useCallback)(function () {
@@ -232,11 +236,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
             event.preventDefault();
             event.stopPropagation();
             break;
-
-          // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
-            //Tab key quick inserts the selected item.
-            onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
+            if ((0, _expValEquals.expValEquals)('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+              event.shiftKey ? selectPreviousItem() : selectNextItem();
+              break;
+            } else {
+              //Tab key quick inserts the selected item.
+              onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
+            }
             event.preventDefault();
             break;
           case 'Enter':

package/dist/es2019/ui/InputQuery.js

@@ -69,7 +69,7 @@ const isUndoRedoShortcut = event => {
   }
   return false;
 };
-const getAriaLabel = (triggerPrefix, intl) => {
+const getAriaLabel = (triggerPrefix, _intl) => {
   switch (triggerPrefix) {
     case '@':
       return typeAheadListMessages.mentionInputLabel;
@@ -113,7 +113,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw;
   }, []);
-  const onKeyUp = useCallback(event => {
+  const onKeyUp = useCallback(_event => {
     const text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
@@ -195,21 +195,26 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
         break;
       case 'Tab':
-        if (selectedIndex === -1) {
-          /**
-           * TODO DTR-1401: (also see ED-17200) There are two options
-           * here, either
-           * - set the index directly to 1 in WrapperTypeAhead.tsx's
-           *   `insertSelectedItem` at the cost of breaking some of the a11y
-           *   focus changes,
-           * - or do this jank at the cost of some small analytics noise.
-           *
-           */
-          selectPreviousItem();
-          selectNextItem();
+        if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+          event.shiftKey ? selectPreviousItem() : selectNextItem();
+          break;
+        } else {
+          if (selectedIndex === -1) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+            selectNextItem();
+          }
+          // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
+          onItemSelect(SelectItemMode.TAB);
         }
-        // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
-        onItemSelect(SelectItemMode.TAB);
         break;
       case 'ArrowDown':
         selectNextItem();
@@ -239,7 +244,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const {
       removePrefixTriggerOnCancel
     } = getPluginState(editorView.state) || {};
-    const onFocusIn = event => {
+    const onFocusIn = _event => {
       onQueryFocus();
     };
     const keyDown = event => {

package/dist/es2019/ui/MoreOptions.js

@@ -8,6 +8,7 @@ import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ButtonItem, Section } from '@atlaskit/menu';
 import { N30 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const buttonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > button:hover': {
@@ -43,7 +44,7 @@ export const MoreOptions = ({
         onClick();
         // Prevent keydown listener in TypeaheadList from handling Enter pressed
         e.stopPropagation();
-      } else if (e.key === 'Tab') {
+      } else if (e.key === 'Tab' && !expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
         // TypeaheadList will try to insert selected item on Tab press
         // hence stop propagation to prevent that and treat this as noop
         e.stopPropagation();

package/dist/es2019/ui/TypeAheadList.js

@@ -16,6 +16,7 @@ import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/t
 import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { Text, Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
@@ -84,6 +85,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     onItemClick
   }), [onItemClick]);
   const isNavigationKey = event => {
+    if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+      return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter', 'Shift'].includes(event.key);
+    }
     return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
   };
   const focusTargetElement = useCallback(() => {
@@ -215,11 +219,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
             event.preventDefault();
             event.stopPropagation();
             break;
-
-          // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
-            //Tab key quick inserts the selected item.
-            onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
+            if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+              event.shiftKey ? selectPreviousItem() : selectNextItem();
+              break;
+            } else {
+              //Tab key quick inserts the selected item.
+              onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
+            }
             event.preventDefault();
             break;
           case 'Enter':

package/dist/esm/ui/InputQuery.js

@@ -70,7 +70,7 @@ var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
   }
   return false;
 };
-var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
   switch (triggerPrefix) {
     case '@':
       return typeAheadListMessages.mentionInputLabel;
@@ -117,7 +117,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw;
   }, []);
-  var onKeyUp = useCallback(function (event) {
+  var onKeyUp = useCallback(function (_event) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
@@ -201,21 +201,26 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         }
         break;
       case 'Tab':
-        if (selectedIndex === -1) {
-          /**
-           * TODO DTR-1401: (also see ED-17200) There are two options
-           * here, either
-           * - set the index directly to 1 in WrapperTypeAhead.tsx's
-           *   `insertSelectedItem` at the cost of breaking some of the a11y
-           *   focus changes,
-           * - or do this jank at the cost of some small analytics noise.
-           *
-           */
-          selectPreviousItem();
-          selectNextItem();
+        if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+          event.shiftKey ? selectPreviousItem() : selectNextItem();
+          break;
+        } else {
+          if (selectedIndex === -1) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             */
+            selectPreviousItem();
+            selectNextItem();
+          }
+          // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
+          onItemSelect(SelectItemMode.TAB);
         }
-        // TODO: DTR-1401 - why is this calling select item when hitting tab? fix this in DTR-1401
-        onItemSelect(SelectItemMode.TAB);
         break;
       case 'ArrowDown':
         selectNextItem();
@@ -242,7 +247,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var element = ref.current;
     var _ref3 = getPluginState(editorView.state) || {},
       removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
-    var onFocusIn = function onFocusIn(event) {
+    var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
     var keyDown = function keyDown(event) {

package/dist/esm/ui/MoreOptions.js

@@ -8,6 +8,7 @@ import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ButtonItem, Section } from '@atlaskit/menu';
 import { N30 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var buttonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > button:hover': {
@@ -40,7 +41,7 @@ export var MoreOptions = function MoreOptions(_ref) {
         onClick();
         // Prevent keydown listener in TypeaheadList from handling Enter pressed
         e.stopPropagation();
-      } else if (e.key === 'Tab') {
+      } else if (e.key === 'Tab' && !expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
         // TypeaheadList will try to insert selected item on Tab press
         // hence stop propagation to prevent that and treat this as noop
         e.stopPropagation();

package/dist/esm/ui/TypeAheadList.js

@@ -17,6 +17,7 @@ import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/t
 import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { Text, Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
@@ -91,6 +92,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     };
   }, [onItemClick]);
   var isNavigationKey = function isNavigationKey(event) {
+    if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+      return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter', 'Shift'].includes(event.key);
+    }
     return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
   };
   var focusTargetElement = useCallback(function () {
@@ -223,11 +227,14 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
             event.preventDefault();
             event.stopPropagation();
             break;
-
-          // TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
           case 'Tab':
-            //Tab key quick inserts the selected item.
-            onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
+            if (expValEquals('platform_editor_a11y_typeahead_tab_keypress', 'isEnabled', true)) {
+              event.shiftKey ? selectPreviousItem() : selectNextItem();
+              break;
+            } else {
+              //Tab key quick inserts the selected item.
+              onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
+            }
             event.preventDefault();
             break;
           case 'Enter':

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "7.0.23",
+	"version": "7.0.24",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.6.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^31.2.0",
+		"@atlaskit/tmp-editor-statsig": "^31.3.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",