@atlaskit/smart-card 43.20.0 → 43.20.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 43.20.2
+
+### Patch Changes
+
+- [`370c2ca23ca71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/370c2ca23ca71) -
+  NAVX-2811 adding alt text to embed modal icon
+- [`bdcd4b4374105`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bdcd4b4374105) -
+  Minor improvements to how styles are applied.
+- Updated dependencies
+
+## 43.20.1
+
+### Patch Changes
+
+- [`aac6485a45d73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aac6485a45d73) -
+  NAVX-2815 adding correct role for icon button in preview modal
+
 ## 43.20.0
 
 ### Minor Changes

package/dist/cjs/extractors/common/icon/extractIcon.js

@@ -52,7 +52,6 @@ function typeToIcon(type, opts) {
     case 'atlassian:Project':
       return /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
         label: opts.title || 'project',
-        LEGACY_size: "small",
         testId: "project-icon",
         color: "currentColor"
       });

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ErroredView.js

@@ -36,7 +36,6 @@ var ErroredView = function ErroredView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
     label: "errored-warning-icon",
     color: "var(--ds-icon-warning, #E06C00)",
-    LEGACY_size: "small",
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/_react.default.createElement(_baseTextElement.default, {
     maxLines: 3,

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -34,7 +34,6 @@ var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErro
     isSelected: isSelected,
     testId: testId
   }, /*#__PURE__*/React.createElement(_statusError.default, {
-    LEGACY_size: "small",
     color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     label: "error-icon"
   }), /*#__PURE__*/React.createElement(_compiled.Box, {

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -41,7 +41,6 @@ var EmbedCardResolvedViewOld = /*#__PURE__*/_react.default.forwardRef(function (
   var linkGlyph = _react.default.useMemo(function () {
     return /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "icon",
-      LEGACY_size: "small",
       testId: "embed-card-fallback-icon",
       color: "currentColor"
     });
@@ -115,7 +114,6 @@ var EmbedCardResolvedViewUpdated = /*#__PURE__*/_react.default.forwardRef(functi
   var linkGlyph = _react.default.useMemo(function () {
     return /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "icon",
-      LEGACY_size: "small",
       testId: "embed-card-fallback-icon",
       color: "currentColor"
     });

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js

@@ -12,12 +12,12 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _ExpandedFrame = require("../../components/ExpandedFrame");
 var _ImageIcon = require("../../components/ImageIcon");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var containerStyles = null;
 var contentStyles = null;
-var descriptionStyles = null;
 var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
@@ -40,7 +40,6 @@ var UnresolvedView = function UnresolvedView(_ref) {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
       default: /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "icon",
-        LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
         color: "currentColor"
       })
@@ -92,9 +91,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, image, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), /*#__PURE__*/_react.default.createElement("span", {
-    "data-testid": "".concat(testId, "-unresolved-description"),
-    className: (0, _runtime.ax)(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    align: "center",
+    testId: "".concat(testId, "-unresolved-description")
   }, description), button)));
 };
 var _default = exports.default = UnresolvedView;

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -81,7 +81,9 @@ var LinkInfo = function LinkInfo(_ref) {
         },
         label: _messages.messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: "".concat(testId, "-url")
+        testId: "".concat(testId, "-url"),
+        role: (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? _messages.messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -188,7 +190,9 @@ var LinkInfoNew = function LinkInfoNew(_ref2) {
         },
         label: _messages.messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: "".concat(testId, "-url")
+        testId: "".concat(testId, "-url"),
+        role: (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? _messages.messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);

package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var LinkInfoButton = function LinkInfoButton(_ref) {
@@ -15,7 +17,8 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     icon = _ref.icon,
     label = _ref.label,
     onClick = _ref.onClick,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    role = _ref.role;
   var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
@@ -24,13 +27,15 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     hideTooltipOnClick: true,
     tag: "span",
     testId: "".concat(testId, "-tooltip")
-  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
     testId: "".concat(testId, "-button")
-  }));
+  }, (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? {
+    role: role
+  } : {})));
 };
 var _default = exports.default = LinkInfoButton;

package/dist/cjs/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -68,7 +68,6 @@ var CopyLinkAction = function CopyLinkAction(_ref) {
     icon: /*#__PURE__*/_react.default.createElement(_link.default, {
       color: "currentColor",
       label: "copy url",
-      LEGACY_size: "medium",
       spacing: "spacious"
     }),
     onClick: onClick,

package/dist/cjs/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -33,7 +33,6 @@ var AIFooterMetadata = exports.AIFooterMetadata = function AIFooterMetadata(_ref
   }, function (tooltipProps) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Box, tooltipProps, /*#__PURE__*/_react.default.createElement(_info.InfoIcon, {
       label: "Information",
-      LEGACY_size: "small",
       color: "var(--ds-icon-subtle, #505258)"
     }));
   }), /*#__PURE__*/_react.default.createElement(_atlassianIntelligence.default, {

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -88,14 +88,12 @@ var AtlaskitIcon = function AtlaskitIcon(_ref) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === _constants.SmartLinkSize.Large || size === _constants.SmartLinkSize.XLarge ? 'medium' : 'small',
         color: "var(--ds-icon-danger, #C9372C)"
       });
     default:
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === _constants.SmartLinkSize.Large || size === _constants.SmartLinkSize.XLarge ? 'medium' : 'small',
         size: size
       });
   }

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -12,12 +12,20 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _loadingSkeleton = require("../loading-skeleton");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   roundImg: "_2rko1rr0"
 };
+var messages = (0, _reactIntlNext.defineMessages)({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
@@ -34,6 +42,8 @@ var ImageIcon = function ImageIcon(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
 
   // If url changes, reset state
   (0, _react.useEffect)(function () {
@@ -67,7 +77,7 @@ var ImageIcon = function ImageIcon(_ref) {
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": "".concat(testId, "-image"),
-        alt: "",
+        alt: (0, _platformFeatureFlags.fg)('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width: width,
           height: height

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -19,7 +19,6 @@ var fallbackIcon = function fallbackIcon() {
   return /*#__PURE__*/_react.default.createElement(_statusError.default, {
     color: "var(--ds-icon-danger, #C9372C)",
     label: "error",
-    LEGACY_size: "small",
     testId: "errored-view-default-icon"
   });
 };

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -111,7 +111,6 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
   var renderIconPlaceholder = _react.default.useCallback(function (testId) {
     return defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "link",
-      LEGACY_size: "small",
       testId: "".concat(testId, "-default"),
       color: "currentColor"
     });

package/dist/cjs/view/LinkUrl/index.js

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Icon.js

@@ -30,7 +30,6 @@ var Icon = exports.Icon = function Icon(_ref) {
     isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
   var placeholder = defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
     label: "link",
-    LEGACY_size: "small",
     testId: "".concat(testId, "-default"),
     color: "currentColor"
   });

package/dist/es2019/extractors/common/icon/extractIcon.js

@@ -41,7 +41,6 @@ function typeToIcon(type, opts) {
     case 'atlassian:Project':
       return /*#__PURE__*/React.createElement(PeopleGroupIcon, {
         label: opts.title || 'project',
-        LEGACY_size: "small",
         testId: "project-icon",
         color: "currentColor"
       });

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ErroredView.js

@@ -24,7 +24,6 @@ const ErroredView = ({
   }), /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     color: "var(--ds-icon-warning, #E06C00)",
-    LEGACY_size: "small",
     testId: `${testId}-warning-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     maxLines: 3,

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -23,7 +23,6 @@ export const EmbedCardErroredView = ({
   isSelected: isSelected,
   testId: testId
 }, /*#__PURE__*/React.createElement(ErrorIcon, {
-  LEGACY_size: "small",
   color: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
 }), /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -32,7 +32,6 @@ const EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(({
   const text = title || (context === null || context === void 0 ? void 0 : context.text);
   const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
     label: "icon",
-    LEGACY_size: "small",
     testId: "embed-card-fallback-icon",
     color: "currentColor"
   }), []);
@@ -104,7 +103,6 @@ const EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(({
   const text = title || (context === null || context === void 0 ? void 0 : context.text);
   const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
     label: "icon",
-    LEGACY_size: "small",
     testId: "embed-card-fallback-icon",
     color: "currentColor"
   }), []);

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -4,11 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import Heading from '@atlaskit/heading';
 import LinkGlyph from '@atlaskit/icon/core/link';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
 const containerStyles = null;
 const contentStyles = null;
-const descriptionStyles = null;
 const imageStyles = null;
 const UnresolvedView = ({
   button,
@@ -32,7 +32,6 @@ const UnresolvedView = ({
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
       default: /*#__PURE__*/React.createElement(LinkGlyph, {
         label: "icon",
-        LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
         color: "currentColor"
       })
@@ -84,9 +83,9 @@ const UnresolvedView = ({
   }, image, /*#__PURE__*/React.createElement(Heading, {
     size: "large",
     testId: `${testId}-unresolved-title`
-  }, title), /*#__PURE__*/React.createElement("span", {
-    "data-testid": `${testId}-unresolved-description`,
-    className: ax(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    align: "center",
+    testId: `${testId}-unresolved-description`
   }, description), button)));
 };
 export default UnresolvedView;

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -71,7 +71,9 @@ const LinkInfo = ({
         }),
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: `${testId}-url`
+        testId: `${testId}-url`,
+        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -173,7 +175,9 @@ const LinkInfoNew = ({
         }),
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: `${testId}-url`
+        testId: `${testId}-url`,
+        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const LinkInfoButton = ({
@@ -8,7 +10,8 @@ const LinkInfoButton = ({
   icon,
   label,
   onClick,
-  testId
+  testId,
+  role
 }) => {
   const onMouseDown = useMouseDownEvent();
   const {
@@ -19,13 +22,15 @@ const LinkInfoButton = ({
     hideTooltipOnClick: true,
     tag: "span",
     testId: `${testId}-tooltip`
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
     testId: `${testId}-button`
-  }));
+  }, fg('navx-2185-smart-link-preview-modal-icon-role') ? {
+    role
+  } : {})));
 };
 export default LinkInfoButton;

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -34,7 +34,6 @@ const CopyLinkAction = ({
     icon: /*#__PURE__*/React.createElement(LinkIcon, {
       color: "currentColor",
       label: "copy url",
-      LEGACY_size: "medium",
       spacing: "spacious"
     }),
     onClick: onClick,

package/dist/es2019/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -29,7 +29,6 @@ export const AIFooterMetadata = ({
     position: "bottom"
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, tooltipProps, /*#__PURE__*/React.createElement(InfoIcon, {
     label: "Information",
-    LEGACY_size: "small",
     color: "var(--ds-icon-subtle, #505258)"
   }))), /*#__PURE__*/React.createElement(AIIcon, {
     label: "AI",

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -75,14 +75,12 @@ const AtlaskitIcon = ({
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === SmartLinkSize.Large || size === SmartLinkSize.XLarge ? 'medium' : 'small',
         color: "var(--ds-icon-danger, #C9372C)"
       });
     default:
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === SmartLinkSize.Large || size === SmartLinkSize.XLarge ? 'medium' : 'small',
         size: size
       });
   }

package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js

@@ -3,11 +3,19 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import ImageLoader from 'react-render-image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { LoadingSkeleton } from '../loading-skeleton';
 const styles = {
   roundImg: "_2rko1rr0"
 };
+const messages = defineMessages({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 const ImageIcon = ({
   defaultIcon,
   testId,
@@ -20,6 +28,9 @@ const ImageIcon = ({
   hideLoadingSkeleton = false
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
 
   // If url changes, reset state
   useEffect(() => {
@@ -51,7 +62,7 @@ const ImageIcon = ({
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": `${testId}-image`,
-        alt: "",
+        alt: fg('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width,
           height

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -12,7 +12,6 @@ const fallbackIcon = () => {
   return /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "var(--ds-icon-danger, #C9372C)",
     label: "error",
-    LEGACY_size: "small",
     testId: "errored-view-default-icon"
   });
 };

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -95,7 +95,6 @@ export const IconAndTitleLayout = ({
   const renderIconPlaceholder = React.useCallback(testId => {
     return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",
-      LEGACY_size: "small",
       testId: `${testId}-default`,
       color: "currentColor"
     });

package/dist/es2019/view/LinkUrl/index.js

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/common/Icon.js

@@ -22,7 +22,6 @@ export const Icon = ({
 }) => {
   const placeholder = defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
     label: "link",
-    LEGACY_size: "small",
     testId: `${testId}-default`,
     color: "currentColor"
   });

package/dist/esm/extractors/common/icon/extractIcon.js

@@ -45,7 +45,6 @@ function typeToIcon(type, opts) {
     case 'atlassian:Project':
       return /*#__PURE__*/React.createElement(PeopleGroupIcon, {
         label: opts.title || 'project',
-        LEGACY_size: "small",
         testId: "project-icon",
         color: "currentColor"
       });

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0"
+  packageVersion: "43.20.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/ErroredView.js

@@ -28,7 +28,6 @@ var ErroredView = function ErroredView(_ref) {
   }), /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     color: "var(--ds-icon-warning, #E06C00)",
-    LEGACY_size: "small",
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     maxLines: 3,

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -25,7 +25,6 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     isSelected: isSelected,
     testId: testId
   }, /*#__PURE__*/React.createElement(ErrorIcon, {
-    LEGACY_size: "small",
     color: "var(--ds-icon-danger, ".concat(R300, ")"),
     label: "error-icon"
   }), /*#__PURE__*/React.createElement(Box, {

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -34,7 +34,6 @@ var EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(function (_ref, emb
   var linkGlyph = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(LinkGlyph, {
       label: "icon",
-      LEGACY_size: "small",
       testId: "embed-card-fallback-icon",
       color: "currentColor"
     });
@@ -108,7 +107,6 @@ var EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(function (_ref2
   var linkGlyph = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(LinkGlyph, {
       label: "icon",
-      LEGACY_size: "small",
       testId: "embed-card-fallback-icon",
       color: "currentColor"
     });

package/dist/esm/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -1,6 +1,5 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulpv47k{gap:var(--ds-space-250,20px)}
-._18u01wug{margin-left:auto}
+
+._zulpv47k{gap:var(--ds-space-250,20px)}._18u01wug{margin-left:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19pk1wug{margin-top:auto}
 ._1bah1h6o{justify-content:center}

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -4,11 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import Heading from '@atlaskit/heading';
 import LinkGlyph from '@atlaskit/icon/core/link';
+import { Text } from '@atlaskit/primitives/compiled';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
 var containerStyles = null;
 var contentStyles = null;
-var descriptionStyles = null;
 var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
@@ -31,7 +31,6 @@ var UnresolvedView = function UnresolvedView(_ref) {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
       default: /*#__PURE__*/React.createElement(LinkGlyph, {
         label: "icon",
-        LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
         color: "currentColor"
       })
@@ -83,9 +82,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, image, /*#__PURE__*/React.createElement(Heading, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), /*#__PURE__*/React.createElement("span", {
-    "data-testid": "".concat(testId, "-unresolved-description"),
-    className: ax(["_11c82smr _y3gn1h6o"])
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    align: "center",
+    testId: "".concat(testId, "-unresolved-description")
   }, description), button)));
 };
 export default UnresolvedView;

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -72,7 +72,9 @@ var LinkInfo = function LinkInfo(_ref) {
         },
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: "".concat(testId, "-url")
+        testId: "".concat(testId, "-url"),
+        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -179,7 +181,9 @@ var LinkInfoNew = function LinkInfoNew(_ref2) {
         },
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
-        testId: "".concat(testId, "-url")
+        testId: "".concat(testId, "-url"),
+        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
+        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
       });
     }
   }, [onViewButtonClick, providerName, testId]);

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 var LinkInfoButton = function LinkInfoButton(_ref) {
@@ -8,7 +10,8 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     icon = _ref.icon,
     label = _ref.label,
     onClick = _ref.onClick,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    role = _ref.role;
   var onMouseDown = useMouseDownEvent();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -17,13 +20,15 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     hideTooltipOnClick: true,
     tag: "span",
     testId: "".concat(testId, "-tooltip")
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
     testId: "".concat(testId, "-button")
-  }));
+  }, fg('navx-2185-smart-link-preview-modal-icon-role') ? {
+    role: role
+  } : {})));
 };
 export default LinkInfoButton;

package/dist/esm/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -59,7 +59,6 @@ var CopyLinkAction = function CopyLinkAction(_ref) {
     icon: /*#__PURE__*/React.createElement(LinkIcon, {
       color: "currentColor",
       label: "copy url",
-      LEGACY_size: "medium",
       spacing: "spacious"
     }),
     onClick: onClick,

package/dist/esm/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -26,7 +26,6 @@ export var AIFooterMetadata = function AIFooterMetadata(_ref) {
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, tooltipProps, /*#__PURE__*/React.createElement(InfoIcon, {
       label: "Information",
-      LEGACY_size: "small",
       color: "var(--ds-icon-subtle, #505258)"
     }));
   }), /*#__PURE__*/React.createElement(AIIcon, {

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -81,14 +81,12 @@ var AtlaskitIcon = function AtlaskitIcon(_ref) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === SmartLinkSize.Large || size === SmartLinkSize.XLarge ? 'medium' : 'small',
         color: "var(--ds-icon-danger, #C9372C)"
       });
     default:
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        LEGACY_size: size === SmartLinkSize.Large || size === SmartLinkSize.XLarge ? 'medium' : 'small',
         size: size
       });
   }

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -4,11 +4,19 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import ImageLoader from 'react-render-image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { LoadingSkeleton } from '../loading-skeleton';
 var styles = {
   roundImg: "_2rko1rr0"
 };
+var messages = defineMessages({
+  imageAltText: {
+    id: 'smart-link.image-icon.altText',
+    defaultMessage: 'Link Icon'
+  }
+});
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
@@ -25,6 +33,8 @@ var ImageIcon = function ImageIcon(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
 
   // If url changes, reset state
   useEffect(function () {
@@ -58,7 +68,7 @@ var ImageIcon = function ImageIcon(_ref) {
       loaded: /*#__PURE__*/React.createElement("img", {
         src: url,
         "data-testid": "".concat(testId, "-image"),
-        alt: "",
+        alt: fg('navx-2811-smart-link-a11y-image-alt') ? formatMessage(messages.imageAltText) : "",
         style: {
           width: width,
           height: height

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -12,7 +12,6 @@ var fallbackIcon = function fallbackIcon() {
   return /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "var(--ds-icon-danger, #C9372C)",
     label: "error",
-    LEGACY_size: "small",
     testId: "errored-view-default-icon"
   });
 };

package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -103,7 +103,6 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
   var renderIconPlaceholder = React.useCallback(function (testId) {
     return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",
-      LEGACY_size: "small",
       testId: "".concat(testId, "-default"),
       color: "currentColor"
     });

package/dist/esm/view/LinkUrl/index.js

@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.20.0",
+  packageVersion: "43.20.1",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/esm/view/common/Icon.js

@@ -23,7 +23,6 @@ export var Icon = function Icon(_ref) {
     isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
   var placeholder = defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
     label: "link",
-    LEGACY_size: "small",
     testId: "".concat(testId, "-default"),
     color: "currentColor"
   });

package/dist/types/view/EmbedModal/components/link-info/link-info-button/index.d.ts

@@ -6,7 +6,8 @@ export type LinkInfoButtonProps = {
     icon: IconProp;
     label: MessageDescriptor;
     onClick?: () => void;
+    role?: string;
     testId?: string;
 };
-declare const LinkInfoButton: ({ content, icon, label, onClick, testId, }: LinkInfoButtonProps) => React.JSX.Element;
+declare const LinkInfoButton: ({ content, icon, label, onClick, testId, role, }: LinkInfoButtonProps) => React.JSX.Element;
 export default LinkInfoButton;

package/dist/types-ts4.5/view/EmbedModal/components/link-info/link-info-button/index.d.ts

@@ -6,7 +6,8 @@ export type LinkInfoButtonProps = {
     icon: IconProp;
     label: MessageDescriptor;
     onClick?: () => void;
+    role?: string;
     testId?: string;
 };
-declare const LinkInfoButton: ({ content, icon, label, onClick, testId, }: LinkInfoButtonProps) => React.JSX.Element;
+declare const LinkInfoButton: ({ content, icon, label, onClick, testId, role, }: LinkInfoButtonProps) => React.JSX.Element;
 export default LinkInfoButton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.20.0",
+	"version": "43.20.2",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -71,7 +71,7 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tile": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.11.0",
+		"@atlaskit/tmp-editor-statsig": "^16.12.0",
 		"@atlaskit/tokens": "^9.1.0",
 		"@atlaskit/tooltip": "^20.12.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -103,6 +103,7 @@
 		"@atlaskit/media-test-helpers": "^39.0.0",
 		"@atlaskit/react-ufo": "^4.16.0",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/a11y-jest-testing": "^0.6.0",
 		"@atlassian/analytics-tooling": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.28.0",
@@ -238,6 +239,12 @@
 		},
 		"navx-2816-a11y-fix-smart-links-headings": {
 			"type": "boolean"
+		},
+		"navx-2811-smart-link-a11y-image-alt": {
+			"type": "boolean"
+		},
+		"navx-2185-smart-link-preview-modal-icon-role": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/f74ef1bc-7240-4aac-9dc8-9dc43b502089"