@atlaskit/link-picker 1.10.1 → 1.10.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.10.3
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 1.10.2
+
+### Patch Changes
+
+- [`8a538989c8d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a538989c8d) - [ux] Updated label and Placeholder messages
+
 ## 1.10.1
 
 ### Patch Changes

package/dist/cjs/ui/link-picker/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = exports.CONTACT_SUPPORT_LINK = void 0;
+exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -53,8 +53,6 @@ var _browser = require("./browser");
 
 var _announcer = _interopRequireDefault(require("./announcer"));
 
-var _transformTimeStamp = require("./transformTimeStamp");
-
 var _linkSearchList = _interopRequireWildcard(require("./link-search-list"));
 
 var _linkSearchError = _interopRequireWildcard(require("./link-search-error"));
@@ -73,8 +71,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
-var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
-exports.CONTACT_SUPPORT_LINK = CONTACT_SUPPORT_LINK;
 
 var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
@@ -205,9 +201,9 @@ function LinkPicker(_ref) {
     });
   }, []);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var keyCode = event.keyCode;
-    var KEY_CODE_ARROW_DOWN = 40;
-    var KEY_CODE_ARROW_UP = 38;
+    var key = event.key;
+    var KEY_ARROW_DOWN = 'ArrowDown';
+    var KEY_ARROW_UP = 'ArrowUp';
 
     if (!items || !items.length) {
       return;
@@ -215,14 +211,14 @@ function LinkPicker(_ref) {
 
     var updatedIndex = activeIndex;
 
-    switch (keyCode) {
-      case KEY_CODE_ARROW_DOWN:
+    switch (key) {
+      case KEY_ARROW_DOWN:
         // down
         event.preventDefault();
         updatedIndex = (activeIndex + 1) % items.length;
         break;
 
-      case KEY_CODE_ARROW_UP:
+      case KEY_ARROW_UP:
         // up
         event.preventDefault();
         updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
@@ -231,7 +227,7 @@ function LinkPicker(_ref) {
 
     var item = items[updatedIndex];
 
-    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
+    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
       /**
        * Manually track that the url has been updated using searchResult method
        */
@@ -331,14 +327,14 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
-  var linkPlaceHolder = isActivePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder;
+  var messages = isActivePlugin ? _messages.searchMessages : _messages.linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
   var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
-  var screenReaderText = _browser.browser.safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var screenReaderText = _browser.browser.safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   var searchIcon = isActivePlugin && (0, _react2.jsx)("span", {
     css: _styled.searchIconStyles,
     "data-testid": testIds.searchIcon
@@ -357,23 +353,23 @@ function LinkPicker(_ref) {
     delay: 250
   }), (0, _react2.jsx)(_visuallyHidden.default, {
     id: screenReaderDescriptionId
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.searchLinkAriaDescription)), (0, _react2.jsx)(LinkInputField, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.linkAriaLabel)), (0, _react2.jsx)(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
     testId: testIds.urlInputField,
-    label: intl.formatMessage(_messages.messages.linkLabel),
-    placeholder: intl.formatMessage(linkPlaceHolder),
+    label: intl.formatMessage(messages.linkLabel),
+    placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
     elemBeforeInput: searchIcon,
-    clearLabel: intl.formatMessage(_messages.messages.clearLink),
+    clearLabel: intl.formatMessage(_messages.formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
-    error: invalidUrl ? intl.formatMessage(_messages.messages.linkInvalid) : null,
+    error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
@@ -382,10 +378,10 @@ function LinkPicker(_ref) {
     name: "displayText",
     testId: testIds.textInputField,
     value: displayText,
-    label: intl.formatMessage(_messages.messages.linkTextLabel),
-    placeholder: intl.formatMessage(_messages.messages.linkTextPlaceholder),
-    clearLabel: intl.formatMessage(_messages.messages.clearText),
-    "aria-label": intl.formatMessage(_messages.messages.linkAriaLabel),
+    label: intl.formatMessage(_messages.linkTextMessages.linkTextLabel),
+    placeholder: intl.formatMessage(_messages.linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(_messages.linkTextMessages.clearLinkText),
+    "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
@@ -430,17 +426,4 @@ function LinkPicker(_ref) {
 
 var _default = (0, _analytics2.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(LinkPicker));
 
-exports.default = _default;
-
-function getScreenReaderText(items, selectedIndex, intl) {
-  if (items.length && selectedIndex > -1) {
-    var _items$selectedIndex = items[selectedIndex],
-        name = _items$selectedIndex.name,
-        container = _items$selectedIndex.container,
-        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
-        lastViewedDate = _items$selectedIndex.lastViewedDate;
-    var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-    var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-    return [name, container, formattedDate].filter(Boolean).join(', ');
-  }
-}
+exports.default = _default;

package/dist/cjs/ui/link-picker/messages.js

@@ -3,61 +3,83 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.messages = void 0;
+exports.searchMessages = exports.messages = exports.linkTextMessages = exports.linkMessages = exports.formMessages = void 0;
 
 var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntlNext.defineMessages)({
-  placeholder: {
-    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+var searchMessages = (0, _reactIntlNext.defineMessages)({
+  linkLabel: {
+    id: 'fabric.linkPicker.search.linkLabel',
     defaultMessage: 'Search or paste a link',
-    description: 'Search or paste a link'
-  },
-  linkPlaceholder: {
-    id: 'fabric.linkPicker.linkPlaceholder',
-    defaultMessage: 'Paste link',
-    description: 'Create a new link by pasting a URL.'
+    description: 'Label for the link input'
   },
-  linkTextPlaceholder: {
-    id: 'fabric.linkPicker.linkTextPlaceholder',
-    defaultMessage: 'Add a description',
-    description: 'Text to display'
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.search.linkAriaLabel',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.search.linkPlaceholder',
+    defaultMessage: 'Find recent links or paste a new link',
+    description: 'Placeholder text for the link input'
+  }
+});
+exports.searchMessages = searchMessages;
+var linkMessages = (0, _reactIntlNext.defineMessages)({
   linkLabel: {
-    id: 'fabric.linkPicker.linkAddress',
+    id: 'fabric.linkPicker.linkLabel',
     defaultMessage: 'Link',
-    description: 'Link Label'
+    description: 'Label for the link input'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.linkAriaLabel',
+    defaultMessage: 'Type or paste a link into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste a link',
+    description: 'Placeholder text for the link input'
+  }
+});
+exports.linkMessages = linkMessages;
+var formMessages = (0, _reactIntlNext.defineMessages)({
   linkInvalid: {
     id: 'fabric.linkPicker.linkInvalid',
     defaultMessage: 'Enter a valid URL.',
-    description: 'Input Error the URL is invalid'
-  },
-  linkTextLabel: {
-    id: 'fabric.linkPicker.displayText',
-    defaultMessage: 'Link text',
-    description: 'Link text label'
-  },
-  clearText: {
-    id: 'fabric.linkPicker.clearLinkText',
-    defaultMessage: 'Clear text',
-    description: 'Clears text on the link toolbar'
+    description: 'Error message shown for invalid links'
   },
   clearLink: {
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear link',
-    description: 'Clears link in the link toolbar'
+    description: 'Tooltip message for link input clear button'
+  }
+});
+exports.formMessages = formMessages;
+var linkTextMessages = (0, _reactIntlNext.defineMessages)({
+  linkTextLabel: {
+    id: 'fabric.linkPicker.linkTextLabel',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label for the link description input'
   },
-  searchLinkAriaDescription: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
-    defaultMessage: 'Suggestions will appear below as you type into the field',
-    description: 'Describes what the search field does for screen reader users.'
+  linkTextAriaLabel: {
+    id: 'fabric.linkPicker.linkTextAriaLabel',
+    defaultMessage: 'Link description',
+    description: 'Aria label for the link description input'
   },
-  linkAriaLabel: {
-    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Placeholder text for the link description input'
   },
+  clearLinkText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Tooltip message for link input clear button'
+  }
+});
+exports.linkTextMessages = linkTextMessages;
+var messages = (0, _reactIntlNext.defineMessages)({
   timeUpdated: {
     id: 'fabric.linkPicker.time.updated',
     defaultMessage: 'Updated',

package/dist/cjs/ui/link-picker/utils.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUndoEvent = exports.isRedoEvent = exports.getDataSource = void 0;
+exports.getDataSource = void 0;
+exports.getScreenReaderText = getScreenReaderText;
+exports.isUndoEvent = exports.isRedoEvent = void 0;
 
 var _browser = require("./browser");
 
+var _transformTimeStamp = require("./transformTimeStamp");
+
 var KeyZCode = 90;
 var KeyYCode = 89;
 
@@ -36,4 +40,17 @@ var getDataSource = function getDataSource(item, plugin) {
   return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
 };
 
-exports.getDataSource = getDataSource;
+exports.getDataSource = getDataSource;
+
+function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
+    var _items$selectedIndex = items[selectedIndex],
+        name = _items$selectedIndex.name,
+        container = _items$selectedIndex.container,
+        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
+        lastViewedDate = _items$selectedIndex.lastViewedDate;
+    var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
+    var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+    return [name, container, formattedDate].filter(Boolean).join(', ');
+  }
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.1",
+	"version": "1.10.3",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/index.js

@@ -15,18 +15,16 @@ import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
-import { messages } from './messages';
+import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
 import TextInput from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
-import { transformTimeStamp } from './transformTimeStamp';
 import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
-import { getDataSource } from './utils';
+import { getDataSource, getScreenReaderText } from './utils';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const testIds = {
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
@@ -154,10 +152,10 @@ function LinkPicker({
   }, []);
   const handleKeyDown = useCallback(event => {
     const {
-      keyCode
+      key
     } = event;
-    const KEY_CODE_ARROW_DOWN = 40;
-    const KEY_CODE_ARROW_UP = 38;
+    const KEY_ARROW_DOWN = 'ArrowDown';
+    const KEY_ARROW_UP = 'ArrowUp';
 
     if (!items || !items.length) {
       return;
@@ -165,14 +163,14 @@ function LinkPicker({
 
     let updatedIndex = activeIndex;
 
-    switch (keyCode) {
-      case KEY_CODE_ARROW_DOWN:
+    switch (key) {
+      case KEY_ARROW_DOWN:
         // down
         event.preventDefault();
         updatedIndex = (activeIndex + 1) % items.length;
         break;
 
-      case KEY_CODE_ARROW_UP:
+      case KEY_ARROW_UP:
         // up
         event.preventDefault();
         updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
@@ -181,7 +179,7 @@ function LinkPicker({
 
     const item = items[updatedIndex];
 
-    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
+    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
       /**
        * Manually track that the url has been updated using searchResult method
        */
@@ -280,7 +278,7 @@ function LinkPicker({
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
-  const linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
+  const messages = isActivePlugin ? searchMessages : linkMessages;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
   const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -306,23 +304,23 @@ function LinkPicker({
     delay: 250
   }), jsx(VisuallyHidden, {
     id: screenReaderDescriptionId
-  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(LinkInputField, {
+  }, jsx(FormattedMessage, messages.linkAriaLabel)), jsx(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
     testId: testIds.urlInputField,
     label: intl.formatMessage(messages.linkLabel),
-    placeholder: intl.formatMessage(linkPlaceHolder),
+    placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
     elemBeforeInput: searchIcon,
-    clearLabel: intl.formatMessage(messages.clearLink),
+    clearLabel: intl.formatMessage(formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
-    error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
+    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
@@ -331,10 +329,10 @@ function LinkPicker({
     name: "displayText",
     testId: testIds.textInputField,
     value: displayText,
-    label: intl.formatMessage(messages.linkTextLabel),
-    placeholder: intl.formatMessage(messages.linkTextPlaceholder),
-    clearLabel: intl.formatMessage(messages.clearText),
-    "aria-label": intl.formatMessage(messages.linkAriaLabel),
+    label: intl.formatMessage(linkTextMessages.linkTextLabel),
+    placeholder: intl.formatMessage(linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
+    "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
@@ -373,18 +371,4 @@ function LinkPicker({
   }));
 }
 
-export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
-
-function getScreenReaderText(items, selectedIndex, intl) {
-  if (items.length && selectedIndex > -1) {
-    const {
-      name,
-      container,
-      lastUpdatedDate,
-      lastViewedDate
-    } = items[selectedIndex];
-    const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-    const formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-    return [name, container, formattedDate].filter(Boolean).join(', ');
-  }
-}
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));

package/dist/es2019/ui/link-picker/messages.js

@@ -1,55 +1,73 @@
 import { defineMessages } from 'react-intl-next';
-export const messages = defineMessages({
-  placeholder: {
-    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+export const searchMessages = defineMessages({
+  linkLabel: {
+    id: 'fabric.linkPicker.search.linkLabel',
     defaultMessage: 'Search or paste a link',
-    description: 'Search or paste a link'
-  },
-  linkPlaceholder: {
-    id: 'fabric.linkPicker.linkPlaceholder',
-    defaultMessage: 'Paste link',
-    description: 'Create a new link by pasting a URL.'
+    description: 'Label for the link input'
   },
-  linkTextPlaceholder: {
-    id: 'fabric.linkPicker.linkTextPlaceholder',
-    defaultMessage: 'Add a description',
-    description: 'Text to display'
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.search.linkAriaLabel',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.search.linkPlaceholder',
+    defaultMessage: 'Find recent links or paste a new link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export const linkMessages = defineMessages({
   linkLabel: {
-    id: 'fabric.linkPicker.linkAddress',
+    id: 'fabric.linkPicker.linkLabel',
     defaultMessage: 'Link',
-    description: 'Link Label'
+    description: 'Label for the link input'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.linkAriaLabel',
+    defaultMessage: 'Type or paste a link into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste a link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export const formMessages = defineMessages({
   linkInvalid: {
     id: 'fabric.linkPicker.linkInvalid',
     defaultMessage: 'Enter a valid URL.',
-    description: 'Input Error the URL is invalid'
-  },
-  linkTextLabel: {
-    id: 'fabric.linkPicker.displayText',
-    defaultMessage: 'Link text',
-    description: 'Link text label'
-  },
-  clearText: {
-    id: 'fabric.linkPicker.clearLinkText',
-    defaultMessage: 'Clear text',
-    description: 'Clears text on the link toolbar'
+    description: 'Error message shown for invalid links'
   },
   clearLink: {
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear link',
-    description: 'Clears link in the link toolbar'
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export const linkTextMessages = defineMessages({
+  linkTextLabel: {
+    id: 'fabric.linkPicker.linkTextLabel',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label for the link description input'
   },
-  searchLinkAriaDescription: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
-    defaultMessage: 'Suggestions will appear below as you type into the field',
-    description: 'Describes what the search field does for screen reader users.'
+  linkTextAriaLabel: {
+    id: 'fabric.linkPicker.linkTextAriaLabel',
+    defaultMessage: 'Link description',
+    description: 'Aria label for the link description input'
   },
-  linkAriaLabel: {
-    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Placeholder text for the link description input'
   },
+  clearLinkText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export const messages = defineMessages({
   timeUpdated: {
     id: 'fabric.linkPicker.time.updated',
     defaultMessage: 'Updated',

package/dist/es2019/ui/link-picker/utils.js

@@ -1,4 +1,5 @@
 import { browser } from './browser';
+import { transformTimeStamp } from './transformTimeStamp';
 const KeyZCode = 90;
 const KeyYCode = 89;
 export const isUndoEvent = e => {
@@ -19,4 +20,17 @@ export const getDataSource = (item, plugin) => {
   var _ref, _item$meta$source, _item$meta, _plugin$meta;
 
   return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
-};
+};
+export function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
+    const {
+      name,
+      container,
+      lastUpdatedDate,
+      lastViewedDate
+    } = items[selectedIndex];
+    const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+    const formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+    return [name, container, formattedDate].filter(Boolean).join(', ');
+  }
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.1",
+	"version": "1.10.3",
 	"sideEffects": false
 }