[EuiAvatar] Adding conditionalrole attribute to EuiAvatar container…

… DIV (#5423) * Adding conditional role to Avatar container div * Adding CHANGELOG entry * Update CHANGELOG.md 🎉 Co-authored-by: Constance <[email protected]> Co-authored-by: Constance <[email protected]>
elastic · Nov 30, 2021 · 68b1a71 · 68b1a71
1 parent 00d4591
commit 68b1a71
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ No public interface changes since `41.4.0`.
 **Bug fixes**
 
 - Fixed an `EuiCodeBlock` bug where empty code blocks could be copyable ([#5421](https://github.com/elastic/eui/pull/5421))
+- Fixed an accessibility issue in `EuiAvatar` by adding a meaningful role ([#5423](https://github.com/elastic/eui/pull/5423))
 
 ## [`41.3.0`](https://github.com/elastic/eui/tree/v41.3.0)
 

diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
   aria-label="aria-label"
   class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
   data-test-subj="test subject string"
+  role="img"
   style="background-color:#ee789d;color:#000000"
   title="  "
 >
@@ -21,6 +22,7 @@ exports[`EuiAvatar is rendered 1`] = `
   aria-label="aria-label"
   class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
   data-test-subj="test subject string"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -36,6 +38,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   title="name"
 >
   <span
@@ -50,6 +53,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar--plain"
+  role="img"
   title="name"
 >
   <span
@@ -64,6 +68,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#000;color:#FFFFFF"
   title="name"
 >
@@ -79,6 +84,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -94,6 +100,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -110,6 +117,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -126,6 +134,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -142,6 +151,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000;background-image:url(image url)"
   title="name"
 />
@@ -151,6 +161,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -166,6 +177,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -179,8 +191,8 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
 
 exports[`EuiAvatar props isDisabled is rendered 1`] = `
 <div
-  aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled"
+  role="presentation"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -196,6 +208,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--l euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -211,6 +224,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -226,6 +240,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--s euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -241,6 +256,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--xl euiAvatar--user"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >
@@ -256,6 +272,7 @@ exports[`EuiAvatar props type is rendered 1`] = `
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--space"
+  role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
 >

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -179,7 +179,8 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     <div
       className={classes}
       style={avatarStyle}
-      aria-label={name}
+      aria-label={isDisabled ? undefined : name}
+      role={isDisabled ? 'presentation' : 'img'}
       title={name}
       {...rest}
     >

diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
@@ -104,6 +104,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
         <div
           aria-label="Mario"
           class="euiAvatar euiAvatar--l euiAvatar--user"
+          role="img"
           style="background-color:#f1d86f;color:#000000"
           title="Mario"
         >

diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
       <div
         aria-label="Mario"
         class="euiAvatar euiAvatar--l euiAvatar--user"
+        role="img"
         style="background-color:#f1d86f;color:#000000"
         title="Mario"
       >