@atlaskit/editor-plugin-type-ahead 6.5.6 → 6.5.8

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 6.5.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`2ab1e9998d893`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ab1e9998d893) -
8
+ Removed tab-index on list container
9
+ - Updated dependencies
10
+
11
+ ## 6.5.7
12
+
13
+ ### Patch Changes
14
+
15
+ - [`fff396252899c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fff396252899c) -
16
+ Used aria label instead of description
17
+ - Updated dependencies
18
+
3
19
  ## 6.5.6
4
20
 
5
21
  ### Patch Changes
@@ -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
@@ -197,6 +198,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
197
198
  var intl = (0, _reactIntlNext.useIntl)();
198
199
  var descriptionText = item.description ? "".concat(item.description, ".") : '';
199
200
  var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(_typeAhead.typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
201
+ var descriptionId = "typeahead-item-description-".concat(itemIndex);
200
202
  var icon = item.icon,
201
203
  title = item.title,
202
204
  customRenderItem = item.render;
@@ -247,7 +249,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
247
249
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
248
250
  (0, _react2.jsx)("span", {
249
251
  css: listItemClasses
250
- }, (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, {
251
255
  onClick: insertSelectedItem,
252
256
  iconBefore: elementIcon,
253
257
  isSelected: isSelected,
@@ -257,7 +261,8 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
257
261
  // For now replace it with aria-describedby.
258
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.
259
263
  ,
260
- "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,
261
266
  "aria-setsize": itemsLength,
262
267
  "aria-posinset": (0, _expValEquals.expValEquals)('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
263
268
  role: "option",
@@ -339,7 +339,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
339
339
  css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
340
340
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
341
341
  ,
342
- tabIndex: 0
342
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
343
343
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
344
344
  ,
345
345
  className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
@@ -313,7 +313,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
313
313
  css: [typeAheadContent]
314
314
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
315
315
  ,
316
- tabIndex: 0
316
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
317
317
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
318
318
  ,
319
319
  className: _constants.TYPE_AHEAD_POPUP_CONTENT_CLASS,
@@ -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)",
@@ -209,6 +210,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
209
210
  const intl = useIntl();
210
211
  const descriptionText = item.description ? `${item.description}.` : '';
211
212
  const shortcutText = item.keyshortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${item.keyshortcut}.` : '';
213
+ const descriptionId = `typeahead-item-description-${itemIndex}`;
212
214
  const {
213
215
  icon,
214
216
  title,
@@ -261,7 +263,9 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
261
263
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
262
264
  jsx("span", {
263
265
  css: listItemClasses
264
- }, jsx(ButtonItem, {
266
+ }, (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') && jsx(VisuallyHidden, {
267
+ id: descriptionId
268
+ }, descriptionText, " ", shortcutText), jsx(ButtonItem, {
265
269
  onClick: insertSelectedItem,
266
270
  iconBefore: elementIcon,
267
271
  isSelected: isSelected,
@@ -271,7 +275,8 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
271
275
  // For now replace it with aria-describedby.
272
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.
273
277
  ,
274
- "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,
275
280
  "aria-setsize": itemsLength,
276
281
  "aria-posinset": expValEquals('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
277
282
  role: "option",
@@ -335,7 +335,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
335
335
  css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
336
336
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
337
337
  ,
338
- tabIndex: 0
338
+ tabIndex: fg('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
339
339
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
340
340
  ,
341
341
  className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
@@ -307,7 +307,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
307
307
  css: [typeAheadContent]
308
308
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
309
309
  ,
310
- tabIndex: 0
310
+ tabIndex: fg('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
311
311
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
312
312
  ,
313
313
  className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
@@ -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)",
@@ -189,6 +190,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
189
190
  var intl = useIntl();
190
191
  var descriptionText = item.description ? "".concat(item.description, ".") : '';
191
192
  var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
193
+ var descriptionId = "typeahead-item-description-".concat(itemIndex);
192
194
  var icon = item.icon,
193
195
  title = item.title,
194
196
  customRenderItem = item.render;
@@ -239,7 +241,9 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
239
241
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
240
242
  jsx("span", {
241
243
  css: listItemClasses
242
- }, jsx(ButtonItem, {
244
+ }, (descriptionText || shortcutText) && fg('platform_editor_a11y_fix_aria_description') && jsx(VisuallyHidden, {
245
+ id: descriptionId
246
+ }, descriptionText, " ", shortcutText), jsx(ButtonItem, {
243
247
  onClick: insertSelectedItem,
244
248
  iconBefore: elementIcon,
245
249
  isSelected: isSelected,
@@ -249,7 +253,8 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
249
253
  // For now replace it with aria-describedby.
250
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.
251
255
  ,
252
- "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,
253
258
  "aria-setsize": itemsLength,
254
259
  "aria-posinset": expValEquals('platform_editor_fix_a11y_aria_posinset_0', 'isEnabled', true) ? itemIndex + 1 : itemIndex,
255
260
  role: "option",
@@ -329,7 +329,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
329
329
  css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showMoreOptionsButton && typeAheadWrapperWithViewMoreOverride]
330
330
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
331
331
  ,
332
- tabIndex: 0
332
+ tabIndex: fg('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
333
333
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
334
334
  ,
335
335
  className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
@@ -304,7 +304,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
304
304
  css: [typeAheadContent]
305
305
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
306
306
  ,
307
- tabIndex: 0
307
+ tabIndex: fg('platform_editor_a11y_fix_typeahead_tabindex') ? undefined : 0
308
308
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
309
309
  ,
310
310
  className: TYPE_AHEAD_POPUP_CONTENT_CLASS,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "6.5.6",
3
+ "version": "6.5.8",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,12 +42,13 @@
42
42
  "@atlaskit/insm": "^0.1.0",
43
43
  "@atlaskit/menu": "^8.4.0",
44
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
- "@atlaskit/primitives": "^16.0.0",
45
+ "@atlaskit/primitives": "^16.1.0",
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.19.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",
@@ -115,6 +116,12 @@
115
116
  },
116
117
  "platform_editor_typeahead_description_text_colour": {
117
118
  "type": "boolean"
119
+ },
120
+ "platform_editor_a11y_fix_aria_description": {
121
+ "type": "boolean"
122
+ },
123
+ "platform_editor_a11y_fix_typeahead_tabindex": {
124
+ "type": "boolean"
118
125
  }
119
126
  }
120
127
  }