fix(components): remove aria-label for non-interactive SwirlAvatar co…

…mponents
getflip · Jun 12, 2024 · 839b0dd · 839b0dd
1 parent 891bd2e
commit 839b0dd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/.changeset/old-mirrors-give.md b/.changeset/old-mirrors-give.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": patch
+"@getflip/swirl-components-angular": patch
+"@getflip/swirl-components-react": patch
+---
+
+Remove aria-label for non-interactive swirl-avatar components
diff --git a/packages/swirl-components/src/components/swirl-avatar/swirl-avatar.spec.tsx b/packages/swirl-components/src/components/swirl-avatar/swirl-avatar.spec.tsx
@@ -10,7 +10,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe">
+      <swirl-avatar label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -39,7 +39,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe" src="https://">
+      <swirl-avatar label="John Doe" src="https://">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__image">
@@ -61,7 +61,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" initials="JD" label="John Doe">
+      <swirl-avatar initials="JD" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-initials avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__initials">
@@ -85,7 +85,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" icon="<swirl-icon-close></swirl-icon-close>" label="John Doe">
+      <swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -153,7 +153,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe">
+      <swirl-avatar badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -178,7 +178,7 @@ describe("swirl-avatar", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe" show-label="">
+      <swirl-avatar label="John Doe" show-label="">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -202,6 +202,8 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar interactive="true" label="John Doe"></swirl-avatar>`,
     });
 
+    expect(page.root.getAttribute("aria-label")).toBe("John Doe");
+
     const buttonSpy = jest.fn();
 
     page.root.addEventListener("click", buttonSpy);

diff --git a/packages/swirl-components/src/components/swirl-avatar/swirl-avatar.tsx b/packages/swirl-components/src/components/swirl-avatar/swirl-avatar.tsx
@@ -191,7 +191,7 @@ export class SwirlAvatar {
 
     return (
       <Host
-        aria-label={this.label}
+        aria-label={this.interactive ? this.label : undefined}
         onKeydown={this.interactive ? this.onKeydown : undefined}
         onKeyup={this.interactive ? this.onKeyup : undefined}
         role={role}