@atlaskit/editor-plugin-type-ahead 6.5.6 → 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 +8 -0
  2. package/dist/cjs/ui/TypeAheadListItem.js +7 -2
  3. package/dist/es2019/ui/TypeAheadListItem.js +7 -2
  4. package/dist/esm/ui/TypeAheadListItem.js +7 -2
  5. package/package.json +6 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 6.5.6
4
12
 
5
13
  ### 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
@@ -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",
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)",
@@ -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",
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)",
@@ -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",
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.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.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,9 @@
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"
118
122
  }
119
123
  }
120
124
  }