@atlaskit/editor-plugin-type-ahead 6.5.5 → 6.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/TypeAheadListItem.js +8 -20
  3. package/dist/es2019/ui/TypeAheadListItem.js +8 -20
  4. package/dist/esm/ui/TypeAheadListItem.js +8 -20
  5. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 6.5.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`fff396252899c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fff396252899c) -
8
+ Used aria label instead of description
9
+ - Updated dependencies
10
+
11
+ ## 6.5.6
12
+
13
+ ### Patch Changes
14
+
15
+ - [`bcd51cc2f9737`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bcd51cc2f9737) -
16
+ EDITOR-2489: Clean up platform_editor_ai_rovo_rebrand
17
+ - Updated dependencies
18
+
3
19
  ## 6.5.5
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/TypeAheadListItem.js CHANGED
@@ -19,6 +19,7 @@ var _menu = require("@atlaskit/menu");
19
19
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
20
  var _colors = require("@atlaskit/theme/colors");
21
21
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
22
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
22
23
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
23
24
  /**
24
25
  * @jsxRuntime classic
@@ -43,23 +44,6 @@ var itemIcon = exports.itemIcon = (0, _react2.css)({
43
44
  height: "var(--ds-space-500, 40px)"
44
45
  }
45
46
  });
46
- var itemIconSize = (0, _react2.css)({
47
- width: "var(--ds-space-400, 32px)",
48
- height: "var(--ds-space-400, 32px)",
49
- // Icon svgs may contain nested svg, which are likely smaller than 32px
50
- // Hence only change the parent svg
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
52
- 'svg:first-of-type': {
53
- width: "var(--ds-space-400, 32px)",
54
- height: "var(--ds-space-400, 32px)"
55
- },
56
- // AI icons may contain div as container of the icon
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
58
- div: {
59
- width: "var(--ds-space-400, 32px)",
60
- height: "var(--ds-space-400, 32px)"
61
- }
62
- });
63
47
  var itemIconSizeUpdated = (0, _react2.css)({
64
48
  width: "var(--ds-space-400, 32px)",
65
49
  height: "var(--ds-space-400, 32px)",
@@ -214,12 +198,13 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
214
198
  var intl = (0, _reactIntlNext.useIntl)();
215
199
  var descriptionText = item.description ? "".concat(item.description, ".") : '';
216
200
  var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(_typeAhead.typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
201
+ var descriptionId = "typeahead-item-description-".concat(itemIndex);
217
202
  var icon = item.icon,
218
203
  title = item.title,
219
204
  customRenderItem = item.render;
220
205
  var elementIcon = (0, _react.useMemo)(function () {
221
206
  return (0, _react2.jsx)("div", {
222
- css: [itemIcon, moreElementsInQuickInsertViewEnabled ? (0, _platformFeatureFlags.fg)('platform_editor_ai_rovo_rebrand') ? itemIconSizeUpdated : itemIconSize : null]
207
+ css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
223
208
  }, icon ? icon() : (0, _react2.jsx)(FallbackIcon, {
224
209
  label: title
225
210
  }));
@@ -264,7 +249,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
264
249
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
265
250
  (0, _react2.jsx)("span", {
266
251
  css: listItemClasses
267
- }, (0, _react2.jsx)(_menu.ButtonItem, {
252
+ }, (descriptionText || shortcutText) && (0, _platformFeatureFlags.fg)('platform_editor_a11y_fix_aria_description') && (0, _react2.jsx)(_visuallyHidden.default, {
253
+ id: descriptionId
254
+ }, descriptionText, " ", shortcutText), (0, _react2.jsx)(_menu.ButtonItem, {
268
255
  onClick: insertSelectedItem,
269
256
  iconBefore: elementIcon,
270
257
  isSelected: isSelected,
@@ -274,7 +261,8 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
274
261
  // For now replace it with aria-describedby.
275
262
  // eslint-disable-next-line @atlassian/a11y/aria-props -- TODO: Avoid using "aria-description" as aria attribute. See https://go/a11y-aria-props for more details.
276
263
  ,
277
- "aria-description": "".concat(descriptionText, " ").concat(shortcutText),
264
+ "aria-description": (0, _platformFeatureFlags.fg)('platform_editor_a11y_fix_aria_description') ? undefined : "".concat(descriptionText, " ").concat(shortcutText),
265
+ "aria-describedby": (descriptionText || shortcutText) && (0, _platformFeatureFlags.fg)('platform_editor_a11y_fix_aria_description') ? descriptionId : undefined,
278
266
  "aria-setsize": itemsLength,
279
267
  "aria-posinset": (0, _expValEquals.expValEquals)('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
280
268
  role: "option",
package/dist/es2019/ui/TypeAheadListItem.js CHANGED
@@ -16,6 +16,7 @@ import { ButtonItem } from '@atlaskit/menu';
16
16
  import { fg } from '@atlaskit/platform-feature-flags';
17
17
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
18
18
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
19
+ import VisuallyHidden from '@atlaskit/visually-hidden';
19
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
20
21
  export const itemIcon = css({
21
22
  width: "var(--ds-space-500, 40px)",
@@ -33,23 +34,6 @@ export const itemIcon = css({
33
34
  height: "var(--ds-space-500, 40px)"
34
35
  }
35
36
  });
36
- const itemIconSize = css({
37
- width: "var(--ds-space-400, 32px)",
38
- height: "var(--ds-space-400, 32px)",
39
- // Icon svgs may contain nested svg, which are likely smaller than 32px
40
- // Hence only change the parent svg
41
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
42
- 'svg:first-of-type': {
43
- width: "var(--ds-space-400, 32px)",
44
- height: "var(--ds-space-400, 32px)"
45
- },
46
- // AI icons may contain div as container of the icon
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
48
- div: {
49
- width: "var(--ds-space-400, 32px)",
50
- height: "var(--ds-space-400, 32px)"
51
- }
52
- });
53
37
  const itemIconSizeUpdated = css({
54
38
  width: "var(--ds-space-400, 32px)",
55
39
  height: "var(--ds-space-400, 32px)",
@@ -226,6 +210,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
226
210
  const intl = useIntl();
227
211
  const descriptionText = item.description ? `${item.description}.` : '';
228
212
  const shortcutText = item.keyshortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${item.keyshortcut}.` : '';
213
+ const descriptionId = `typeahead-item-description-${itemIndex}`;
229
214
  const {
230
215
  icon,
231
216
  title,
@@ -233,7 +218,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
233
218
  } = item;
234
219
  const elementIcon = useMemo(() => {
235
220
  return jsx("div", {
236
- css: [itemIcon, moreElementsInQuickInsertViewEnabled ? fg('platform_editor_ai_rovo_rebrand') ? itemIconSizeUpdated : itemIconSize : null]
221
+ css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
237
222
  }, icon ? icon() : jsx(FallbackIcon, {
238
223
  label: title
239
224
  }));
@@ -278,7 +263,9 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
278
263
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
279
264
  jsx("span", {
280
265
  css: listItemClasses
281
- }, jsx(ButtonItem, {
266
+ }, (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') && jsx(VisuallyHidden, {
267
+ id: descriptionId
268
+ }, descriptionText, " ", shortcutText), jsx(ButtonItem, {
282
269
  onClick: insertSelectedItem,
283
270
  iconBefore: elementIcon,
284
271
  isSelected: isSelected,
@@ -288,7 +275,8 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
288
275
  // For now replace it with aria-describedby.
289
276
  // eslint-disable-next-line @atlassian/a11y/aria-props -- TODO: Avoid using "aria-description" as aria attribute. See https://go/a11y-aria-props for more details.
290
277
  ,
291
- "aria-description": `${descriptionText} ${shortcutText}`,
278
+ "aria-description": fg('platform_editor_a11y_fix_aria_description') ? undefined : `${descriptionText} ${shortcutText}`,
279
+ "aria-describedby": (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') ? descriptionId : undefined,
292
280
  "aria-setsize": itemsLength,
293
281
  "aria-posinset": expValEquals('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
294
282
  role: "option",
package/dist/esm/ui/TypeAheadListItem.js CHANGED
@@ -18,6 +18,7 @@ import { ButtonItem } from '@atlaskit/menu';
18
18
  import { fg } from '@atlaskit/platform-feature-flags';
19
19
  import { B400, N200, N30, N800 } from '@atlaskit/theme/colors';
20
20
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
21
+ import VisuallyHidden from '@atlaskit/visually-hidden';
21
22
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
22
23
  export var itemIcon = css({
23
24
  width: "var(--ds-space-500, 40px)",
@@ -35,23 +36,6 @@ export var itemIcon = css({
35
36
  height: "var(--ds-space-500, 40px)"
36
37
  }
37
38
  });
38
- var itemIconSize = css({
39
- width: "var(--ds-space-400, 32px)",
40
- height: "var(--ds-space-400, 32px)",
41
- // Icon svgs may contain nested svg, which are likely smaller than 32px
42
- // Hence only change the parent svg
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
44
- 'svg:first-of-type': {
45
- width: "var(--ds-space-400, 32px)",
46
- height: "var(--ds-space-400, 32px)"
47
- },
48
- // AI icons may contain div as container of the icon
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
- div: {
51
- width: "var(--ds-space-400, 32px)",
52
- height: "var(--ds-space-400, 32px)"
53
- }
54
- });
55
39
  var itemIconSizeUpdated = css({
56
40
  width: "var(--ds-space-400, 32px)",
57
41
  height: "var(--ds-space-400, 32px)",
@@ -206,12 +190,13 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
206
190
  var intl = useIntl();
207
191
  var descriptionText = item.description ? "".concat(item.description, ".") : '';
208
192
  var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
193
+ var descriptionId = "typeahead-item-description-".concat(itemIndex);
209
194
  var icon = item.icon,
210
195
  title = item.title,
211
196
  customRenderItem = item.render;
212
197
  var elementIcon = useMemo(function () {
213
198
  return jsx("div", {
214
- css: [itemIcon, moreElementsInQuickInsertViewEnabled ? fg('platform_editor_ai_rovo_rebrand') ? itemIconSizeUpdated : itemIconSize : null]
199
+ css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
215
200
  }, icon ? icon() : jsx(FallbackIcon, {
216
201
  label: title
217
202
  }));
@@ -256,7 +241,9 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
256
241
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
257
242
  jsx("span", {
258
243
  css: listItemClasses
259
- }, jsx(ButtonItem, {
244
+ }, (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') && jsx(VisuallyHidden, {
245
+ id: descriptionId
246
+ }, descriptionText, " ", shortcutText), jsx(ButtonItem, {
260
247
  onClick: insertSelectedItem,
261
248
  iconBefore: elementIcon,
262
249
  isSelected: isSelected,
@@ -266,7 +253,8 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
266
253
  // For now replace it with aria-describedby.
267
254
  // eslint-disable-next-line @atlassian/a11y/aria-props -- TODO: Avoid using "aria-description" as aria attribute. See https://go/a11y-aria-props for more details.
268
255
  ,
269
- "aria-description": "".concat(descriptionText, " ").concat(shortcutText),
256
+ "aria-description": fg('platform_editor_a11y_fix_aria_description') ? undefined : "".concat(descriptionText, " ").concat(shortcutText),
257
+ "aria-describedby": (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') ? descriptionId : undefined,
270
258
  "aria-setsize": itemsLength,
271
259
  "aria-posinset": expValEquals('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
272
260
  role: "option",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "6.5.5",
3
+ "version": "6.5.7",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,9 @@
46
46
  "@atlaskit/prosemirror-history": "^0.2.0",
47
47
  "@atlaskit/prosemirror-input-rules": "^3.5.0",
48
48
  "@atlaskit/theme": "^21.0.0",
49
- "@atlaskit/tmp-editor-statsig": "^13.18.0",
49
+ "@atlaskit/tmp-editor-statsig": "^13.20.0",
50
50
  "@atlaskit/tokens": "^7.0.0",
51
+ "@atlaskit/visually-hidden": "^3.0.0",
51
52
  "@babel/runtime": "^7.0.0",
52
53
  "@emotion/react": "^11.7.1",
53
54
  "lodash": "^4.17.21",
@@ -107,9 +108,6 @@
107
108
  "platform_editor_refactor_view_more": {
108
109
  "type": "boolean"
109
110
  },
110
- "platform_editor_ai_rovo_rebrand": {
111
- "type": "boolean"
112
- },
113
111
  "platform_editor_a11y_remove_input_query_on_click": {
114
112
  "type": "boolean"
115
113
  },
@@ -118,6 +116,9 @@
118
116
  },
119
117
  "platform_editor_typeahead_description_text_colour": {
120
118
  "type": "boolean"
119
+ },
120
+ "platform_editor_a11y_fix_aria_description": {
121
+ "type": "boolean"
121
122
  }
122
123
  }
123
124
  }