@atlaskit/avatar 21.1.10 → 21.2.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/avatar
 
+## 21.2.1
+
+### Patch Changes
+
+- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
+
+## 21.2.0
+
+### Minor Changes
+
+- [`51928bbe70c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51928bbe70c) - [ux] Removes status/presence indicator images from the accessibility tree for the Avatar component.
+
+### Patch Changes
+
+- [`64f11e50567`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64f11e50567) - [ux] Adds accessible name to standalone Presence and Status components.
+- [`0ecd2a2238b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ecd2a2238b) - Add more precision to custom component check for status and presence
+
 ## 21.1.10
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -18,10 +17,15 @@ var _Presence = require("./Presence");
 var _Status = require("./Status");
 var _utilities = require("./utilities");
 var _templateObject;
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.10";
+var packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
     radius = _ref.radius,
@@ -32,7 +36,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      inset: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 
@@ -66,8 +70,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     testId = _ref2.testId;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var customPresenceNode = (0, _typeof2.default)(presence) === 'object' ? presence : null;
-  var customStatusNode = (0, _typeof2.default)(status) === 'object' ? status : null;
+  var customPresenceNode = /*#__PURE__*/(0, _react.isValidElement)(presence) ? presence : null;
+  var customStatusNode = /*#__PURE__*/(0, _react.isValidElement)(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
   var lastAnalytics = (0, _react.useRef)(analyticsContext);
   (0, _react.useEffect)(function () {

package/dist/cjs/AvatarItem.js

@@ -15,6 +15,8 @@ var _constants2 = require("./constants");
 var _Text = _interopRequireDefault(require("./Text"));
 var _utilities = require("./utilities");
 var _templateObject;
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var avatarItemStyles = (0, _react2.css)({

package/dist/cjs/IconWrapper.js

@@ -29,9 +29,12 @@ var iconWrapperStyles = (0, _react.css)({
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
-    children = _ref.children;
+    children = _ref.children,
+    label = _ref.label;
   return (0, _react.jsx)("span", {
+    "aria-label": label || undefined,
     css: iconWrapperStyles,
+    role: label ? 'img' : 'presentation',
     style: {
       border: "".concat(_constants.BORDER_WIDTH, "px solid ").concat(bgColor),
       backgroundColor: bgColor

package/dist/cjs/Presence.js

@@ -14,6 +14,8 @@ 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; }
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
   cx: "4",
@@ -67,8 +69,10 @@ var AvatarPresence = function AvatarPresence(_ref) {
     children = _ref.children,
     presence = _ref.presence;
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof presence === 'string' ? presence : undefined
   }, presence ? /*#__PURE__*/_react.default.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
     version: "1.1",
     viewBox: "0 0 8 8",
@@ -92,6 +96,7 @@ var PresenceWrapper = function PresenceWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? -4 : _constants.ICON_OFFSET[size];
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
     style: {
       pointerEvents: 'none',

package/dist/cjs/Status.js

@@ -14,6 +14,8 @@ 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; }
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
   cx: "4",
@@ -65,8 +67,10 @@ var AvatarStatus = function AvatarStatus(_ref) {
     children = _ref.children,
     status = _ref.status;
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof status === 'string' ? status : undefined
   }, status ? /*#__PURE__*/_react.default.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
     version: "1.1",
     viewBox: "0 0 8 8",
@@ -90,6 +94,7 @@ var StatusWrapper = function StatusWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? 0 : _constants.ICON_OFFSET[size];
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
     style: {
       position: 'absolute',

package/dist/cjs/Text.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
   return (0, _react.css)(_objectSpread(_objectSpread({
     display: 'block',

package/dist/cjs/constants.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ICON_SIZES = exports.ICON_OFFSET = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
 var _constants = require("@atlaskit/theme/constants");
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 
 var AVATAR_SIZES = {
   xsmall: (0, _constants.gridSize)() * 2,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.1",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
+import { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
 import { ClassNames, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
@@ -10,7 +10,10 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.1.10";
+const packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const getStyles = (css, {
   size,
   radius,
@@ -54,17 +57,14 @@ css`
 
     &::after {
       background-color: transparent;
-      bottom: 0px;
+      inset: 0px;
 
       /* Added border-radius style to fix hover issue in safari */
       border-radius: ${appearance === 'circle' ? '50%' : `${radius}px`};
       content: ' ';
-      left: 0px;
       opacity: 0;
       pointer-events: none;
       position: absolute;
-      right: 0px;
-      top: 0px;
       transition: opacity 200ms;
       width: 100%;
     }
@@ -145,8 +145,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const customPresenceNode = typeof presence === 'object' ? presence : null;
-  const customStatusNode = typeof status === 'object' ? status : null;
+  const customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
+  const customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   const isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
   const lastAnalytics = useRef(analyticsContext);
   useEffect(() => {

package/dist/es2019/IconWrapper.js

@@ -22,9 +22,12 @@ const iconWrapperStyles = css({
  */
 const IconWrapper = ({
   bgColor = `var(--ds-surface-overlay, ${background()})`,
-  children
+  children,
+  label
 }) => jsx("span", {
+  "aria-label": label || undefined,
   css: iconWrapperStyles,
+  role: label ? 'img' : 'presentation',
   style: {
     border: `${BORDER_WIDTH}px solid ${bgColor}`,
     backgroundColor: bgColor

package/dist/es2019/Presence.js

@@ -3,6 +3,9 @@ import React, { Fragment } from 'react';
 import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-danger, ${R300})`,
   cx: "4",
@@ -56,8 +59,10 @@ const AvatarPresence = ({
   children,
   presence
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor
+  bgColor: borderColor,
+  label: typeof presence === 'string' ? presence : undefined
 }, presence ? /*#__PURE__*/React.createElement("svg", {
+  "aria-hidden": "true",
   height: "100%",
   version: "1.1",
   viewBox: "0 0 8 8",
@@ -80,6 +85,7 @@ export const PresenceWrapper = ({
 }) => {
   const position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--presence`,
     style: {
       pointerEvents: 'none',

package/dist/es2019/Status.js

@@ -3,6 +3,9 @@ import React, { Fragment } from 'react';
 import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: `var(--ds-icon-success, ${G400})`,
   cx: "4",
@@ -54,8 +57,10 @@ const AvatarStatus = ({
   children,
   status
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor
+  bgColor: borderColor,
+  label: typeof status === 'string' ? status : undefined
 }, status ? /*#__PURE__*/React.createElement("svg", {
+  "aria-hidden": "true",
   height: "100%",
   version: "1.1",
   viewBox: "0 0 8 8",
@@ -78,6 +83,7 @@ export const StatusWrapper = ({
 }) => {
   const position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--status`,
     style: {
       position: 'absolute',

package/dist/es2019/constants.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 export const AVATAR_SIZES = {
   xsmall: gridSize() * 2,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.1",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _typeof from "@babel/runtime/helpers/typeof";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
+import { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
 import { ClassNames, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
@@ -16,7 +15,10 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.10";
+var packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
     radius = _ref.radius,
@@ -27,7 +29,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      inset: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 
@@ -61,8 +63,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testId = _ref2.testId;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var customPresenceNode = _typeof(presence) === 'object' ? presence : null;
-  var customStatusNode = _typeof(status) === 'object' ? status : null;
+  var customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
+  var customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
   var lastAnalytics = useRef(analyticsContext);
   useEffect(function () {

package/dist/esm/IconWrapper.js

@@ -23,9 +23,12 @@ var iconWrapperStyles = css({
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$bgColor,
-    children = _ref.children;
+    children = _ref.children,
+    label = _ref.label;
   return jsx("span", {
+    "aria-label": label || undefined,
     css: iconWrapperStyles,
+    role: label ? 'img' : 'presentation',
     style: {
       border: "".concat(BORDER_WIDTH, "px solid ").concat(bgColor),
       backgroundColor: bgColor

package/dist/esm/Presence.js

@@ -3,6 +3,9 @@ import React, { Fragment } from 'react';
 import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-danger, ".concat(R300, ")"),
   cx: "4",
@@ -56,8 +59,10 @@ var AvatarPresence = function AvatarPresence(_ref) {
     children = _ref.children,
     presence = _ref.presence;
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof presence === 'string' ? presence : undefined
   }, presence ? /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
     version: "1.1",
     viewBox: "0 0 8 8",
@@ -80,6 +85,7 @@ export var PresenceWrapper = function PresenceWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
     style: {
       pointerEvents: 'none',

package/dist/esm/Status.js

@@ -3,6 +3,9 @@ import React, { Fragment } from 'react';
 import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
   fill: "var(--ds-icon-success, ".concat(G400, ")"),
   cx: "4",
@@ -54,8 +57,10 @@ var AvatarStatus = function AvatarStatus(_ref) {
     children = _ref.children,
     status = _ref.status;
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof status === 'string' ? status : undefined
   }, status ? /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
     version: "1.1",
     viewBox: "0 0 8 8",
@@ -78,6 +83,7 @@ export var StatusWrapper = function StatusWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
     style: {
       position: 'absolute',

package/dist/esm/constants.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 export var AVATAR_SIZES = {
   xsmall: gridSize() * 2,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.1",
 	"sideEffects": false
 }

package/dist/types/IconWrapper.d.ts

@@ -3,6 +3,7 @@ import { FC, ReactNode } from 'react';
 interface IconWrapperProps {
     bgColor?: string;
     children?: ReactNode;
+    label?: string;
 }
 /**
  * __Icon wrapper__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.1.10",
+  "version": "21.2.1",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -44,7 +44,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/field-base": "^15.0.0",
@@ -52,7 +52,7 @@
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -192,3 +193,15 @@ export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->