{
presence,
status,
strokeColor,
- role = 'presentation',
+ role,
} = props;
const baseProps = extractBaseProps(props);
@@ -117,6 +117,8 @@ export const Avatar = (props: AvatarProps) => {
const AvatarAppearance =
appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
+ const resolvedRole = role ?? (tabIndex !== undefined ? 'button' : 'img');
+ const ariaLabel = getTooltipName().trim() || initials || 'Avatar';
const darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
const showPresence =
@@ -180,13 +182,15 @@ export const Avatar = (props: AvatarProps) => {
const renderAvatar = () => {
if (children && typeof children !== 'string') {
return (
-
+
{children}
@@ -196,12 +200,14 @@ export const Avatar = (props: AvatarProps) => {
}
return (
-
+
<>
{initials && (
diff --git a/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
index 8f6b7ad8a5..c1846afc4f 100644
--- a/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -17,11 +17,12 @@ Object {