@atlaskit/link-picker 1.33.0 → 1.33.1

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,11 @@
1
1
  # @atlaskit/link-picker
2
2
 
3
+ ## 1.33.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#71135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71135) [`88c865c6359d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/88c865c6359d) - Fix issues with screen readers detecting a list when no plugin is provided
8
+
3
9
  ## 1.33.0
4
10
 
5
11
  ### Minor Changes
@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
26
26
  };
27
27
  var PACKAGE_DATA = exports.PACKAGE_DATA = {
28
28
  packageName: "@atlaskit/link-picker" || '',
29
- packageVersion: "1.33.0" || '',
29
+ packageVersion: "1.33.1" || '',
30
30
  componentName: _constants.COMPONENT_NAME,
31
31
  source: _constants.COMPONENT_NAME
32
32
  };
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.testIds = exports.LinkPicker = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
11
  var _react = require("react");
@@ -298,6 +299,14 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
298
299
  var screenReaderDescriptionId = 'search-recent-links-field-description';
299
300
  var linkSearchListId = 'link-picker-search-list';
300
301
  var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
302
+ var a11yList = isActivePlugin || isLoadingPlugins ? {
303
+ role: 'combobox',
304
+ 'aria-expanded': true,
305
+ 'aria-autocomplete': 'list',
306
+ 'aria-controls': linkSearchListId,
307
+ 'aria-activedescendant': ariaActiveDescendant,
308
+ 'aria-describedby': screenReaderDescriptionId
309
+ } : undefined;
301
310
 
302
311
  // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
303
312
  // as the Aria design pattern for combobox does not work in this case
@@ -310,35 +319,30 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
310
319
  ,
311
320
  onSubmit: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.use-onsubmitcapture') ? undefined : handleSubmit,
312
321
  onSubmitCapture: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.use-onsubmitcapture') ? handleSubmit : undefined
313
- }, (0, _react2.jsx)(_trackMount.TrackMount, null), screenReaderText && (0, _react2.jsx)(_announcer.Announcer, {
322
+ }, (0, _react2.jsx)(_trackMount.TrackMount, null), isActivePlugin && screenReaderText && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_announcer.Announcer, {
314
323
  ariaLive: "assertive",
315
324
  text: screenReaderText,
316
325
  ariaRelevant: "additions",
317
326
  delay: 250
318
327
  }), (0, _react2.jsx)(_visuallyHidden.default, {
319
328
  id: screenReaderDescriptionId
320
- }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, customMessages.linkAriaLabel) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.linkAriaLabel)), (0, _react2.jsx)(LinkInputField, {
321
- role: "combobox",
322
- autoComplete: "off",
329
+ }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, customMessages.linkAriaLabel) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.linkAriaLabel))), (0, _react2.jsx)(LinkInputField, (0, _extends2.default)({
323
330
  name: "url",
331
+ autoComplete: "off",
324
332
  testId: testIds.urlInputField,
325
333
  label: customMessages !== null && customMessages !== void 0 && customMessages.linkLabel ? intl.formatMessage(customMessages.linkLabel) : intl.formatMessage(messages.linkLabel),
326
334
  placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkPlaceholder) : intl.formatMessage(messages.linkPlaceholder),
327
335
  value: url,
328
336
  autoFocus: true,
329
337
  clearLabel: intl.formatMessage(_messages.formMessages.clearLink),
330
- "aria-expanded": true,
331
- "aria-autocomplete": "list",
332
- "aria-controls": linkSearchListId,
333
- "aria-activedescendant": ariaActiveDescendant,
334
- "aria-describedby": screenReaderDescriptionId,
335
- "aria-readonly": isSubmitting,
336
338
  error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
337
339
  spotlightTargetName: "link-picker-search-field-spotlight-target",
340
+ "aria-readonly": isSubmitting
341
+ }, a11yList, {
338
342
  onClear: handleUrlClear,
339
343
  onKeyDown: handleKeyDown,
340
344
  onChange: handleChangeUrl
341
- }), !hideDisplayText && (0, _react2.jsx)(DisplayTextInputField, {
345
+ })), !hideDisplayText && (0, _react2.jsx)(DisplayTextInputField, {
342
346
  autoComplete: "off",
343
347
  name: "displayText",
344
348
  testId: testIds.textInputField,
@@ -16,7 +16,7 @@ export const testIds = {
16
16
  };
17
17
  export const PACKAGE_DATA = {
18
18
  packageName: "@atlaskit/link-picker" || '',
19
- packageVersion: "1.33.0" || '',
19
+ packageVersion: "1.33.1" || '',
20
20
  componentName: COMPONENT_NAME,
21
21
  source: COMPONENT_NAME
22
22
  };
@@ -1,5 +1,6 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /** @jsx jsx */
2
- import { memo, useCallback, useLayoutEffect, useReducer } from 'react';
3
+ import { Fragment, memo, useCallback, useLayoutEffect, useReducer } from 'react';
3
4
  import { jsx } from '@emotion/react';
4
5
  import { FormattedMessage, useIntl } from 'react-intl-next';
5
6
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -298,6 +299,14 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
298
299
  const screenReaderDescriptionId = 'search-recent-links-field-description';
299
300
  const linkSearchListId = 'link-picker-search-list';
300
301
  const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : '';
302
+ const a11yList = isActivePlugin || isLoadingPlugins ? {
303
+ role: 'combobox',
304
+ 'aria-expanded': true,
305
+ 'aria-autocomplete': 'list',
306
+ 'aria-controls': linkSearchListId,
307
+ 'aria-activedescendant': ariaActiveDescendant,
308
+ 'aria-describedby': screenReaderDescriptionId
309
+ } : undefined;
301
310
 
302
311
  // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
303
312
  // as the Aria design pattern for combobox does not work in this case
@@ -310,35 +319,30 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
310
319
  ,
311
320
  onSubmit: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? undefined : handleSubmit,
312
321
  onSubmitCapture: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? handleSubmit : undefined
313
- }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
322
+ }, jsx(TrackMount, null), isActivePlugin && screenReaderText && jsx(Fragment, null, jsx(Announcer, {
314
323
  ariaLive: "assertive",
315
324
  text: screenReaderText,
316
325
  ariaRelevant: "additions",
317
326
  delay: 250
318
327
  }), jsx(VisuallyHidden, {
319
328
  id: screenReaderDescriptionId
320
- }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel)), jsx(LinkInputField, {
321
- role: "combobox",
322
- autoComplete: "off",
329
+ }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel))), jsx(LinkInputField, _extends({
323
330
  name: "url",
331
+ autoComplete: "off",
324
332
  testId: testIds.urlInputField,
325
333
  label: customMessages !== null && customMessages !== void 0 && customMessages.linkLabel ? intl.formatMessage(customMessages.linkLabel) : intl.formatMessage(messages.linkLabel),
326
334
  placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkPlaceholder) : intl.formatMessage(messages.linkPlaceholder),
327
335
  value: url,
328
336
  autoFocus: true,
329
337
  clearLabel: intl.formatMessage(formMessages.clearLink),
330
- "aria-expanded": true,
331
- "aria-autocomplete": "list",
332
- "aria-controls": linkSearchListId,
333
- "aria-activedescendant": ariaActiveDescendant,
334
- "aria-describedby": screenReaderDescriptionId,
335
- "aria-readonly": isSubmitting,
336
338
  error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
337
339
  spotlightTargetName: "link-picker-search-field-spotlight-target",
340
+ "aria-readonly": isSubmitting
341
+ }, a11yList, {
338
342
  onClear: handleUrlClear,
339
343
  onKeyDown: handleKeyDown,
340
344
  onChange: handleChangeUrl
341
- }), !hideDisplayText && jsx(DisplayTextInputField, {
345
+ })), !hideDisplayText && jsx(DisplayTextInputField, {
342
346
  autoComplete: "off",
343
347
  name: "displayText",
344
348
  testId: testIds.textInputField,
@@ -17,7 +17,7 @@ export var testIds = {
17
17
  };
18
18
  export var PACKAGE_DATA = {
19
19
  packageName: "@atlaskit/link-picker" || '',
20
- packageVersion: "1.33.0" || '',
20
+ packageVersion: "1.33.1" || '',
21
21
  componentName: COMPONENT_NAME,
22
22
  source: COMPONENT_NAME
23
23
  };
@@ -1,9 +1,10 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
5
  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; }
5
6
  /** @jsx jsx */
6
- import { memo, useCallback, useLayoutEffect, useReducer } from 'react';
7
+ import { Fragment, memo, useCallback, useLayoutEffect, useReducer } from 'react';
7
8
  import { jsx } from '@emotion/react';
8
9
  import { FormattedMessage, useIntl } from 'react-intl-next';
9
10
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -292,6 +293,14 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
292
293
  var screenReaderDescriptionId = 'search-recent-links-field-description';
293
294
  var linkSearchListId = 'link-picker-search-list';
294
295
  var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
296
+ var a11yList = isActivePlugin || isLoadingPlugins ? {
297
+ role: 'combobox',
298
+ 'aria-expanded': true,
299
+ 'aria-autocomplete': 'list',
300
+ 'aria-controls': linkSearchListId,
301
+ 'aria-activedescendant': ariaActiveDescendant,
302
+ 'aria-describedby': screenReaderDescriptionId
303
+ } : undefined;
295
304
 
296
305
  // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
297
306
  // as the Aria design pattern for combobox does not work in this case
@@ -304,35 +313,30 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
304
313
  ,
305
314
  onSubmit: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? undefined : handleSubmit,
306
315
  onSubmitCapture: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? handleSubmit : undefined
307
- }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
316
+ }, jsx(TrackMount, null), isActivePlugin && screenReaderText && jsx(Fragment, null, jsx(Announcer, {
308
317
  ariaLive: "assertive",
309
318
  text: screenReaderText,
310
319
  ariaRelevant: "additions",
311
320
  delay: 250
312
321
  }), jsx(VisuallyHidden, {
313
322
  id: screenReaderDescriptionId
314
- }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel)), jsx(LinkInputField, {
315
- role: "combobox",
316
- autoComplete: "off",
323
+ }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel))), jsx(LinkInputField, _extends({
317
324
  name: "url",
325
+ autoComplete: "off",
318
326
  testId: testIds.urlInputField,
319
327
  label: customMessages !== null && customMessages !== void 0 && customMessages.linkLabel ? intl.formatMessage(customMessages.linkLabel) : intl.formatMessage(messages.linkLabel),
320
328
  placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkPlaceholder) : intl.formatMessage(messages.linkPlaceholder),
321
329
  value: url,
322
330
  autoFocus: true,
323
331
  clearLabel: intl.formatMessage(formMessages.clearLink),
324
- "aria-expanded": true,
325
- "aria-autocomplete": "list",
326
- "aria-controls": linkSearchListId,
327
- "aria-activedescendant": ariaActiveDescendant,
328
- "aria-describedby": screenReaderDescriptionId,
329
- "aria-readonly": isSubmitting,
330
332
  error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
331
333
  spotlightTargetName: "link-picker-search-field-spotlight-target",
334
+ "aria-readonly": isSubmitting
335
+ }, a11yList, {
332
336
  onClear: handleUrlClear,
333
337
  onKeyDown: handleKeyDown,
334
338
  onChange: handleChangeUrl
335
- }), !hideDisplayText && jsx(DisplayTextInputField, {
339
+ })), !hideDisplayText && jsx(DisplayTextInputField, {
336
340
  autoComplete: "off",
337
341
  name: "displayText",
338
342
  testId: testIds.textInputField,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "1.33.0",
3
+ "version": "1.33.1",
4
4
  "description": "Standalone link picker",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -59,8 +59,8 @@
59
59
  "codegen-analytics": "yarn run ts-analytics-codegen --command='yarn workspace @atlaskit/link-picker run codegen-analytics'"
60
60
  },
61
61
  "dependencies": {
62
- "@atlaskit/analytics-next": "^9.1.0",
63
- "@atlaskit/button": "^17.2.0",
62
+ "@atlaskit/analytics-next": "^9.2.0",
63
+ "@atlaskit/button": "^17.3.0",
64
64
  "@atlaskit/empty-state": "^7.6.0",
65
65
  "@atlaskit/form": "^9.0.3",
66
66
  "@atlaskit/frontend-utilities": "^2.7.0",
@@ -73,7 +73,7 @@
73
73
  "@atlaskit/tabs": "^14.0.0",
74
74
  "@atlaskit/textfield": "^6.0.0",
75
75
  "@atlaskit/theme": "^12.6.0",
76
- "@atlaskit/tokens": "^1.35.0",
76
+ "@atlaskit/tokens": "^1.36.0",
77
77
  "@atlaskit/tooltip": "^18.1.0",
78
78
  "@atlaskit/ufo": "^0.2.0",
79
79
  "@atlaskit/visually-hidden": "^1.2.0",
@@ -93,7 +93,7 @@
93
93
  "@af/analytics-codegen": "^0.1.0",
94
94
  "@af/integration-testing": "*",
95
95
  "@af/visual-regression": "*",
96
- "@atlaskit/dropdown-menu": "^12.2.0",
96
+ "@atlaskit/dropdown-menu": "^12.5.0",
97
97
  "@atlaskit/link-provider": "^1.7.0",
98
98
  "@atlaskit/link-test-helpers": "^6.2.0",
99
99
  "@atlaskit/primitives": "^2.0.0",