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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- Updated dependencies
+
 ## 6.1.0
 
 ### Minor 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/cjs/ui/TypeAheadPopup.js

@@ -337,7 +337,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     }
   }, (0, _react2.jsx)("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/ui/modern/TypeAheadPopup.js

@@ -311,7 +311,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     preventOverflow: true
   }, (0, _react2.jsx)("div", {
     css: [typeAheadContent]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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/es2019/ui/TypeAheadPopup.js

@@ -333,7 +333,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     }
   }, jsx("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/ui/modern/TypeAheadPopup.js

@@ -305,7 +305,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     preventOverflow: true
   }, jsx("div", {
     css: [typeAheadContent]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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/dist/esm/ui/TypeAheadPopup.js

@@ -327,7 +327,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     }
   }, jsx("div", {
     css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/ui/modern/TypeAheadPopup.js

@@ -302,7 +302,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     preventOverflow: true
   }, jsx("div", {
     css: [typeAheadContent]
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "6.1.0",
+	"version": "6.2.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.2.0",
 		"@atlaskit/editor-element-browser": "^4.0.0",
-		"@atlaskit/editor-plugin-analytics": "^6.0.0",
+		"@atlaskit/editor-plugin-analytics": "^6.1.0",
 		"@atlaskit/editor-plugin-connectivity": "^6.0.0",
 		"@atlaskit/editor-plugin-context-panel": "^8.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.0.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": "^12.32.0",
+		"@atlaskit/tmp-editor-statsig": "^13.2.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -56,7 +56,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.2.0",
+		"@atlaskit/editor-common": "^110.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -108,6 +108,9 @@
 		},
 		"platform_editor_ai_rovo_rebrand": {
 			"type": "boolean"
+		},
+		"platform_editor_a11y_remove_input_query_on_click": {
+			"type": "boolean"
 		}
 	}
 }