@atlaskit/editor-plugin-type-ahead 6.5.0 → 6.5.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 6.5.2
+
+### Patch Changes
+
+- [`8159502f4e3ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8159502f4e3ed) -
+  [ux] [ENGHEALTH-32547] Changes the colour of the typeahead item description text to fix a colour
+  contrast a11y violation
+- Updated dependencies
+
+## 6.5.1
+
+### Patch Changes
+
+- [`ae2119490a207`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae2119490a207) -
+  [ENGHEALTH-32516] Adds an aria-label to the React virtualized grid used in the type ahead menu
+- Updated dependencies
+
 ## 6.5.0
 
 ### Minor Changes

package/dist/cjs/ui/TypeAheadList.js

@@ -17,6 +17,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
@@ -355,11 +356,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     width: LIST_WIDTH,
     onScroll: onScroll,
     height: height,
-    overscanRowCount: 3
+    overscanRowCount: 3,
+    "aria-label": (0, _platformFeatureFlags.fg)('platform_editor_typeahead_aria_label') ? (0, _utils.getTypeAheadListAriaLabels)(undefined, intl).popupAriaLabel :
     // We need to make this walkaround to make TS happy, cannot pass undefined otherwise ReactVirualized will make it equal to "grid" which we want to avoid
     // https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L260
-    ,
-    "aria-label": null,
+    null,
     containerRole: "presentation",
     role: "listbox"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/cjs/ui/TypeAheadListItem.js

@@ -90,6 +90,11 @@ var itemDescription = (0, _react2.css)({
   color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N200, ")"), ";"),
   marginTop: "var(--ds-space-050, 4px)".concat(";")
 });
+// when cleaning up FG `platform_editor_typeahead_description_text_colour`
+// replace above color with this and delete itemDescriptionColor
+var itemDescriptionColor = (0, _react2.css)({
+  color: "var(--ds-text-subtle, #44546F)".concat(";")
+});
 var itemDescriptionOverride = (0, _react2.css)({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: 0
@@ -291,7 +296,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
     }, item.keyshortcut && (0, _react2.jsx)("div", {
       css: _shortcut.shortcutStyle
     }, item.keyshortcut))), (0, _react2.jsx)("div", {
-      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
+      css: [itemDescription, (0, _platformFeatureFlags.fg)('platform_editor_typeahead_description_text_colour') && itemDescriptionColor, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
     }, item.description)))))
   );
 });

package/dist/es2019/ui/TypeAheadList.js

@@ -15,6 +15,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives/compiled';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
@@ -335,11 +336,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     width: LIST_WIDTH,
     onScroll: onScroll,
     height: height,
-    overscanRowCount: 3
+    overscanRowCount: 3,
+    "aria-label": fg('platform_editor_typeahead_aria_label') ? getTypeAheadListAriaLabels(undefined, intl).popupAriaLabel :
     // We need to make this walkaround to make TS happy, cannot pass undefined otherwise ReactVirualized will make it equal to "grid" which we want to avoid
     // https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L260
-    ,
-    "aria-label": null,
+    null,
     containerRole: "presentation",
     role: "listbox"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/ui/TypeAheadListItem.js

@@ -85,6 +85,11 @@ const itemDescription = css({
   color: `${`var(--ds-text-subtlest, ${N200})`};`,
   marginTop: `${"var(--ds-space-050, 4px)"};`
 });
+// when cleaning up FG `platform_editor_typeahead_description_text_colour`
+// replace above color with this and delete itemDescriptionColor
+const itemDescriptionColor = css({
+  color: `${"var(--ds-text-subtle, #44546F)"};`
+});
 const itemDescriptionOverride = css({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: 0
@@ -305,7 +310,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
     }, item.keyshortcut && jsx("div", {
       css: shortcutStyle
     }, item.keyshortcut))), jsx("div", {
-      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
+      css: [itemDescription, fg('platform_editor_typeahead_description_text_colour') && itemDescriptionColor, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
     }, item.description)))))
   );
 });

package/dist/esm/ui/TypeAheadList.js

@@ -16,6 +16,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives/compiled';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
@@ -346,11 +347,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     width: LIST_WIDTH,
     onScroll: onScroll,
     height: height,
-    overscanRowCount: 3
+    overscanRowCount: 3,
+    "aria-label": fg('platform_editor_typeahead_aria_label') ? getTypeAheadListAriaLabels(undefined, intl).popupAriaLabel :
     // We need to make this walkaround to make TS happy, cannot pass undefined otherwise ReactVirualized will make it equal to "grid" which we want to avoid
     // https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L260
-    ,
-    "aria-label": null,
+    null,
     containerRole: "presentation",
     role: "listbox"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/esm/ui/TypeAheadListItem.js

@@ -82,6 +82,11 @@ var itemDescription = css({
   color: "".concat("var(--ds-text-subtlest, ".concat(N200, ")"), ";"),
   marginTop: "var(--ds-space-050, 4px)".concat(";")
 });
+// when cleaning up FG `platform_editor_typeahead_description_text_colour`
+// replace above color with this and delete itemDescriptionColor
+var itemDescriptionColor = css({
+  color: "var(--ds-text-subtle, #44546F)".concat(";")
+});
 var itemDescriptionOverride = css({
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: 0
@@ -283,7 +288,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
     }, item.keyshortcut && jsx("div", {
       css: shortcutStyle
     }, item.keyshortcut))), jsx("div", {
-      css: [itemDescription, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
+      css: [itemDescription, fg('platform_editor_typeahead_description_text_colour') && itemDescriptionColor, moreElementsInQuickInsertViewEnabled && itemDescriptionOverride, itemIsDisabled && disabledStyle]
     }, item.description)))))
   );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "6.5.0",
+	"version": "6.5.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/editor-plugin-context-panel": "^8.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.7.0",
+		"@atlaskit/editor-shared-styles": "^3.8.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/insm": "^0.1.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.5.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.13.0",
+		"@atlaskit/tmp-editor-statsig": "^13.18.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -57,7 +57,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.14.0",
+		"@atlaskit/editor-common": "^110.17.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -112,6 +112,12 @@
 		},
 		"platform_editor_a11y_remove_input_query_on_click": {
 			"type": "boolean"
+		},
+		"platform_editor_typeahead_aria_label": {
+			"type": "boolean"
+		},
+		"platform_editor_typeahead_description_text_colour": {
+			"type": "boolean"
 		}
 	}
 }