fix: change avatar default role attribute to img (#8427)

vaadin · Jan 2, 2025 · 9a742f8 · 9a742f8
1 parent 8463c9f
commit 9a742f8
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 24 deletions.
diff --git a/packages/avatar-group/src/vaadin-avatar-group-mixin.js b/packages/avatar-group/src/vaadin-avatar-group-mixin.js
@@ -172,6 +172,7 @@ export const AvatarGroupMixin = (superClass) =>
 
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
         initializer: (overflow) => {
+          overflow.setAttribute('role', 'button');
           overflow.setAttribute('aria-haspopup', 'menu');
           overflow.setAttribute('aria-expanded', 'false');
           overflow.addEventListener('click', (e) => this._onOverflowClick(e));

diff --git a/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js b/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js
@@ -23,7 +23,7 @@ snapshots["vaadin-avatar-group items"] =
 `<vaadin-avatar-group aria-label="Currently 2 active users">
   <vaadin-avatar
     abbr="YY"
-    role="button"
+    role="img"
     tabindex="0"
     with-tooltip=""
   >
@@ -33,7 +33,7 @@ snapshots["vaadin-avatar-group items"] =
   <vaadin-avatar
     abbr="TV"
     name="Tomi Virkki"
-    role="button"
+    role="img"
     tabindex="0"
     with-tooltip=""
   >
@@ -63,7 +63,7 @@ snapshots["vaadin-avatar-group theme"] =
 >
   <vaadin-avatar
     abbr="YY"
-    role="button"
+    role="img"
     tabindex="0"
     theme="small"
     with-tooltip=""
@@ -74,7 +74,7 @@ snapshots["vaadin-avatar-group theme"] =
   <vaadin-avatar
     abbr="TV"
     name="Tomi Virkki"
-    role="button"
+    role="img"
     tabindex="0"
     theme="small"
     with-tooltip=""
@@ -104,7 +104,7 @@ snapshots["vaadin-avatar-group opened default"] =
   <vaadin-avatar
     abbr="AD"
     name="Abc Def"
-    role="button"
+    role="img"
     tabindex="0"
     with-tooltip=""
   >
@@ -114,7 +114,7 @@ snapshots["vaadin-avatar-group opened default"] =
   <vaadin-avatar
     abbr="GJ"
     name="Ghi Jkl"
-    role="button"
+    role="img"
     tabindex="0"
     with-tooltip=""
   >
@@ -157,7 +157,7 @@ snapshots["vaadin-avatar-group opened overlay"] =
         abbr="MP"
         aria-hidden="true"
         name="Mno Pqr"
-        role="button"
+        role="img"
         tabindex="-1"
       >
       </vaadin-avatar>
@@ -172,7 +172,7 @@ snapshots["vaadin-avatar-group opened overlay"] =
         abbr="SV"
         aria-hidden="true"
         name="Stu Vwx"
-        role="button"
+        role="img"
         tabindex="-1"
       >
       </vaadin-avatar>
@@ -204,7 +204,7 @@ snapshots["vaadin-avatar-group opened overlay class"] =
         abbr="MP"
         aria-hidden="true"
         name="Mno Pqr"
-        role="button"
+        role="img"
         tabindex="-1"
       >
       </vaadin-avatar>
@@ -219,7 +219,7 @@ snapshots["vaadin-avatar-group opened overlay class"] =
         abbr="SV"
         aria-hidden="true"
         name="Stu Vwx"
-        role="button"
+        role="img"
         tabindex="-1"
       >
       </vaadin-avatar>

diff --git a/packages/avatar/src/vaadin-avatar-mixin.js b/packages/avatar/src/vaadin-avatar-mixin.js
@@ -118,9 +118,9 @@ export const AvatarMixin = (superClass) =>
       this.__updateVisibility();
 
       // By default, if the user hasn't provided a custom role,
-      // the role attribute is set to "button".
+      // the role attribute is set to "img".
       if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'button');
+        this.setAttribute('role', 'img');
       }
 
       if (!this.hasAttribute('tabindex')) {

diff --git a/packages/avatar/test/avatar.common.js b/packages/avatar/test/avatar.common.js
@@ -366,8 +366,8 @@ describe('vaadin-avatar', () => {
   });
 
   describe('a11y', () => {
-    it('should set role="button" on the avatar', () => {
-      expect(avatar.getAttribute('role')).to.equal('button');
+    it('should set role="img" on the avatar', () => {
+      expect(avatar.getAttribute('role')).to.equal('img');
     });
 
     it('should set aria-hidden="true" on the img element', () => {
@@ -386,8 +386,8 @@ describe('vaadin-avatar', () => {
     });
 
     it('should not override custom role set on the avatar', () => {
-      const custom = fixtureSync('<vaadin-avatar role="image"></vaadin-avatar>');
-      expect(custom.getAttribute('role')).to.equal('image');
+      const custom = fixtureSync('<vaadin-avatar role="button"></vaadin-avatar>');
+      expect(custom.getAttribute('role')).to.equal('button');
     });
   });
 });
diff --git a/packages/message-list/test/dom/__snapshots__/message-list.test.snap.js b/packages/message-list/test/dom/__snapshots__/message-list.test.snap.js
@@ -24,7 +24,7 @@ snapshots["vaadin-message-list items"] =
       abbr="JD"
       aria-hidden="true"
       name="Jane Doe"
-      role="button"
+      role="img"
       slot="avatar"
       tabindex="-1"
     >
@@ -39,7 +39,7 @@ snapshots["vaadin-message-list items"] =
       abbr="LR"
       aria-hidden="true"
       name="Lina Roy"
-      role="button"
+      role="img"
       slot="avatar"
       tabindex="-1"
     >
@@ -64,7 +64,7 @@ snapshots["vaadin-message-list theme"] =
       abbr="A"
       aria-hidden="true"
       name="Admin"
-      role="button"
+      role="img"
       slot="avatar"
       tabindex="-1"
     >
@@ -89,7 +89,7 @@ snapshots["vaadin-message-list className"] =
       abbr="A"
       aria-hidden="true"
       name="Admin"
-      role="button"
+      role="img"
       slot="avatar"
       tabindex="-1"
     >

diff --git a/packages/message-list/test/dom/__snapshots__/message.test.snap.js b/packages/message-list/test/dom/__snapshots__/message.test.snap.js
@@ -63,7 +63,7 @@ snapshots["vaadin-message avatar username"] =
     abbr="JD"
     aria-hidden="true"
     name="Joan Doe"
-    role="button"
+    role="img"
     slot="avatar"
     tabindex="-1"
   >
@@ -77,7 +77,7 @@ snapshots["vaadin-message avatar abbr"] =
   <vaadin-avatar
     abbr="JD"
     aria-hidden="true"
-    role="button"
+    role="img"
     slot="avatar"
     tabindex="-1"
   >
@@ -91,7 +91,7 @@ snapshots["vaadin-message avatar img"] =
   <vaadin-avatar
     aria-hidden="true"
     img="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
-    role="button"
+    role="img"
     slot="avatar"
     tabindex="-1"
   >
@@ -105,7 +105,7 @@ snapshots["vaadin-message avatar userColorIndex"] =
   <vaadin-avatar
     aria-hidden="true"
     has-color-index=""
-    role="button"
+    role="img"
     slot="avatar"
     style="--vaadin-avatar-user-color: var(--vaadin-user-color-2);"
     tabindex="-1"