refactor!: update standalone avatar to not be keyboard focusable (#10211)

web-padawan · web-flow · commit 588800af7905 · 2025-09-23T13:10:46.000+03:00
diff --git a/packages/avatar-group/src/vaadin-avatar-group-mixin.js b/packages/avatar-group/src/vaadin-avatar-group-mixin.js
@@ -156,6 +156,7 @@ export const AvatarGroupMixin = (superClass) =>
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
         initializer: (overflow) => {
           overflow.setAttribute('role', 'button');
+          overflow.setAttribute('tabindex', '0');
           overflow.setAttribute('aria-haspopup', 'menu');
           overflow.setAttribute('aria-expanded', 'false');
           overflow.addEventListener('click', (e) => this._onOverflowClick(e));
@@ -259,7 +260,6 @@ export const AvatarGroupMixin = (superClass) =>
                   class="${ifDefined(item.className)}"
                   theme="${ifDefined(this._theme)}"
                   aria-hidden="true"
-                  tabindex="-1"
                 ></vaadin-avatar>
                 ${item.name || ''}
               </vaadin-avatar-group-menu-item>
@@ -334,6 +334,7 @@ export const AvatarGroupMixin = (superClass) =>
                 .i18n="${this.__effectiveI18n}"
                 theme="${ifDefined(this._theme)}"
                 class="${ifDefined(item.className)}"
+                tabindex="0"
                 with-tooltip
               ></vaadin-avatar>
             `,
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
@@ -229,7 +229,6 @@ snapshots["vaadin-avatar-group opened default"] =
         aria-label="Mno Pqr (MP)"
         name="Mno Pqr"
         role="img"
-        tabindex="-1"
       >
       </vaadin-avatar>
       Mno Pqr
@@ -245,7 +244,6 @@ snapshots["vaadin-avatar-group opened default"] =
         aria-label="Stu Vwx (SV)"
         name="Stu Vwx"
         role="img"
-        tabindex="-1"
       >
       </vaadin-avatar>
       Stu Vwx
diff --git a/packages/avatar/src/vaadin-avatar-mixin.js b/packages/avatar/src/vaadin-avatar-mixin.js
@@ -124,10 +124,6 @@ export const AvatarMixin = (superClass) =>
         this.setAttribute('role', 'img');
       }
 
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', '0');
-      }
-
       // Should set `anonymous` if name / abbr is not provided
       if (!this.name && !this.abbr) {
         this.__setTooltip();
diff --git a/packages/avatar/test/avatar.test.js b/packages/avatar/test/avatar.test.js
@@ -279,6 +279,7 @@ describe('vaadin-avatar', () => {
         container.appendChild(avatar);
 
         const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
+        avatar.setAttribute('tabindex', '0');
         tabKeyDown(avatar);
         avatar.focus();
         expect(overlay.opened).to.be.true;
@@ -297,8 +298,8 @@ describe('vaadin-avatar', () => {
   });
 
   describe('focus', () => {
-    it('should set tabindex="0" on the avatar', () => {
-      expect(avatar.getAttribute('tabindex')).to.equal('0');
+    beforeEach(() => {
+      avatar.setAttribute('tabindex', '0');
     });
 
     it('should set focused attribute on avatar focusin', () => {
diff --git a/packages/avatar/test/visual/base/avatar.test.js b/packages/avatar/test/visual/base/avatar.test.js
diff --git a/packages/avatar/test/visual/lumo/avatar.test.js b/packages/avatar/test/visual/lumo/avatar.test.js
@@ -119,6 +119,7 @@ describe('avatar', () => {
     div.style.height = '90px';
     div.style.textAlign = 'center';
     element.withTooltip = true;
+    element.setAttribute('tabindex', '0');
     await sendKeys({ press: 'Tab' });
     await visualDiff(div, 'tooltip');
   });
diff --git a/packages/message-list/src/vaadin-message-mixin.js b/packages/message-list/src/vaadin-message-mixin.js
@@ -95,7 +95,6 @@ export const MessageMixin = (superClass) =>
 
       this._avatarController = new SlotController(this, 'avatar', 'vaadin-avatar', {
         initializer: (avatar) => {
-          avatar.setAttribute('tabindex', '-1');
           avatar.setAttribute('aria-hidden', 'true');
           this._avatar = avatar;
         },
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
@@ -27,7 +27,6 @@ snapshots["vaadin-message-list items"] =
       name="Jane Doe"
       role="img"
       slot="avatar"
-      tabindex="-1"
     >
     </vaadin-avatar>
   </vaadin-message>
@@ -43,7 +42,6 @@ snapshots["vaadin-message-list items"] =
       name="Lina Roy"
       role="img"
       slot="avatar"
-      tabindex="-1"
     >
     </vaadin-avatar>
   </vaadin-message>
@@ -69,7 +67,6 @@ snapshots["vaadin-message-list theme"] =
       name="Admin"
       role="img"
       slot="avatar"
-      tabindex="-1"
     >
     </vaadin-avatar>
   </vaadin-message>
@@ -95,7 +92,6 @@ snapshots["vaadin-message-list className"] =
       name="Admin"
       role="img"
       slot="avatar"
-      tabindex="-1"
     >
     </vaadin-avatar>
   </vaadin-message>
diff --git a/packages/message-list/test/dom/__snapshots__/message.test.snap.js b/packages/message-list/test/dom/__snapshots__/message.test.snap.js
@@ -66,7 +66,6 @@ snapshots["vaadin-message avatar username"] =
     name="Joan Doe"
     role="img"
     slot="avatar"
-    tabindex="-1"
   >
   </vaadin-avatar>
 </vaadin-message>
@@ -81,7 +80,6 @@ snapshots["vaadin-message avatar abbr"] =
     aria-label="JD"
     role="img"
     slot="avatar"
-    tabindex="-1"
   >
   </vaadin-avatar>
 </vaadin-message>
@@ -95,7 +93,6 @@ snapshots["vaadin-message avatar img"] =
     img="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     role="img"
     slot="avatar"
-    tabindex="-1"
   >
   </vaadin-avatar>
 </vaadin-message>
@@ -110,7 +107,6 @@ snapshots["vaadin-message avatar userColorIndex"] =
     role="img"
     slot="avatar"
     style="--vaadin-avatar-user-color: var(--vaadin-user-color-2);"
-    tabindex="-1"
   >
   </vaadin-avatar>
 </vaadin-message>
