@atlaskit/editor-common 76.9.0 → 76.9.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 76.9.1
+
+### Patch Changes
+
+- [#40437](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40437) [`24a1d9ae0b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24a1d9ae0b6) - [ux] Add visible labels for hyperlink input and text description input and remove placeholders because Placeholder text disappears when a user starts to type into the mentioned combobox field, thus users with cognitive impairments (such as dyslexia or attention disorders) and the elderly may face trouble remembering the purpose of the field if the label is not visible at all times as the place holder disappears as soon as users start typing.
+
 ## 76.9.0
 
 ### Minor Changes

package/dist/cjs/__tests_external__/page-objects/EditorSmartLink.js

@@ -30,7 +30,7 @@ var EditorSmartLinkPageObject = exports.EditorSmartLinkPageObject = /*#__PURE__*
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaLabels", {
       editLink: 'Edit link',

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -26,19 +26,17 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _alignLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-left"));
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
-var _messages = require("../../../messages");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
 var _LinkSearchList = _interopRequireDefault(require("../../LinkSearch/LinkSearchList"));
 var _ToolbarComponents = require("../../LinkSearch/ToolbarComponents");
 var _transformTimeStamp = require("../../LinkSearch/transformTimeStamp");
 var _utils2 = require("./utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
 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); }
 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; }
@@ -51,8 +49,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
 var RECENT_SEARCH_LIST_SIZE = exports.RECENT_SEARCH_LIST_SIZE = 5;
 var clearText = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-space-100, 8px)", "var(--ds-icon-subtle, ".concat(_colors.N90, ")"));
-var textInputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N30, ")"));
-var iconWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: ", " ", ";\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+var clearTextWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n"])));
+var containerPadding = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
+var textLabelMargin = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)");
+var inputLabel = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  font-weight: 500;\n  padding-bottom: ", ";\n"])), (0, _constants.fontSizeSmall)(), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
+var inputWrapperPosition = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   displayText: {
     id: 'fabric.editor.displayText',
@@ -79,10 +80,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
   },
-  linkAriaLabel: {
-    id: 'fabric.editor.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkVisibleLabel: {
+    id: 'fabric.editor.hyperlink.linkVisibleLabel',
+    defaultMessage: 'Paste or search for link',
+    description: 'Visible label for link input in hyperlink floating control'
+  },
+  textVisibleLabel: {
+    id: 'fabric.editor.hyperlink.textVisibleLabel',
+    defaultMessage: 'Display text (optional)',
+    description: 'Visible label for text input in hyperlink floating control'
   }
 });
 var defaultIcon = (0, _react2.jsx)(_.default, {
@@ -801,14 +807,12 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
       var _this$props5 = this.props,
         formatMessage = _this$props5.intl.formatMessage,
         activityProvider = _this$props5.activityProvider;
-      var placeholder = formatMessage(activityProvider ? _messages.linkToolbarMessages.placeholder : _messages.linkToolbarMessages.linkPlaceholder);
-      var formatLinkAddressText = formatMessage(_messages.linkToolbarMessages.linkAddress);
       var formatClearLinkText = formatMessage(messages.clearLink);
-      var formatDisplayText = formatMessage(messages.displayText);
       var screenReaderDescriptionId = 'search-recent-links-field-description';
       var linkSearchListId = 'hyperlink-search-list';
       var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
-
+      var linkSearchInputId = 'search-recent-links-field-id';
+      var displayTextInputId = 'display-text-filed-id';
       // 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
@@ -817,17 +821,14 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         "aria-label": "Hyperlink Edit",
         className: "recent-list"
       }, (0, _react2.jsx)("div", {
-        css: [_ToolbarComponents.container, !!activityProvider && _ToolbarComponents.containerWithProvider],
+        css: [_ToolbarComponents.container, !!activityProvider && _ToolbarComponents.containerWithProvider, containerPadding],
         ref: this.wrapperRef
-      }, (0, _react2.jsx)("div", {
-        css: _ToolbarComponents.inputWrapper
-      }, (0, _react2.jsx)("span", {
-        css: iconWrapper
-      }, (0, _react2.jsx)(_tooltip.default, {
-        content: formatLinkAddressText
-      }, (0, _react2.jsx)(_link.default, {
-        label: formatLinkAddressText
-      }))), screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
+      }, (0, _react2.jsx)("label", {
+        htmlFor: linkSearchInputId,
+        css: inputLabel
+      }, formatMessage(messages.linkVisibleLabel)), (0, _react2.jsx)("div", {
+        css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
+      }, screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
@@ -846,7 +847,6 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         ref: function ref(ele) {
           return _this2.urlInputContainer = ele;
         },
-        placeholder: placeholder,
         testId: 'link-url',
         onSubmit: this.handleSubmit,
         onChange: this.updateInput,
@@ -855,8 +855,11 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         },
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
-        onKeyDown: this.handleKeyDown
-      }), displayUrl && (0, _react2.jsx)(_tooltip.default, {
+        onKeyDown: this.handleKeyDown,
+        inputId: linkSearchInputId
+      }), displayUrl && (0, _react2.jsx)("div", {
+        css: clearTextWrapper
+      }, (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
       }, (0, _react2.jsx)("button", {
         type: "button",
@@ -865,27 +868,25 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         tabIndex: 0
       }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatClearLinkText
-      })))), (0, _react2.jsx)("div", {
-        css: textInputWrapper
-      }, (0, _react2.jsx)("span", {
-        css: iconWrapper
-      }, (0, _react2.jsx)(_tooltip.default, {
-        content: formatDisplayText
-      }, (0, _react2.jsx)(_alignLeft.default, {
-        label: formatDisplayText
-      }))), (0, _react2.jsx)(_ui.PanelTextInput, {
+      }))))), (0, _react2.jsx)("label", {
+        htmlFor: displayTextInputId,
+        css: [inputLabel, textLabelMargin]
+      }, formatMessage(messages.textVisibleLabel)), (0, _react2.jsx)("div", {
+        css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
+      }, (0, _react2.jsx)(_ui.PanelTextInput, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
-        placeholder: formatDisplayText,
-        ariaLabel: formatMessage(messages.linkAriaLabel),
-        testId: 'link-label',
+        testId: 'link-text',
         onChange: this.updateTextInput,
         onCancel: this.handleCancel,
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
-        onKeyDown: this.handleKeyDown
-      }), displayText && (0, _react2.jsx)(_tooltip.default, {
+        onKeyDown: this.handleKeyDown,
+        inputId: displayTextInputId
+      }), displayText && (0, _react2.jsx)("div", {
+        css: clearTextWrapper
+      }, (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
       }, (0, _react2.jsx)("button", {
         type: "button",
@@ -894,7 +895,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         onKeyDown: this.handleClearTextKeyDown
       }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatMessage(messages.clearText)
-      })))), (0, _react2.jsx)("div", {
+      }))))), (0, _react2.jsx)("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",

package/dist/cjs/link/LinkSearch/LinkSearchList.js

@@ -14,12 +14,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _colors = require("@atlaskit/theme/colors");
 var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 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); }; }
 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; } }
-var listContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+var listContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n  margin-top: ", ";\n  border-top: 1px solid ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var spinnerContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
 var linkSearchList = exports.linkSearchList = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
 var LinkSearchList = exports.default = /*#__PURE__*/function (_PureComponent) {

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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); }; }
 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 */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/PanelTextInput/index.js

@@ -119,7 +119,8 @@ var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
         ariaControls = _this$props2.ariaControls,
         ariaExpanded = _this$props2.ariaExpanded,
         ariaAutoComplete = _this$props2.ariaAutoComplete,
-        role = _this$props2.role;
+        role = _this$props2.role,
+        inputId = _this$props2.inputId;
       var value = this.state.value;
       return (0, _react2.jsx)("input", {
         css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
@@ -139,7 +140,8 @@ var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
         onBlur: this.onBlur,
         ref: this.handleRef,
         maxLength: maxLength,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        id: inputId
       });
     }
   }, {

package/dist/cjs/ui/PanelTextInput/styles.js

@@ -11,7 +11,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-var panelTextInput = exports.panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
+var panelTextInput = exports.panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B100, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 var panelTextInputWithCustomWidth = exports.panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
 };

package/dist/es2019/__tests_external__/page-objects/EditorSmartLink.js

@@ -12,7 +12,7 @@ export class EditorSmartLinkPageObject extends InProductTestPageObject {
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     _defineProperty(this, "ariaLabels", {
       editLink: 'Edit link',

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
@@ -8,12 +9,10 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { N30, N80, N90 } from '@atlaskit/theme/colors';
+import { N200, N90 } from '@atlaskit/theme/colors';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
-import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../messages';
 import { Announcer, PanelTextInput } from '../../../ui';
 import { browser, normalizeUrl } from '../../../utils';
 import LinkSearchList from '../../LinkSearch/LinkSearchList';
@@ -44,15 +43,24 @@ const clearText = css`
   background: transparent;
   border: none;
 `;
-const textInputWrapper = css`
-  ${inputWrapper};
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-  border-bottom: 1px solid ${`var(--ds-border, ${N30})`};
+const clearTextWrapper = css`
+  position: absolute;
+  right: 0;
+`;
+const containerPadding = css`
+  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"};
 `;
-const iconWrapper = css`
-  color: ${`var(--ds-icon-subtle, ${N80})`};
-  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-  width: 18px;
+const textLabelMargin = css`
+  margin-top: ${"var(--ds-space-150, 12px)"};
+`;
+const inputLabel = css`
+  font-size: ${fontSizeSmall()}px;
+  color: ${`var(--ds-text-subtlest, ${N200})`};
+  font-weight: 500;
+  padding-bottom: ${"var(--ds-space-050, 4px)"};
+`;
+const inputWrapperPosition = css`
+  position: relative;
 `;
 export const messages = defineMessages({
   displayText: {
@@ -80,10 +88,15 @@ export const messages = defineMessages({
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
   },
-  linkAriaLabel: {
-    id: 'fabric.editor.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkVisibleLabel: {
+    id: 'fabric.editor.hyperlink.linkVisibleLabel',
+    defaultMessage: 'Paste or search for link',
+    description: 'Visible label for link input in hyperlink floating control'
+  },
+  textVisibleLabel: {
+    id: 'fabric.editor.hyperlink.textVisibleLabel',
+    defaultMessage: 'Display text (optional)',
+    description: 'Visible label for text input in hyperlink floating control'
   }
 });
 const defaultIcon = jsx(Page16Icon, {
@@ -663,14 +676,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       },
       activityProvider
     } = this.props;
-    const placeholder = formatMessage(activityProvider ? linkToolbarCommonMessages.placeholder : linkToolbarCommonMessages.linkPlaceholder);
-    const formatLinkAddressText = formatMessage(linkToolbarCommonMessages.linkAddress);
     const formatClearLinkText = formatMessage(messages.clearLink);
-    const formatDisplayText = formatMessage(messages.displayText);
     const screenReaderDescriptionId = 'search-recent-links-field-description';
     const linkSearchListId = 'hyperlink-search-list';
     const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : '';
-
+    const linkSearchInputId = 'search-recent-links-field-id';
+    const displayTextInputId = 'display-text-filed-id';
     // 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
@@ -679,17 +690,14 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       "aria-label": "Hyperlink Edit",
       className: "recent-list"
     }, jsx("div", {
-      css: [container, !!activityProvider && containerWithProvider],
+      css: [container, !!activityProvider && containerWithProvider, containerPadding],
       ref: this.wrapperRef
-    }, jsx("div", {
-      css: inputWrapper
-    }, jsx("span", {
-      css: iconWrapper
-    }, jsx(Tooltip, {
-      content: formatLinkAddressText
-    }, jsx(LinkIcon, {
-      label: formatLinkAddressText
-    }))), screenReaderText && jsx(Announcer, {
+    }, jsx("label", {
+      htmlFor: linkSearchInputId,
+      css: inputLabel
+    }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
+      css: [inputWrapper, inputWrapperPosition]
+    }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
       ariaRelevant: "additions",
@@ -706,7 +714,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       ariaAutoComplete: true,
       describedById: screenReaderDescriptionId,
       ref: ele => this.urlInputContainer = ele,
-      placeholder: placeholder,
       testId: 'link-url',
       onSubmit: this.handleSubmit,
       onChange: this.updateInput,
@@ -715,8 +722,11 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       },
       onCancel: this.handleCancel,
       defaultValue: displayUrl,
-      onKeyDown: this.handleKeyDown
-    }), displayUrl && jsx(Tooltip, {
+      onKeyDown: this.handleKeyDown,
+      inputId: linkSearchInputId
+    }), displayUrl && jsx("div", {
+      css: clearTextWrapper
+    }, jsx(Tooltip, {
       content: formatClearLinkText
     }, jsx("button", {
       type: "button",
@@ -725,25 +735,23 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       tabIndex: 0
     }, jsx(CrossCircleIcon, {
       label: formatClearLinkText
-    })))), jsx("div", {
-      css: textInputWrapper
-    }, jsx("span", {
-      css: iconWrapper
-    }, jsx(Tooltip, {
-      content: formatDisplayText
-    }, jsx(EditorAlignLeftIcon, {
-      label: formatDisplayText
-    }))), jsx(PanelTextInput, {
+    }))))), jsx("label", {
+      htmlFor: displayTextInputId,
+      css: [inputLabel, textLabelMargin]
+    }, formatMessage(messages.textVisibleLabel)), jsx("div", {
+      css: [inputWrapper, inputWrapperPosition]
+    }, jsx(PanelTextInput, {
       ref: ele => this.displayTextInputContainer = ele,
-      placeholder: formatDisplayText,
-      ariaLabel: formatMessage(messages.linkAriaLabel),
-      testId: 'link-label',
+      testId: 'link-text',
       onChange: this.updateTextInput,
       onCancel: this.handleCancel,
       defaultValue: displayText,
       onSubmit: this.handleSubmit,
-      onKeyDown: this.handleKeyDown
-    }), displayText && jsx(Tooltip, {
+      onKeyDown: this.handleKeyDown,
+      inputId: displayTextInputId
+    }), displayText && jsx("div", {
+      css: clearTextWrapper
+    }, jsx(Tooltip, {
       content: formatMessage(messages.clearText)
     }, jsx("button", {
       type: "button",
@@ -752,7 +760,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onKeyDown: this.handleClearTextKeyDown
     }, jsx(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
-    })))), jsx("div", {
+    }))))), jsx("div", {
       css: visuallyHiddenStyles,
       "aria-live": "polite",
       "aria-atomic": "true",

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -2,9 +2,12 @@
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
+import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
 const listContainer = css`
   padding-top: 0;
+  margin-top: ${"var(--ds-space-150, 12px)"};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
 `;
 const spinnerContainer = css`
   text-align: center;

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.9.0";
+const packageVersion = "76.9.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.9.0";
+const packageVersion = "76.9.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/PanelTextInput/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
@@ -98,7 +99,8 @@ export default class PanelTextInput extends PureComponent {
       ariaControls,
       ariaExpanded,
       ariaAutoComplete,
-      role
+      role,
+      inputId
     } = this.props;
     const {
       value
@@ -121,7 +123,8 @@ export default class PanelTextInput extends PureComponent {
       onBlur: this.onBlur,
       ref: this.handleRef,
       maxLength: maxLength,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      id: inputId
     });
   }
   focus() {

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -1,18 +1,19 @@
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N100, N400 } from '@atlaskit/theme/colors';
+import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 export const panelTextInput = css`
   input& {
     background: transparent;
-    border: 0;
+    border: 2px solid ${`var(--ds-border, ${N30})`};
     border-radius: 0;
     box-sizing: content-box;
     color: ${`var(--ds-text-subtle, ${N400})`};
     flex-grow: 1;
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
-    padding: 0;
+    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"}
+      ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"};
     min-width: 145px;
 
     /* Hides IE10+ built-in [x] clear input button */
@@ -22,6 +23,7 @@ export const panelTextInput = css`
 
     &:focus {
       outline: none;
+      border-color: ${`var(--ds-border-focused, ${B100})`};
     }
 
     &::placeholder {

package/dist/esm/__tests_external__/page-objects/EditorSmartLink.js

@@ -24,7 +24,7 @@ export var EditorSmartLinkPageObject = /*#__PURE__*/function (_InProductTestPage
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     _defineProperty(_assertThisInitialized(_this), "ariaLabels", {
       editLink: 'Edit link',

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -9,11 +9,12 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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 */
+
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
@@ -22,12 +23,10 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { N30, N80, N90 } from '@atlaskit/theme/colors';
+import { N200, N90 } from '@atlaskit/theme/colors';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
-import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../messages';
 import { Announcer, PanelTextInput } from '../../../ui';
 import { browser, normalizeUrl } from '../../../utils';
 import LinkSearchList from '../../LinkSearch/LinkSearchList';
@@ -42,8 +41,11 @@ import { filterUniqueItems, mapContentTypeToIcon, sha1, wordCount } from './util
 export var visuallyHiddenStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
 export var RECENT_SEARCH_LIST_SIZE = 5;
 var clearText = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-space-100, 8px)", "var(--ds-icon-subtle, ".concat(N90, ")"));
-var textInputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, "var(--ds-border, ".concat(N30, ")"), "var(--ds-border, ".concat(N30, ")"));
-var iconWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: ", " ", ";\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+var clearTextWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n"])));
+var containerPadding = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
+var textLabelMargin = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)");
+var inputLabel = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  font-weight: 500;\n  padding-bottom: ", ";\n"])), fontSizeSmall(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
+var inputWrapperPosition = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',
@@ -70,10 +72,15 @@ export var messages = defineMessages({
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
   },
-  linkAriaLabel: {
-    id: 'fabric.editor.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkVisibleLabel: {
+    id: 'fabric.editor.hyperlink.linkVisibleLabel',
+    defaultMessage: 'Paste or search for link',
+    description: 'Visible label for link input in hyperlink floating control'
+  },
+  textVisibleLabel: {
+    id: 'fabric.editor.hyperlink.textVisibleLabel',
+    defaultMessage: 'Display text (optional)',
+    description: 'Visible label for text input in hyperlink floating control'
   }
 });
 var defaultIcon = jsx(Page16Icon, {
@@ -792,14 +799,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       var _this$props5 = this.props,
         formatMessage = _this$props5.intl.formatMessage,
         activityProvider = _this$props5.activityProvider;
-      var placeholder = formatMessage(activityProvider ? linkToolbarCommonMessages.placeholder : linkToolbarCommonMessages.linkPlaceholder);
-      var formatLinkAddressText = formatMessage(linkToolbarCommonMessages.linkAddress);
       var formatClearLinkText = formatMessage(messages.clearLink);
-      var formatDisplayText = formatMessage(messages.displayText);
       var screenReaderDescriptionId = 'search-recent-links-field-description';
       var linkSearchListId = 'hyperlink-search-list';
       var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
-
+      var linkSearchInputId = 'search-recent-links-field-id';
+      var displayTextInputId = 'display-text-filed-id';
       // 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
@@ -808,17 +813,14 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         "aria-label": "Hyperlink Edit",
         className: "recent-list"
       }, jsx("div", {
-        css: [container, !!activityProvider && containerWithProvider],
+        css: [container, !!activityProvider && containerWithProvider, containerPadding],
         ref: this.wrapperRef
-      }, jsx("div", {
-        css: inputWrapper
-      }, jsx("span", {
-        css: iconWrapper
-      }, jsx(Tooltip, {
-        content: formatLinkAddressText
-      }, jsx(LinkIcon, {
-        label: formatLinkAddressText
-      }))), screenReaderText && jsx(Announcer, {
+      }, jsx("label", {
+        htmlFor: linkSearchInputId,
+        css: inputLabel
+      }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
+        css: [inputWrapper, inputWrapperPosition]
+      }, screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
@@ -837,7 +839,6 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         ref: function ref(ele) {
           return _this2.urlInputContainer = ele;
         },
-        placeholder: placeholder,
         testId: 'link-url',
         onSubmit: this.handleSubmit,
         onChange: this.updateInput,
@@ -846,8 +847,11 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         },
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
-        onKeyDown: this.handleKeyDown
-      }), displayUrl && jsx(Tooltip, {
+        onKeyDown: this.handleKeyDown,
+        inputId: linkSearchInputId
+      }), displayUrl && jsx("div", {
+        css: clearTextWrapper
+      }, jsx(Tooltip, {
         content: formatClearLinkText
       }, jsx("button", {
         type: "button",
@@ -856,27 +860,25 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         tabIndex: 0
       }, jsx(CrossCircleIcon, {
         label: formatClearLinkText
-      })))), jsx("div", {
-        css: textInputWrapper
-      }, jsx("span", {
-        css: iconWrapper
-      }, jsx(Tooltip, {
-        content: formatDisplayText
-      }, jsx(EditorAlignLeftIcon, {
-        label: formatDisplayText
-      }))), jsx(PanelTextInput, {
+      }))))), jsx("label", {
+        htmlFor: displayTextInputId,
+        css: [inputLabel, textLabelMargin]
+      }, formatMessage(messages.textVisibleLabel)), jsx("div", {
+        css: [inputWrapper, inputWrapperPosition]
+      }, jsx(PanelTextInput, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
-        placeholder: formatDisplayText,
-        ariaLabel: formatMessage(messages.linkAriaLabel),
-        testId: 'link-label',
+        testId: 'link-text',
         onChange: this.updateTextInput,
         onCancel: this.handleCancel,
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
-        onKeyDown: this.handleKeyDown
-      }), displayText && jsx(Tooltip, {
+        onKeyDown: this.handleKeyDown,
+        inputId: displayTextInputId
+      }), displayText && jsx("div", {
+        css: clearTextWrapper
+      }, jsx(Tooltip, {
         content: formatMessage(messages.clearText)
       }, jsx("button", {
         type: "button",
@@ -885,7 +887,7 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.handleClearTextKeyDown
       }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clearText)
-      })))), jsx("div", {
+      }))))), jsx("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",

package/dist/esm/link/LinkSearch/LinkSearchList.js

@@ -11,8 +11,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
+import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
-var listContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+var listContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n  margin-top: ", ";\n  border-top: 1px solid ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-border, ".concat(N30, ")"));
 var spinnerContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
 export var linkSearchList = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -19,7 +19,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/PanelTextInput/index.js

@@ -9,6 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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 */
+
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
@@ -113,7 +114,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         ariaControls = _this$props2.ariaControls,
         ariaExpanded = _this$props2.ariaExpanded,
         ariaAutoComplete = _this$props2.ariaAutoComplete,
-        role = _this$props2.role;
+        role = _this$props2.role,
+        inputId = _this$props2.inputId;
       var value = this.state.value;
       return jsx("input", {
         css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
@@ -133,7 +135,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         onBlur: this.onBlur,
         ref: this.handleRef,
         maxLength: maxLength,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        id: inputId
       });
     }
   }, {

package/dist/esm/ui/PanelTextInput/styles.js

@@ -2,9 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N100, N400 } from '@atlaskit/theme/colors';
+import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-text-subtlest, ".concat(N100, ")"));
+export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B100, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"));
 export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
 };

package/dist/types/__tests_external__/page-objects/EditorSmartLink.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="cypress" />
 /// <reference types="cypress" />
 /// <reference types="cypress" />
-import { CypressType, InProductTestPageObject } from '@atlaskit/in-product-testing';
+import type { CypressType } from '@atlaskit/in-product-testing';
+import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 import type { CardAppearance } from '@atlaskit/smart-card';
-import { EditorPageObject } from './Editor';
+import type { EditorPageObject } from './Editor';
 export declare class EditorSmartLinkPageObject extends InProductTestPageObject {
     protected cy: CypressType;
     private editor;

package/dist/types/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.d.ts

@@ -1,14 +1,13 @@
-/** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { ActivityProvider } from '@atlaskit/activity-provider';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ActivityProvider } from '@atlaskit/activity-provider';
+import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HyperlinkState } from '../../../link';
 import type { SearchProvider } from '../../../provider-factory';
 import type { Command, LinkInputType } from '../../../types';
-import { LinkSearchListItemData } from '../../LinkSearch/types';
+import type { LinkSearchListItemData } from '../../LinkSearch/types';
 /**
  * Visible only to screenreaders. Use when there is a need
  * to provide more context to a non-sighted user.
@@ -41,7 +40,12 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    linkAriaLabel: {
+    linkVisibleLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    textVisibleLabel: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/types/link/LinkSearch/LinkSearchList.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { LinkSearchListItemData } from './types';
+import type { LinkSearchListItemData } from './types';
 export declare const linkSearchList: import("@emotion/react").SerializedStyles;
 export interface Props {
     items?: LinkSearchListItemData[];

package/dist/types/ui/PanelTextInput/index.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { FocusEvent, KeyboardEvent, PureComponent } from 'react';
+import type { FocusEvent, KeyboardEvent } from 'react';
+import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     autoFocus?: boolean | FocusOptions;
@@ -23,6 +24,7 @@ export interface Props {
     ariaControls?: string;
     role?: string;
     ariaAutoComplete?: boolean;
+    inputId?: string;
 }
 export interface State {
     value?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "76.9.0",
+  "version": "76.9.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"