@atlaskit/editor-common 78.2.0 → 78.3.0

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 (32) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/element-browser/components/ElementList/ElementList.js +2 -1
  3. package/dist/cjs/element-browser/components/ElementSearch.js +28 -7
  4. package/dist/cjs/element-browser/components/StatelessElementBrowser.js +4 -2
  5. package/dist/cjs/element-browser/messages.js +3 -3
  6. package/dist/cjs/messages/list.js +5 -0
  7. package/dist/cjs/messages/toolbar.js +5 -0
  8. package/dist/cjs/monitoring/error.js +1 -1
  9. package/dist/cjs/ui/DropList/index.js +1 -1
  10. package/dist/es2019/element-browser/components/ElementList/ElementList.js +2 -1
  11. package/dist/es2019/element-browser/components/ElementSearch.js +25 -8
  12. package/dist/es2019/element-browser/components/StatelessElementBrowser.js +4 -2
  13. package/dist/es2019/element-browser/messages.js +3 -3
  14. package/dist/es2019/messages/list.js +5 -0
  15. package/dist/es2019/messages/toolbar.js +5 -0
  16. package/dist/es2019/monitoring/error.js +1 -1
  17. package/dist/es2019/ui/DropList/index.js +1 -1
  18. package/dist/esm/element-browser/components/ElementList/ElementList.js +2 -1
  19. package/dist/esm/element-browser/components/ElementSearch.js +29 -8
  20. package/dist/esm/element-browser/components/StatelessElementBrowser.js +4 -2
  21. package/dist/esm/element-browser/messages.js +3 -3
  22. package/dist/esm/messages/list.js +5 -0
  23. package/dist/esm/messages/toolbar.js +5 -0
  24. package/dist/esm/monitoring/error.js +1 -1
  25. package/dist/esm/ui/DropList/index.js +1 -1
  26. package/dist/types/element-browser/components/ElementSearch.d.ts +1 -0
  27. package/dist/types/messages/list.d.ts +5 -0
  28. package/dist/types/messages/toolbar.d.ts +5 -0
  29. package/dist/types-ts4.5/element-browser/components/ElementSearch.d.ts +1 -0
  30. package/dist/types-ts4.5/messages/list.d.ts +5 -0
  31. package/dist/types-ts4.5/messages/toolbar.d.ts +5 -0
  32. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 78.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#68408](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68408) [`ab8f885fd0a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab8f885fd0a5) - ECA11Y-180: Updated announce translates structure, added required attributes
8
+ - [#73123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73123) [`7b46579bdbd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7b46579bdbd6) - ECA11Y-206: updated unit tests
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 78.2.1
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 78.2.0
4
21
 
5
22
  ### Minor Changes
@@ -187,7 +187,8 @@ function ElementItem(_ref4) {
187
187
  isSelected: selected,
188
188
  "aria-describedby": title,
189
189
  ref: ref,
190
- testId: "element-item-".concat(index)
190
+ testId: "element-item-".concat(index),
191
+ id: "searched-item-".concat(index)
191
192
  }, (0, _react2.jsx)(ItemContent, {
192
193
  style: inlineMode ? null : itemStyleOverrides,
193
194
  tabIndex: 0,
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
11
  var _react = _interopRequireWildcard(require("react"));
11
12
  var _react2 = require("@emotion/react");
12
13
  var _reactIntlNext = require("react-intl-next");
@@ -32,9 +33,14 @@ function ElementSearch(_ref) {
32
33
  onClick = _ref.onClick,
33
34
  onKeyDown = _ref.onKeyDown,
34
35
  searchTerm = _ref.searchTerm,
35
- items = _ref.items;
36
+ items = _ref.items,
37
+ selectedItemIndex = _ref.selectedItemIndex;
36
38
  var ref = (0, _useFocus.default)(focus);
37
39
  var assistiveTextRef = (0, _react.useRef)(null);
40
+ var _useState = (0, _react.useState)(false),
41
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
42
+ inputFocused = _useState2[0],
43
+ setInputFocused = _useState2[1];
38
44
  (0, _react.useLayoutEffect)(function () {
39
45
  if (assistiveTextRef) {
40
46
  var assistiveDiv = assistiveTextRef.current;
@@ -49,21 +55,33 @@ function ElementSearch(_ref) {
49
55
  var value = _ref2.target.value;
50
56
  onSearch(value);
51
57
  };
52
- var onFocus = function onFocus(e) {};
53
- var onBlur = function onBlur(e) {};
58
+ var onFocus = function onFocus(e) {
59
+ setInputFocused(true);
60
+ };
61
+ var onBlur = function onBlur(e) {
62
+ setInputFocused(false);
63
+ };
54
64
  var getFormattedMessage = function getFormattedMessage(itemsCount) {
55
65
  if (searchTerm === '') {
56
- return "".concat(itemsCount, " ").concat(formatMessage(_messages.default.assistiveTextSuggestionsDefault));
66
+ return "".concat(formatMessage(_messages.default.assistiveTextSuggestionsDefault, {
67
+ count: itemsCount
68
+ }));
57
69
  }
58
70
  if (itemsCount > 1) {
59
- return "".concat(itemsCount, " ").concat(formatMessage(_messages.default.assistiveTextSuggestions));
71
+ return "".concat(formatMessage(_messages.default.assistiveTextSuggestions, {
72
+ count: itemsCount
73
+ }));
60
74
  }
61
75
  if (itemsCount === 1) {
62
- return "".concat(itemsCount, " ").concat(formatMessage(_messages.default.assistiveTextSuggestion));
76
+ return "".concat(formatMessage(_messages.default.assistiveTextSuggestion, {
77
+ count: itemsCount
78
+ }));
63
79
  }
64
80
  return formatMessage(_messages.default.assistiveTextSuggestionNothing);
65
81
  };
66
82
  var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
83
+ var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
84
+ var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
67
85
  return (0, _react2.jsx)("div", {
68
86
  css: [wrapper, mode === _types.Modes.inline && wrapperInline]
69
87
  }, (0, _react2.jsx)(_textfield.default, {
@@ -75,7 +93,8 @@ function ElementSearch(_ref) {
75
93
  onBlur: onBlur,
76
94
  elemBeforeInput: (0, _react2.jsx)("div", {
77
95
  css: elementBeforeInput,
78
- "data-testid": "element_search__element_before_input"
96
+ "data-testid": "element_search__element_before_input",
97
+ "aria-hidden": "true"
79
98
  }, (0, _react2.jsx)(_search.default, {
80
99
  size: "medium",
81
100
  label: "Advanced search",
@@ -91,6 +110,8 @@ function ElementSearch(_ref) {
91
110
  "aria-label": "search",
92
111
  "aria-labelledby": "search-assistive",
93
112
  className: "js-search-input",
113
+ role: "combobox",
114
+ "aria-activedescendant": ariaActiveDescendant,
94
115
  value: searchTerm
95
116
  }), (0, _react2.jsx)("span", {
96
117
  id: "search-assistive",
@@ -169,7 +169,8 @@ function MobileBrowser(_ref) {
169
169
  focus: focusOnSearch,
170
170
  onClick: setFocusOnSearch,
171
171
  searchTerm: searchTerm,
172
- items: items
172
+ items: items,
173
+ selectedItemIndex: selectedItemIndex
173
174
  }), showCategories && (0, _react2.jsx)("nav", {
174
175
  css: mobileCategoryListWrapper,
175
176
  tabIndex: -1
@@ -249,7 +250,8 @@ function DesktopBrowser(_ref2) {
249
250
  focus: focusOnSearch,
250
251
  onClick: setFocusOnSearch,
251
252
  searchTerm: searchTerm,
252
- items: items
253
+ items: items,
254
+ selectedItemIndex: selectedItemIndex
253
255
  })), (0, _react2.jsx)(_ElementList.default, {
254
256
  items: items,
255
257
  mode: mode,
@@ -18,17 +18,17 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
18
18
  },
19
19
  assistiveTextSuggestionsDefault: {
20
20
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
21
- defaultMessage: 'suggestions available by default.',
21
+ defaultMessage: '{count} suggestions available by default.',
22
22
  description: 'Assistive text to describe the default list of suggestions'
23
23
  },
24
24
  assistiveTextSuggestions: {
25
25
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
26
- defaultMessage: 'suggestions available for typed text.',
26
+ defaultMessage: '{count} suggestions available for typed text.',
27
27
  description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
28
28
  },
29
29
  assistiveTextSuggestion: {
30
30
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
31
- defaultMessage: 'suggestion available for typed text.',
31
+ defaultMessage: '{count} suggestion available for typed text.',
32
32
  description: 'Assistive text to describe the that there is one suggestion for the users typed input'
33
33
  },
34
34
  assistiveTextSuggestionNothing: {
@@ -32,5 +32,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
32
32
  id: 'fabric.editor.lists',
33
33
  defaultMessage: 'Lists',
34
34
  description: 'Menu shows ordered/bullet list and unordered/numbered lists'
35
+ },
36
+ listsFormat: {
37
+ id: 'fabric.editor.listsFormat',
38
+ defaultMessage: 'List formating',
39
+ description: 'Aria label for the wrapper of list buttons'
35
40
  }
36
41
  });
@@ -56,6 +56,11 @@ var toolbarMessages = exports.toolbarMessages = (0, _reactIntlNext.defineMessage
56
56
  defaultMessage: 'More formatting',
57
57
  description: 'Clicking this will show a menu with additional formatting options'
58
58
  },
59
+ textFormatting: {
60
+ id: 'fabric.editor.textFormatting',
61
+ defaultMessage: 'Text formatting',
62
+ description: 'Aria label for the wrapper of text format buttons'
63
+ },
59
64
  bold: {
60
65
  id: 'fabric.editor.bold',
61
66
  defaultMessage: 'Bold',
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  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; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "78.2.0";
19
+ var packageVersion = "78.3.0";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
22
22
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
23
23
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
24
24
  var packageName = "@atlaskit/editor-common";
25
- var packageVersion = "78.2.0";
25
+ var packageVersion = "78.3.0";
26
26
  var halfFocusRing = 1;
27
27
  var dropOffset = '0, 8';
28
28
  var DropList = /*#__PURE__*/function (_Component) {
@@ -187,7 +187,8 @@ export function ElementItem({
187
187
  isSelected: selected,
188
188
  "aria-describedby": title,
189
189
  ref: ref,
190
- testId: `element-item-${index}`
190
+ testId: `element-item-${index}`,
191
+ id: `searched-item-${index}`
191
192
  }, jsx(ItemContent, {
192
193
  style: inlineMode ? null : itemStyleOverrides,
193
194
  tabIndex: 0,
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import React, { memo, useLayoutEffect, useRef } from 'react';
2
+ import React, { memo, useLayoutEffect, useRef, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { injectIntl } from 'react-intl-next';
5
5
  import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -22,10 +22,12 @@ function ElementSearch({
22
22
  onClick,
23
23
  onKeyDown,
24
24
  searchTerm,
25
- items
25
+ items,
26
+ selectedItemIndex
26
27
  }) {
27
28
  const ref = useFocus(focus);
28
29
  const assistiveTextRef = useRef(null);
30
+ const [inputFocused, setInputFocused] = useState(false);
29
31
  useLayoutEffect(() => {
30
32
  if (assistiveTextRef) {
31
33
  const assistiveDiv = assistiveTextRef.current;
@@ -43,21 +45,33 @@ function ElementSearch({
43
45
  }) => {
44
46
  onSearch(value);
45
47
  };
46
- const onFocus = e => {};
47
- const onBlur = e => {};
48
+ const onFocus = e => {
49
+ setInputFocused(true);
50
+ };
51
+ const onBlur = e => {
52
+ setInputFocused(false);
53
+ };
48
54
  const getFormattedMessage = itemsCount => {
49
55
  if (searchTerm === '') {
50
- return `${itemsCount} ${formatMessage(commonMessages.assistiveTextSuggestionsDefault)}`;
56
+ return `${formatMessage(commonMessages.assistiveTextSuggestionsDefault, {
57
+ count: itemsCount
58
+ })}`;
51
59
  }
52
60
  if (itemsCount > 1) {
53
- return `${itemsCount} ${formatMessage(commonMessages.assistiveTextSuggestions)}`;
61
+ return `${formatMessage(commonMessages.assistiveTextSuggestions, {
62
+ count: itemsCount
63
+ })}`;
54
64
  }
55
65
  if (itemsCount === 1) {
56
- return `${itemsCount} ${formatMessage(commonMessages.assistiveTextSuggestion)}`;
66
+ return `${formatMessage(commonMessages.assistiveTextSuggestion, {
67
+ count: itemsCount
68
+ })}`;
57
69
  }
58
70
  return formatMessage(commonMessages.assistiveTextSuggestionNothing);
59
71
  };
60
72
  const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
73
+ const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
74
+ const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
61
75
  return jsx("div", {
62
76
  css: [wrapper, mode === Modes.inline && wrapperInline]
63
77
  }, jsx(Textfield, {
@@ -69,7 +83,8 @@ function ElementSearch({
69
83
  onBlur: onBlur,
70
84
  elemBeforeInput: jsx("div", {
71
85
  css: elementBeforeInput,
72
- "data-testid": "element_search__element_before_input"
86
+ "data-testid": "element_search__element_before_input",
87
+ "aria-hidden": "true"
73
88
  }, jsx(SearchIcon, {
74
89
  size: "medium",
75
90
  label: "Advanced search",
@@ -85,6 +100,8 @@ function ElementSearch({
85
100
  "aria-label": "search",
86
101
  "aria-labelledby": "search-assistive",
87
102
  className: "js-search-input",
103
+ role: "combobox",
104
+ "aria-activedescendant": ariaActiveDescendant,
88
105
  value: searchTerm
89
106
  }), jsx("span", {
90
107
  id: "search-assistive",
@@ -239,7 +239,8 @@ function MobileBrowser({
239
239
  focus: focusOnSearch,
240
240
  onClick: setFocusOnSearch,
241
241
  searchTerm: searchTerm,
242
- items: items
242
+ items: items,
243
+ selectedItemIndex: selectedItemIndex
243
244
  }), showCategories && jsx("nav", {
244
245
  css: mobileCategoryListWrapper,
245
246
  tabIndex: -1
@@ -320,7 +321,8 @@ function DesktopBrowser({
320
321
  focus: focusOnSearch,
321
322
  onClick: setFocusOnSearch,
322
323
  searchTerm: searchTerm,
323
- items: items
324
+ items: items,
325
+ selectedItemIndex: selectedItemIndex
324
326
  })), jsx(ElementList, {
325
327
  items: items,
326
328
  mode: mode,
@@ -12,17 +12,17 @@ export default defineMessages({
12
12
  },
13
13
  assistiveTextSuggestionsDefault: {
14
14
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
15
- defaultMessage: 'suggestions available by default.',
15
+ defaultMessage: '{count} suggestions available by default.',
16
16
  description: 'Assistive text to describe the default list of suggestions'
17
17
  },
18
18
  assistiveTextSuggestions: {
19
19
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
20
- defaultMessage: 'suggestions available for typed text.',
20
+ defaultMessage: '{count} suggestions available for typed text.',
21
21
  description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
22
22
  },
23
23
  assistiveTextSuggestion: {
24
24
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
25
- defaultMessage: 'suggestion available for typed text.',
25
+ defaultMessage: '{count} suggestion available for typed text.',
26
26
  description: 'Assistive text to describe the that there is one suggestion for the users typed input'
27
27
  },
28
28
  assistiveTextSuggestionNothing: {
@@ -25,5 +25,10 @@ export const messages = defineMessages({
25
25
  id: 'fabric.editor.lists',
26
26
  defaultMessage: 'Lists',
27
27
  description: 'Menu shows ordered/bullet list and unordered/numbered lists'
28
+ },
29
+ listsFormat: {
30
+ id: 'fabric.editor.listsFormat',
31
+ defaultMessage: 'List formating',
32
+ description: 'Aria label for the wrapper of list buttons'
28
33
  }
29
34
  });
@@ -50,6 +50,11 @@ export const toolbarMessages = defineMessages({
50
50
  defaultMessage: 'More formatting',
51
51
  description: 'Clicking this will show a menu with additional formatting options'
52
52
  },
53
+ textFormatting: {
54
+ id: 'fabric.editor.textFormatting',
55
+ defaultMessage: 'Text formatting',
56
+ description: 'Aria label for the wrapper of text format buttons'
57
+ },
53
58
  bold: {
54
59
  id: 'fabric.editor.bold',
55
60
  defaultMessage: 'Bold',
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "78.2.0";
3
+ const packageVersion = "78.3.0";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
7
7
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
8
8
  import Layer from '../Layer';
9
9
  const packageName = "@atlaskit/editor-common";
10
- const packageVersion = "78.2.0";
10
+ const packageVersion = "78.3.0";
11
11
  const halfFocusRing = 1;
12
12
  const dropOffset = '0, 8';
13
13
  class DropList extends Component {
@@ -176,7 +176,8 @@ export function ElementItem(_ref4) {
176
176
  isSelected: selected,
177
177
  "aria-describedby": title,
178
178
  ref: ref,
179
- testId: "element-item-".concat(index)
179
+ testId: "element-item-".concat(index),
180
+ id: "searched-item-".concat(index)
180
181
  }, jsx(ItemContent, {
181
182
  style: inlineMode ? null : itemStyleOverrides,
182
183
  tabIndex: 0,
@@ -1,7 +1,8 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
4
  /** @jsx jsx */
4
- import React, { memo, useLayoutEffect, useRef } from 'react';
5
+ import React, { memo, useLayoutEffect, useRef, useState } from 'react';
5
6
  import { css, jsx } from '@emotion/react';
6
7
  import { injectIntl } from 'react-intl-next';
7
8
  import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -22,9 +23,14 @@ function ElementSearch(_ref) {
22
23
  onClick = _ref.onClick,
23
24
  onKeyDown = _ref.onKeyDown,
24
25
  searchTerm = _ref.searchTerm,
25
- items = _ref.items;
26
+ items = _ref.items,
27
+ selectedItemIndex = _ref.selectedItemIndex;
26
28
  var ref = useFocus(focus);
27
29
  var assistiveTextRef = useRef(null);
30
+ var _useState = useState(false),
31
+ _useState2 = _slicedToArray(_useState, 2),
32
+ inputFocused = _useState2[0],
33
+ setInputFocused = _useState2[1];
28
34
  useLayoutEffect(function () {
29
35
  if (assistiveTextRef) {
30
36
  var assistiveDiv = assistiveTextRef.current;
@@ -39,21 +45,33 @@ function ElementSearch(_ref) {
39
45
  var value = _ref2.target.value;
40
46
  onSearch(value);
41
47
  };
42
- var onFocus = function onFocus(e) {};
43
- var onBlur = function onBlur(e) {};
48
+ var onFocus = function onFocus(e) {
49
+ setInputFocused(true);
50
+ };
51
+ var onBlur = function onBlur(e) {
52
+ setInputFocused(false);
53
+ };
44
54
  var getFormattedMessage = function getFormattedMessage(itemsCount) {
45
55
  if (searchTerm === '') {
46
- return "".concat(itemsCount, " ").concat(formatMessage(commonMessages.assistiveTextSuggestionsDefault));
56
+ return "".concat(formatMessage(commonMessages.assistiveTextSuggestionsDefault, {
57
+ count: itemsCount
58
+ }));
47
59
  }
48
60
  if (itemsCount > 1) {
49
- return "".concat(itemsCount, " ").concat(formatMessage(commonMessages.assistiveTextSuggestions));
61
+ return "".concat(formatMessage(commonMessages.assistiveTextSuggestions, {
62
+ count: itemsCount
63
+ }));
50
64
  }
51
65
  if (itemsCount === 1) {
52
- return "".concat(itemsCount, " ").concat(formatMessage(commonMessages.assistiveTextSuggestion));
66
+ return "".concat(formatMessage(commonMessages.assistiveTextSuggestion, {
67
+ count: itemsCount
68
+ }));
53
69
  }
54
70
  return formatMessage(commonMessages.assistiveTextSuggestionNothing);
55
71
  };
56
72
  var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
73
+ var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
74
+ var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
57
75
  return jsx("div", {
58
76
  css: [wrapper, mode === Modes.inline && wrapperInline]
59
77
  }, jsx(Textfield, {
@@ -65,7 +83,8 @@ function ElementSearch(_ref) {
65
83
  onBlur: onBlur,
66
84
  elemBeforeInput: jsx("div", {
67
85
  css: elementBeforeInput,
68
- "data-testid": "element_search__element_before_input"
86
+ "data-testid": "element_search__element_before_input",
87
+ "aria-hidden": "true"
69
88
  }, jsx(SearchIcon, {
70
89
  size: "medium",
71
90
  label: "Advanced search",
@@ -81,6 +100,8 @@ function ElementSearch(_ref) {
81
100
  "aria-label": "search",
82
101
  "aria-labelledby": "search-assistive",
83
102
  className: "js-search-input",
103
+ role: "combobox",
104
+ "aria-activedescendant": ariaActiveDescendant,
84
105
  value: searchTerm
85
106
  }), jsx("span", {
86
107
  id: "search-assistive",
@@ -159,7 +159,8 @@ function MobileBrowser(_ref) {
159
159
  focus: focusOnSearch,
160
160
  onClick: setFocusOnSearch,
161
161
  searchTerm: searchTerm,
162
- items: items
162
+ items: items,
163
+ selectedItemIndex: selectedItemIndex
163
164
  }), showCategories && jsx("nav", {
164
165
  css: mobileCategoryListWrapper,
165
166
  tabIndex: -1
@@ -239,7 +240,8 @@ function DesktopBrowser(_ref2) {
239
240
  focus: focusOnSearch,
240
241
  onClick: setFocusOnSearch,
241
242
  searchTerm: searchTerm,
242
- items: items
243
+ items: items,
244
+ selectedItemIndex: selectedItemIndex
243
245
  })), jsx(ElementList, {
244
246
  items: items,
245
247
  mode: mode,
@@ -12,17 +12,17 @@ export default defineMessages({
12
12
  },
13
13
  assistiveTextSuggestionsDefault: {
14
14
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
15
- defaultMessage: 'suggestions available by default.',
15
+ defaultMessage: '{count} suggestions available by default.',
16
16
  description: 'Assistive text to describe the default list of suggestions'
17
17
  },
18
18
  assistiveTextSuggestions: {
19
19
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestions',
20
- defaultMessage: 'suggestions available for typed text.',
20
+ defaultMessage: '{count} suggestions available for typed text.',
21
21
  description: 'Assistive text to describe the list of suggestions filtered by typed user input, plural of fabric.editor.elementbrowser.searchbar.assistive.text.suggestion'
22
22
  },
23
23
  assistiveTextSuggestion: {
24
24
  id: 'fabric.editor.elementbrowser.searchbar.assistive.text.suggestion',
25
- defaultMessage: 'suggestion available for typed text.',
25
+ defaultMessage: '{count} suggestion available for typed text.',
26
26
  description: 'Assistive text to describe the that there is one suggestion for the users typed input'
27
27
  },
28
28
  assistiveTextSuggestionNothing: {
@@ -25,5 +25,10 @@ export var messages = defineMessages({
25
25
  id: 'fabric.editor.lists',
26
26
  defaultMessage: 'Lists',
27
27
  description: 'Menu shows ordered/bullet list and unordered/numbered lists'
28
+ },
29
+ listsFormat: {
30
+ id: 'fabric.editor.listsFormat',
31
+ defaultMessage: 'List formating',
32
+ description: 'Aria label for the wrapper of list buttons'
28
33
  }
29
34
  });
@@ -50,6 +50,11 @@ export var toolbarMessages = defineMessages({
50
50
  defaultMessage: 'More formatting',
51
51
  description: 'Clicking this will show a menu with additional formatting options'
52
52
  },
53
+ textFormatting: {
54
+ id: 'fabric.editor.textFormatting',
55
+ defaultMessage: 'Text formatting',
56
+ description: 'Aria label for the wrapper of text format buttons'
57
+ },
53
58
  bold: {
54
59
  id: 'fabric.editor.bold',
55
60
  defaultMessage: 'Bold',
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "78.2.0";
9
+ var packageVersion = "78.3.0";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
17
17
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
18
18
  import Layer from '../Layer';
19
19
  var packageName = "@atlaskit/editor-common";
20
- var packageVersion = "78.2.0";
20
+ var packageVersion = "78.3.0";
21
21
  var halfFocusRing = 1;
22
22
  var dropOffset = '0, 8';
23
23
  var DropList = /*#__PURE__*/function (_Component) {
@@ -11,6 +11,7 @@ interface Props {
11
11
  onKeyDown: (e: React.KeyboardEvent) => void;
12
12
  searchTerm?: string;
13
13
  items: QuickInsertItem[];
14
+ selectedItemIndex?: number;
14
15
  }
15
16
  declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
16
17
  forwardedRef?: React.Ref<any> | undefined;
@@ -24,4 +24,9 @@ export declare const messages: {
24
24
  defaultMessage: string;
25
25
  description: string;
26
26
  };
27
+ listsFormat: {
28
+ id: string;
29
+ defaultMessage: string;
30
+ description: string;
31
+ };
27
32
  };
@@ -49,6 +49,11 @@ export declare const toolbarMessages: {
49
49
  defaultMessage: string;
50
50
  description: string;
51
51
  };
52
+ textFormatting: {
53
+ id: string;
54
+ defaultMessage: string;
55
+ description: string;
56
+ };
52
57
  bold: {
53
58
  id: string;
54
59
  defaultMessage: string;
@@ -11,6 +11,7 @@ interface Props {
11
11
  onKeyDown: (e: React.KeyboardEvent) => void;
12
12
  searchTerm?: string;
13
13
  items: QuickInsertItem[];
14
+ selectedItemIndex?: number;
14
15
  }
15
16
  declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
16
17
  forwardedRef?: React.Ref<any> | undefined;
@@ -24,4 +24,9 @@ export declare const messages: {
24
24
  defaultMessage: string;
25
25
  description: string;
26
26
  };
27
+ listsFormat: {
28
+ id: string;
29
+ defaultMessage: string;
30
+ description: string;
31
+ };
27
32
  };
@@ -49,6 +49,11 @@ export declare const toolbarMessages: {
49
49
  defaultMessage: string;
50
50
  description: string;
51
51
  };
52
+ textFormatting: {
53
+ id: string;
54
+ defaultMessage: string;
55
+ description: string;
56
+ };
52
57
  bold: {
53
58
  id: string;
54
59
  defaultMessage: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "78.2.0",
3
+ "version": "78.3.0",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -117,10 +117,10 @@
117
117
  "@atlaskit/media-client": "^26.2.0",
118
118
  "@atlaskit/media-client-react": "^2.0.0",
119
119
  "@atlaskit/media-common": "^11.0.0",
120
- "@atlaskit/media-file-preview": "^0.4.0",
120
+ "@atlaskit/media-file-preview": "^0.5.0",
121
121
  "@atlaskit/media-picker": "^66.3.0",
122
122
  "@atlaskit/media-ui": "^25.0.0",
123
- "@atlaskit/mention": "^22.1.0",
123
+ "@atlaskit/mention": "^23.0.0",
124
124
  "@atlaskit/menu": "^2.1.0",
125
125
  "@atlaskit/platform-feature-flags": "^0.2.0",
126
126
  "@atlaskit/profilecard": "^19.11.0",
@@ -165,6 +165,7 @@
165
165
  "react-intl-next": "npm:react-intl@^5.18.1"
166
166
  },
167
167
  "devDependencies": {
168
+ "@af/visual-regression": "*",
168
169
  "@atlaskit/media-core": "^34.2.0",
169
170
  "@atlaskit/media-test-helpers": "^33.0.0",
170
171
  "@atlaskit/util-data-test": "^17.9.0",