chore: update accessibility of user avatar component (#1467)

chore: update user avatar accessibility
dhis2 · Jun 3, 2024 · 35482c7 · 35482c7
1 parent de6f005
commit 35482c7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/components/user-avatar/src/text-avatar.js b/components/user-avatar/src/text-avatar.js
@@ -24,7 +24,7 @@ export const TextAvatar = ({
     medium,
     small,
 }) => (
-    <div className="text-avatar" data-test={dataTest}>
+    <div className="text-avatar" data-test={dataTest} aria-label={name}>
         <div
             className={cx('text-avatar-initials', {
                 extrasmall,

diff --git a/components/user-avatar/src/user-avatar.js b/components/user-avatar/src/user-avatar.js
@@ -27,6 +27,7 @@ const UserAvatar = ({
     large,
     medium,
     small,
+    ariaLabel,
 }) => (
     <div
         className={cx(className, {
@@ -37,6 +38,8 @@ const UserAvatar = ({
             extralarge,
         })}
         data-test={dataTest}
+        aria-label={ariaLabel || name}
+        aria-hidden={!name}
     >
         {avatarId ? (
             <ImageAvatar avatarId={avatarId} dataTest={`${dataTest}-image`} />
@@ -90,6 +93,7 @@ UserAvatar.propTypes = {
     // SVG fallback with a `IconUser24`.
     // This has been discussed and deferred
     name: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
     avatarId: PropTypes.string,
     className: PropTypes.string,
     dataTest: PropTypes.string,

diff --git a/components/user-avatar/types/index.d.ts b/components/user-avatar/types/index.d.ts
@@ -10,6 +10,7 @@ export interface UserAvatarProps {
     large?: boolean
     medium?: boolean
     small?: boolean
+    ariaLabel?: string
 }
 
 export const UserAvatar: React.FC<UserAvatarProps>