@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 +6 -0
- package/dist/cjs/ui/index.js +1 -1
- package/dist/cjs/ui/link-picker/index.js +15 -11
- package/dist/es2019/ui/index.js +1 -1
- package/dist/es2019/ui/link-picker/index.js +16 -12
- package/dist/esm/ui/index.js +1 -1
- package/dist/esm/ui/link-picker/index.js +16 -12
- package/package.json +5 -5
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
|
package/dist/cjs/ui/index.js
CHANGED
|
@@ -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.
|
|
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,
|
package/dist/es2019/ui/index.js
CHANGED
|
@@ -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,
|
package/dist/esm/ui/index.js
CHANGED
|
@@ -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.
|
|
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.
|
|
63
|
-
"@atlaskit/button": "^17.
|
|
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.
|
|
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.
|
|
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",
|