@atlaskit/avatar - npm Package Compare versions

Comparing version 21.4.2 to 21.4.3

dist/cjs/Avatar.js

@@ -12,2 +12,3 @@ "use strict";
 var _react2 = require("@emotion/react");
+var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -26,3 +27,3 @@ var _colors = require("@atlaskit/theme/colors");
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.4.2";
+var packageVersion = "21.4.3";
 
@@ -81,2 +82,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   var lastAnalytics = (0, _react.useRef)(analyticsContext);
+  var uuid = (0, _reactUid.useUIDSeed)()('avatar');
   (0, _react.useEffect)(function () {
@@ -143,10 +145,8 @@ lastAnalytics.current = analyticsContext;
   // if status or presence are nodes this is not added to the label by default
-  var generateDefaultLabel = function generateDefaultLabel() {
-    if (!name && !status && !presence) {
-      return;
-    }
-    return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
-  };
+  var defaultLabel = "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '').trim();
+  var isInteractive = onClick || href || isDisabled;
   return (0, _react2.jsx)(AvatarContainer, {
     "data-testid": testId,
+    role: isInteractive || !defaultLabel ? undefined : 'img',
+    "aria-labelledby": isInteractive || !defaultLabel ? undefined : "".concat(uuid, "-label"),
     style: {
@@ -170,7 +170,10 @@ display: 'inline-block',
       })
-    }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
-      'aria-label': label || generateDefaultLabel()
+    }, componentProps()), testId && getTestId(testId, children)), isInteractive && {
+      'aria-label': label || defaultLabel
     }), {}, {
-      children: (0, _react2.jsx)(_AvatarImage.default, {
-        alt: name,
+      children: (0, _react2.jsx)(_AvatarImage.default
+      // Only pass the name if there is an image provided. We want the
+      // icons to be presentational if they don't show anything important.
+      , {
+        alt: src ? name : undefined,
         appearance: appearance,
@@ -195,5 +198,8 @@ size: size,
     testId: testId
-  }, customStatusNode));
+  }, customStatusNode), !isInteractive && defaultLabel ? (0, _react2.jsx)("span", {
+    id: "".concat(uuid, "-label"),
+    hidden: true
+  }, defaultLabel) : undefined);
 });
 Avatar.displayName = 'Avatar';
 var _default = exports.default = Avatar;

dist/cjs/AvatarItem.js

@@ -25,6 +25,5 @@ "use strict";
   maxWidth: '100%',
-  paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  lineHeight: '1.4'
+  lineHeight: '1.4',
+  paddingInlineStart: "var(--ds-space-100, 8px)"
 });
@@ -31,0 +30,0 @@ var getStyles = function getStyles(css, _ref) {

dist/cjs/IconWrapper.js

@@ -32,8 +32,6 @@ "use strict";
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$bgColor,
-    children = _ref.children,
-    label = _ref.label;
+    children = _ref.children;
   return (0, _react.jsx)("span", {
-    "aria-label": label || undefined,
     css: iconWrapperStyles,
-    role: label ? 'img' : 'presentation',
+    role: "presentation",
     style: {
@@ -40,0 +38,0 @@ border: "".concat(_constants.BORDER_WIDTH, "px solid ").concat(bgColor),

dist/cjs/Presence.js

@@ -70,6 +70,4 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor,
-    label: typeof presence === 'string' ? presence : undefined
+    bgColor: borderColor
   }, presence ? /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
     height: "100%",
@@ -80,3 +78,3 @@ version: "1.1",
     xmlns: "http://www.w3.org/2000/svg"
-  }, getPresence(presence)) : children);
+  }, /*#__PURE__*/_react.default.createElement("title", null, "(".concat(presence, ")")), getPresence(presence)) : children);
 };
@@ -98,3 +96,2 @@ var _default = exports.default = AvatarPresence;
   return /*#__PURE__*/_react.default.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
@@ -101,0 +98,0 @@ style: {

dist/cjs/Status.js

@@ -68,6 +68,4 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor,
-    label: typeof status === 'string' ? status : undefined
+    bgColor: borderColor
   }, status ? /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
     height: "100%",
@@ -78,3 +76,3 @@ version: "1.1",
     xmlns: "http://www.w3.org/2000/svg"
-  }, getStatus(status)) : children);
+  }, /*#__PURE__*/_react.default.createElement("title", null, "(".concat(status, ")")), getStatus(status)) : children);
 };
@@ -96,3 +94,2 @@ var _default = exports.default = AvatarStatus;
   return /*#__PURE__*/_react.default.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
@@ -99,0 +96,0 @@ style: {

dist/es2019/Avatar.js

@@ -5,2 +5,3 @@ /** @jsx jsx */
 import { ClassNames, jsx } from '@emotion/react';
+import { useUIDSeed } from 'react-uid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -14,3 +15,3 @@ import { B300, N0, N70A } from '@atlaskit/theme/colors';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.4.2";
+const packageVersion = "21.4.3";
 
@@ -155,2 +156,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   const lastAnalytics = useRef(analyticsContext);
+  const uuid = useUIDSeed()('avatar');
   useEffect(() => {
@@ -219,10 +221,8 @@ lastAnalytics.current = analyticsContext;
   // if status or presence are nodes this is not added to the label by default
-  const generateDefaultLabel = () => {
-    if (!name && !status && !presence) {
-      return;
-    }
-    return `${name || ''} ${isStatus && !customStatusNode ? `(${status})` : ''} ${isPresence && !customPresenceNode ? `(${presence})` : ''}`;
-  };
+  const defaultLabel = `${name || ''} ${isStatus && !customStatusNode ? `(${status})` : ''} ${isPresence && !customPresenceNode ? `(${presence})` : ''}`.trim();
+  const isInteractive = onClick || href || isDisabled;
   return jsx(AvatarContainer, {
     "data-testid": testId,
+    role: isInteractive || !defaultLabel ? undefined : 'img',
+    "aria-labelledby": isInteractive || !defaultLabel ? undefined : `${uuid}-label`,
     style: {
@@ -249,7 +249,10 @@ display: 'inline-block',
       ...(testId && getTestId(testId, children)),
-      ...((onClick || href) && {
-        'aria-label': label || generateDefaultLabel()
+      ...(isInteractive && {
+        'aria-label': label || defaultLabel
       }),
-      children: jsx(AvatarImage, {
-        alt: name,
+      children: jsx(AvatarImage
+      // Only pass the name if there is an image provided. We want the
+      // icons to be presentational if they don't show anything important.
+      , {
+        alt: src ? name : undefined,
         appearance: appearance,
@@ -274,5 +277,8 @@ size: size,
     testId: testId
-  }, customStatusNode));
+  }, customStatusNode), !isInteractive && defaultLabel ? jsx("span", {
+    id: `${uuid}-label`,
+    hidden: true
+  }, defaultLabel) : undefined);
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

dist/es2019/AvatarItem.js

@@ -13,6 +13,5 @@ /** @jsx jsx */
   maxWidth: '100%',
-  paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  lineHeight: '1.4'
+  lineHeight: '1.4',
+  paddingInlineStart: "var(--ds-space-100, 8px)"
 });
@@ -19,0 +18,0 @@ const getStyles = (css, {

dist/es2019/IconWrapper.js

@@ -25,8 +25,6 @@ /** @jsx jsx */
   bgColor = `var(--ds-surface-overlay, ${N0})`,
-  children,
-  label
+  children
 }) => jsx("span", {
-  "aria-label": label || undefined,
   css: iconWrapperStyles,
-  role: label ? 'img' : 'presentation',
+  role: "presentation",
   style: {
@@ -33,0 +31,0 @@ border: `${BORDER_WIDTH}px solid ${bgColor}`,

dist/es2019/Presence.js

@@ -59,6 +59,4 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor,
-  label: typeof presence === 'string' ? presence : undefined
+  bgColor: borderColor
 }, presence ? /*#__PURE__*/React.createElement("svg", {
-  "aria-hidden": "true",
   height: "100%",
@@ -69,3 +67,3 @@ version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
-}, getPresence(presence)) : children);
+}, /*#__PURE__*/React.createElement("title", null, `(${presence})`), getPresence(presence)) : children);
 export default AvatarPresence;
@@ -87,3 +85,2 @@ /**
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && `${testId}--presence`,
@@ -90,0 +87,0 @@ style: {

dist/es2019/Status.js

@@ -57,6 +57,4 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor,
-  label: typeof status === 'string' ? status : undefined
+  bgColor: borderColor
 }, status ? /*#__PURE__*/React.createElement("svg", {
-  "aria-hidden": "true",
   height: "100%",
@@ -67,3 +65,3 @@ version: "1.1",
   xmlns: "http://www.w3.org/2000/svg"
-}, getStatus(status)) : children);
+}, /*#__PURE__*/React.createElement("title", null, `(${status})`), getStatus(status)) : children);
 export default AvatarStatus;
@@ -85,3 +83,2 @@ /**
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && `${testId}--status`,
@@ -88,0 +85,0 @@ style: {

dist/esm/Avatar.js

@@ -10,2 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ClassNames, jsx } from '@emotion/react';
+import { useUIDSeed } from 'react-uid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -19,3 +20,3 @@ import { B300, N0, N70A } from '@atlaskit/theme/colors';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.4.2";
+var packageVersion = "21.4.3";
 
@@ -74,2 +75,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   var lastAnalytics = useRef(analyticsContext);
+  var uuid = useUIDSeed()('avatar');
   useEffect(function () {
@@ -136,10 +138,8 @@ lastAnalytics.current = analyticsContext;
   // if status or presence are nodes this is not added to the label by default
-  var generateDefaultLabel = function generateDefaultLabel() {
-    if (!name && !status && !presence) {
-      return;
-    }
-    return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
-  };
+  var defaultLabel = "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '').trim();
+  var isInteractive = onClick || href || isDisabled;
   return jsx(AvatarContainer, {
     "data-testid": testId,
+    role: isInteractive || !defaultLabel ? undefined : 'img',
+    "aria-labelledby": isInteractive || !defaultLabel ? undefined : "".concat(uuid, "-label"),
     style: {
@@ -163,7 +163,10 @@ display: 'inline-block',
       })
-    }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
-      'aria-label': label || generateDefaultLabel()
+    }, componentProps()), testId && getTestId(testId, children)), isInteractive && {
+      'aria-label': label || defaultLabel
     }), {}, {
-      children: jsx(AvatarImage, {
-        alt: name,
+      children: jsx(AvatarImage
+      // Only pass the name if there is an image provided. We want the
+      // icons to be presentational if they don't show anything important.
+      , {
+        alt: src ? name : undefined,
         appearance: appearance,
@@ -188,5 +191,8 @@ size: size,
     testId: testId
-  }, customStatusNode));
+  }, customStatusNode), !isInteractive && defaultLabel ? jsx("span", {
+    id: "".concat(uuid, "-label"),
+    hidden: true
+  }, defaultLabel) : undefined);
 });
 Avatar.displayName = 'Avatar';
 export default Avatar;

dist/esm/AvatarItem.js

@@ -18,6 +18,5 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   maxWidth: '100%',
-  paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  lineHeight: '1.4'
+  lineHeight: '1.4',
+  paddingInlineStart: "var(--ds-space-100, 8px)"
 });
@@ -24,0 +23,0 @@ var getStyles = function getStyles(css, _ref) {

dist/esm/IconWrapper.js

@@ -26,8 +26,6 @@ /** @jsx jsx */
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$bgColor,
-    children = _ref.children,
-    label = _ref.label;
+    children = _ref.children;
   return jsx("span", {
-    "aria-label": label || undefined,
     css: iconWrapperStyles,
-    role: label ? 'img' : 'presentation',
+    role: "presentation",
     style: {
@@ -34,0 +32,0 @@ border: "".concat(BORDER_WIDTH, "px solid ").concat(bgColor),

dist/esm/Presence.js

@@ -59,6 +59,4 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor,
-    label: typeof presence === 'string' ? presence : undefined
+    bgColor: borderColor
   }, presence ? /*#__PURE__*/React.createElement("svg", {
-    "aria-hidden": "true",
     height: "100%",
@@ -69,3 +67,3 @@ version: "1.1",
     xmlns: "http://www.w3.org/2000/svg"
-  }, getPresence(presence)) : children);
+  }, /*#__PURE__*/React.createElement("title", null, "(".concat(presence, ")")), getPresence(presence)) : children);
 };
@@ -87,3 +85,2 @@ export default AvatarPresence;
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
@@ -90,0 +87,0 @@ style: {

dist/esm/Status.js

@@ -57,6 +57,4 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor,
-    label: typeof status === 'string' ? status : undefined
+    bgColor: borderColor
   }, status ? /*#__PURE__*/React.createElement("svg", {
-    "aria-hidden": "true",
     height: "100%",
@@ -67,3 +65,3 @@ version: "1.1",
     xmlns: "http://www.w3.org/2000/svg"
-  }, getStatus(status)) : children);
+  }, /*#__PURE__*/React.createElement("title", null, "(".concat(status, ")")), getStatus(status)) : children);
 };
@@ -85,3 +83,2 @@ export default AvatarStatus;
   return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
@@ -88,0 +85,0 @@ style: {

dist/types-ts4.5/AvatarItem.d.ts

@@ -42,3 +42,3 @@ /** @jsx jsx */
     /**
-     * Disable the item from being interactive
+     * Disable the item from being interactive.
      */
@@ -67,3 +67,3 @@ isDisabled?: boolean;
     /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
@@ -70,0 +70,0 @@ testId?: string;

dist/types/AvatarItem.d.ts

@@ -42,3 +42,3 @@ /** @jsx jsx */
     /**
-     * Disable the item from being interactive
+     * Disable the item from being interactive.
      */
@@ -67,3 +67,3 @@ isDisabled?: boolean;
     /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
@@ -70,0 +70,0 @@ testId?: string;

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "21.4.2",
+  "version": "21.4.3",
   "description": "An avatar is a visual representation of a user or entity.",
@@ -49,6 +49,7 @@ "publishConfig": {
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "@emotion/serialize": "^1.1.0"
+    "@emotion/serialize": "^1.1.0",
+    "react-uid": "^2.2.0"
   },
@@ -63,3 +64,3 @@ "peerDependencies": {
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/visual-regression": "*",
@@ -66,0 +67,0 @@ "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

240071

decreased by-1.48%

Dependency count

9

increased by12.5%

Number of package files

106

decreased by-0.93%

Lines of code

4284

decreased by-3.4%

Dependency changes

• + Addedreact-uid@^2.2.0

• Updated@atlaskit/tokens@^1.33.0