@sproutsocial/seeds-react-avatar 1.1.4 → 1.1.7

package/.turbo/turbo-build.log

@@ -3,19 +3,19 @@ $ tsup --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-avatar/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-avatar/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     5.73 KB
-CJS dist/index.js.map 7.22 KB
-CJS ⚡️ Build success in 256ms
-ESM dist/esm/index.js     3.62 KB
-ESM dist/esm/index.js.map 7.13 KB
-ESM ⚡️ Build success in 246ms
+CJS dist/index.js     5.77 KB
+CJS dist/index.js.map 7.44 KB
+CJS ⚡️ Build success in 12ms
+ESM dist/esm/index.js     3.66 KB
+ESM dist/esm/index.js.map 7.35 KB
+ESM ⚡️ Build success in 12ms
 DTS Build start
-DTS ⚡️ Build success in 27824ms
+DTS ⚡️ Build success in 1660ms
 DTS dist/index.d.ts  1.65 KB
 DTS dist/index.d.mts 1.65 KB
-Done in 35.37s.
+Done in 2.34s.

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @sproutsocial/seeds-react-avatar
 
+## 1.1.7
+
+### Patch Changes
+
+- 43f852d: Update avatar text to be hidden
+
+## 1.1.6
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-box@1.1.14
+  - @sproutsocial/seeds-react-image@1.0.13
+
+## 1.1.5
+
+### Patch Changes
+
+- Updated dependencies [118e300]
+  - @sproutsocial/seeds-react-theme@3.5.1
+  - @sproutsocial/seeds-react-box@1.1.13
+  - @sproutsocial/seeds-react-image@1.0.12
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/esm/index.js

@@ -79,7 +79,7 @@ var Avatar = ({
       flexShrink: 0,
       justifyContent: "center",
       alignItems: "center",
-      title: name,
+      title: name || "?",
       bg,
       $type: colorType,
       "data-qa-user-avatar": name,
@@ -93,6 +93,7 @@ var Avatar = ({
           fontSize,
           type: colorType,
           color,
+          "aria-hidden": true,
           children: displayInitials
         }
       ) : /* @__PURE__ */ jsx(

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  \"aria-hidden\": ariaHidden,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          {...ariaProps}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}
+{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  \"aria-hidden\": ariaHidden,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name || \"?\"}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n          // If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.\n          // There is a title of the full name\n          aria-hidden\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          {...ariaProps}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}

package/dist/index.js

@@ -117,7 +117,7 @@ var Avatar = ({
       flexShrink: 0,
       justifyContent: "center",
       alignItems: "center",
-      title: name,
+      title: name || "?",
       bg,
       $type: colorType,
       "data-qa-user-avatar": name,
@@ -131,6 +131,7 @@ var Avatar = ({
           fontSize,
           type: colorType,
           color,
+          "aria-hidden": true,
           children: displayInitials
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  \"aria-hidden\": ariaHidden,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          {...ariaProps}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}
+{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  \"aria-hidden\": ariaHidden,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name || \"?\"}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n          // If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.\n          // There is a title of the full name\n          aria-hidden\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          {...ariaProps}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-avatar",
-  "version": "1.1.4",
+  "version": "1.1.7",
   "description": "Seeds React Avatar",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -20,10 +20,10 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.5.0",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.12",
-    "@sproutsocial/seeds-react-image": "^1.0.11",
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-image": "^1.0.13",
     "@sproutsocial/seeds-react-text": "^1.4.0"
   },
   "devDependencies": {

package/src/Avatar.tsx

@@ -118,7 +118,7 @@ export const Avatar = ({
       flexShrink={0}
       justifyContent="center"
       alignItems="center"
-      title={name}
+      title={name || "?"}
       bg={bg}
       $type={colorType}
       data-qa-user-avatar={name}
@@ -132,6 +132,9 @@ export const Avatar = ({
           fontSize={fontSize}
           type={colorType}
           color={color}
+          // If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.
+          // There is a title of the full name
+          aria-hidden
         >
           {displayInitials}
         </AvatarText>