@atlaskit/editor-plugin-type-ahead 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 6.2.0
+
+### Minor Changes
+
+- [`97586ad447624`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97586ad447624) -
+  [ux] Add a feature gate to remove the onClick handler from type-ahead InpuQuery to fix the a11y
+  violation
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -245,6 +245,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   var onClick = (0, _react.useCallback)(function (event) {
     var _inputRef$current;
     event.stopPropagation();
@@ -476,18 +478,13 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
   }, [showPlaceholder, selection]);
   var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = (0, _reactIntlNext.useIntl)();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: (0, _platformFeatureFlags.fg)('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/dist/es2019/ui/InputQuery.js

@@ -229,6 +229,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   const onClick = useCallback(event => {
     var _inputRef$current;
     event.stopPropagation();
@@ -469,18 +471,13 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   }, [showPlaceholder, selection]);
   const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   const intl = useIntl();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: fg('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: fg('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/dist/esm/ui/InputQuery.js

@@ -235,6 +235,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       return false;
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+
+  // Remove when cleaning up platform_editor_a11y_remove_input_query_on_click
   var onClick = useCallback(function (event) {
     var _inputRef$current;
     event.stopPropagation();
@@ -466,18 +468,13 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
   }, [showPlaceholder, selection]);
   var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   var intl = useIntl();
-
-  /**
-   When we migrated to emotion from styled component, we started getting this error.
-   jsx-a11y/interactive-supports-focus
-   Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-  */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
     css: [querySpanStyles, isSearchPlaceholderEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
-    onClick: onClick,
+    onClick: fg('platform_editor_a11y_remove_input_query_on_click') ? undefined : onClick,
+    tabIndex: fg('platform_editor_a11y_remove_input_query_on_click') ? -1 : undefined,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "6.1.1",
+	"version": "6.2.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/prosemirror-input-rules": "^3.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.2.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -108,6 +108,9 @@
 		},
 		"platform_editor_ai_rovo_rebrand": {
 			"type": "boolean"
+		},
+		"platform_editor_a11y_remove_input_query_on_click": {
+			"type": "boolean"
 		}
 	}
 }