@atlaskit/editor-plugin-type-ahead 0.8.4 → 0.8.5

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 +6 -0
  2. package/dist/cjs/ui/TypeAheadListItem.js +16 -24
  3. package/dist/es2019/ui/TypeAheadListItem.js +9 -17
  4. package/dist/esm/ui/TypeAheadListItem.js +16 -23
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 0.8.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#61655](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61655) [`6fec14da1838`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6fec14da1838) - ED-21403 Fixed accessiblity issue with TypeAheadItems read by VoiceOver
8
+
3
9
  ## 0.8.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/ui/TypeAheadListItem.js CHANGED
@@ -18,7 +18,8 @@ var _menu = require("@atlaskit/menu");
18
18
  var _colors = require("@atlaskit/theme/colors");
19
19
  var _constants = require("@atlaskit/theme/constants");
20
20
  var _messages = require("../messages");
21
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
21
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // Disabling for ED-21403 fixing accessibility issue.
22
+ /* eslint-disable jsx-a11y/role-supports-aria-props */
22
23
  /** @jsx jsx */
23
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
24
25
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -56,29 +57,23 @@ var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
56
57
  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
57
58
  });
58
59
  var noop = function noop() {};
59
- var AssistiveText = function AssistiveText(_ref2) {
60
- var title = _ref2.title,
61
- description = _ref2.description,
62
- shortcut = _ref2.shortcut;
63
- var intl = (0, _reactIntlNext.useIntl)();
64
- var descriptionText = description ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
65
- var shortcutText = shortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
66
- return (0, _react2.jsx)("span", {
67
- className: "assistive"
68
- }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
69
- };
70
- var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_ref3) {
71
- var item = _ref3.item,
72
- itemsLength = _ref3.itemsLength,
73
- selectedIndex = _ref3.selectedIndex,
74
- onItemClick = _ref3.onItemClick,
75
- itemIndex = _ref3.itemIndex,
76
- ariaLabel = _ref3.ariaLabel;
60
+ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_ref2) {
61
+ var item = _ref2.item,
62
+ itemsLength = _ref2.itemsLength,
63
+ selectedIndex = _ref2.selectedIndex,
64
+ onItemClick = _ref2.onItemClick,
65
+ itemIndex = _ref2.itemIndex,
66
+ ariaLabel = _ref2.ariaLabel;
77
67
  /**
78
68
  * To select and highlight the first Item when no item is selected
79
69
  * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
80
70
  */
81
71
  var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
72
+
73
+ // Assistive text
74
+ var intl = (0, _reactIntlNext.useIntl)();
75
+ var descriptionText = item.description ? "".concat(item.description, ".") : '';
76
+ var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
82
77
  var icon = item.icon,
83
78
  title = item.title,
84
79
  customRenderItem = item.render;
@@ -146,6 +141,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
146
141
  isSelected: isSelected,
147
142
  "aria-selected": isSelected,
148
143
  "aria-label": title,
144
+ "aria-description": "".concat(descriptionText, " ").concat(shortcutText),
149
145
  "aria-setsize": itemsLength,
150
146
  "aria-posinset": itemIndex,
151
147
  role: "option",
@@ -167,9 +163,5 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
167
163
  css: _shortcut.shortcutStyle
168
164
  }, item.keyshortcut))), (0, _react2.jsx)("div", {
169
165
  className: "item-description"
170
- }, item.description))), (0, _react2.jsx)(AssistiveText, {
171
- title: item.title,
172
- description: item.description,
173
- shortcut: item.keyshortcut
174
- })));
166
+ }, item.description)))));
175
167
  };
package/dist/es2019/ui/TypeAheadListItem.js CHANGED
@@ -1,3 +1,5 @@
1
+ // Disabling for ED-21403 fixing accessibility issue.
2
+ /* eslint-disable jsx-a11y/role-supports-aria-props */
1
3
  /** @jsx jsx */
2
4
  import React, { useCallback, useLayoutEffect, useMemo } from 'react';
3
5
  import { css, jsx } from '@emotion/react';
@@ -89,18 +91,6 @@ const FallbackIcon = /*#__PURE__*/React.memo(({
89
91
  return jsx(IconFallback, null);
90
92
  });
91
93
  const noop = () => {};
92
- const AssistiveText = ({
93
- title,
94
- description,
95
- shortcut
96
- }) => {
97
- const intl = useIntl();
98
- const descriptionText = description ? ` ${intl.formatMessage(typeAheadListMessages.descriptionLabel)} ${description}.` : '';
99
- const shortcutText = shortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${shortcut}.` : '';
100
- return jsx("span", {
101
- className: "assistive"
102
- }, `${title}. ${descriptionText} ${shortcutText}`);
103
- };
104
94
  export const TypeAheadListItem = ({
105
95
  item,
106
96
  itemsLength,
@@ -114,6 +104,11 @@ export const TypeAheadListItem = ({
114
104
  * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
115
105
  */
116
106
  const isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
107
+
108
+ // Assistive text
109
+ const intl = useIntl();
110
+ const descriptionText = item.description ? `${item.description}.` : '';
111
+ const shortcutText = item.keyshortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${item.keyshortcut}.` : '';
117
112
  const {
118
113
  icon,
119
114
  title,
@@ -183,6 +178,7 @@ export const TypeAheadListItem = ({
183
178
  isSelected: isSelected,
184
179
  "aria-selected": isSelected,
185
180
  "aria-label": title,
181
+ "aria-description": `${descriptionText} ${shortcutText}`,
186
182
  "aria-setsize": itemsLength,
187
183
  "aria-posinset": itemIndex,
188
184
  role: "option",
@@ -204,9 +200,5 @@ export const TypeAheadListItem = ({
204
200
  css: shortcutStyle
205
201
  }, item.keyshortcut))), jsx("div", {
206
202
  className: "item-description"
207
- }, item.description))), jsx(AssistiveText, {
208
- title: item.title,
209
- description: item.description,
210
- shortcut: item.keyshortcut
211
- })));
203
+ }, item.description)))));
212
204
  };
package/dist/esm/ui/TypeAheadListItem.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
+ // Disabling for ED-21403 fixing accessibility issue.
4
+ /* eslint-disable jsx-a11y/role-supports-aria-props */
3
5
  /** @jsx jsx */
4
6
  import React, { useCallback, useLayoutEffect, useMemo } from 'react';
5
7
  import { css, jsx } from '@emotion/react';
@@ -46,29 +48,23 @@ var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
46
48
  return jsx(IconFallback, null);
47
49
  });
48
50
  var noop = function noop() {};
49
- var AssistiveText = function AssistiveText(_ref2) {
50
- var title = _ref2.title,
51
- description = _ref2.description,
52
- shortcut = _ref2.shortcut;
53
- var intl = useIntl();
54
- var descriptionText = description ? " ".concat(intl.formatMessage(typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
55
- var shortcutText = shortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
56
- return jsx("span", {
57
- className: "assistive"
58
- }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
59
- };
60
- export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
61
- var item = _ref3.item,
62
- itemsLength = _ref3.itemsLength,
63
- selectedIndex = _ref3.selectedIndex,
64
- onItemClick = _ref3.onItemClick,
65
- itemIndex = _ref3.itemIndex,
66
- ariaLabel = _ref3.ariaLabel;
51
+ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
52
+ var item = _ref2.item,
53
+ itemsLength = _ref2.itemsLength,
54
+ selectedIndex = _ref2.selectedIndex,
55
+ onItemClick = _ref2.onItemClick,
56
+ itemIndex = _ref2.itemIndex,
57
+ ariaLabel = _ref2.ariaLabel;
67
58
  /**
68
59
  * To select and highlight the first Item when no item is selected
69
60
  * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
70
61
  */
71
62
  var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
63
+
64
+ // Assistive text
65
+ var intl = useIntl();
66
+ var descriptionText = item.description ? "".concat(item.description, ".") : '';
67
+ var shortcutText = item.keyshortcut ? " ".concat(intl.formatMessage(typeAheadListMessages.shortcutLabel), " ").concat(item.keyshortcut, ".") : '';
72
68
  var icon = item.icon,
73
69
  title = item.title,
74
70
  customRenderItem = item.render;
@@ -136,6 +132,7 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
136
132
  isSelected: isSelected,
137
133
  "aria-selected": isSelected,
138
134
  "aria-label": title,
135
+ "aria-description": "".concat(descriptionText, " ").concat(shortcutText),
139
136
  "aria-setsize": itemsLength,
140
137
  "aria-posinset": itemIndex,
141
138
  role: "option",
@@ -157,9 +154,5 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref3) {
157
154
  css: shortcutStyle
158
155
  }, item.keyshortcut))), jsx("div", {
159
156
  className: "item-description"
160
- }, item.description))), jsx(AssistiveText, {
161
- title: item.title,
162
- description: item.description,
163
- shortcut: item.keyshortcut
164
- })));
157
+ }, item.description)))));
165
158
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "0.8.4",
3
+ "version": "0.8.5",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",