From 2443c046aab18c4d791926cf070038316ce34085 Mon Sep 17 00:00:00 2001
From: Han Ye Htun <sloth30799@gmail.com>
Date: Wed, 22 Mar 2023 00:50:01 +0630
Subject: [PATCH 1/3] Avatar Initials visible when image has a transparent
 background(#1256)

---
 src/components/avatar/avatar.ts | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 97820ab15..1f2d0b3c4 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -64,14 +64,7 @@ export default class SlAvatar extends ShoelaceElement {
         role="img"
         aria-label=${this.label}
       >
-        ${this.initials
-          ? html` <div part="initials" class="avatar__initials">${this.initials}</div> `
-          : html`
-              <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
-                <sl-icon name="person-fill" library="system"></sl-icon>
-              </slot>
-            `}
-        ${this.image && !this.hasError
+        ${this.image && !this.hasError // with image
           ? html`
               <img
                 part="image"
@@ -82,7 +75,13 @@ export default class SlAvatar extends ShoelaceElement {
                 @error="${() => (this.hasError = true)}"
               />
             `
-          : ''}
+          : this.initials // no image, just initials
+          ? html` <div part="initials" class="avatar__initials">${this.initials}</div> `
+          : html`
+              <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
+                <sl-icon name="person-fill" library="system"></sl-icon>
+              </slot>
+            `}
       </div>
     `;
   }

From d03ca4ab9587e0ffa0040422466efac05b83ada9 Mon Sep 17 00:00:00 2001
From: Han Ye Htun <sloth30799@gmail.com>
Date: Wed, 22 Mar 2023 21:46:23 +0630
Subject: [PATCH 2/3] Avatar Initials visible when image has a transparent
 background(#1256)

---
 src/components/avatar/avatar.ts | 42 +++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 1f2d0b3c4..287ea2d72 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -52,6 +52,29 @@ export default class SlAvatar extends ShoelaceElement {
   }
 
   render() {
+    const avatarWithImage = html`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${() => (this.hasError = true)}"
+      />
+    `;
+
+    let avatarWithoutImage = html``;
+
+    if (this.initials) {
+      avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+    } else {
+      avatarWithoutImage = html`
+        <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
+          <sl-icon name="person-fill" library="system"></sl-icon>
+        </slot>
+      `;
+    }
+
     return html`
       <div
         part="base"
@@ -64,24 +87,7 @@ export default class SlAvatar extends ShoelaceElement {
         role="img"
         aria-label=${this.label}
       >
-        ${this.image && !this.hasError // with image
-          ? html`
-              <img
-                part="image"
-                class="avatar__image"
-                src="${this.image}"
-                loading="${this.loading}"
-                alt=""
-                @error="${() => (this.hasError = true)}"
-              />
-            `
-          : this.initials // no image, just initials
-          ? html` <div part="initials" class="avatar__initials">${this.initials}</div> `
-          : html`
-              <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
-                <sl-icon name="person-fill" library="system"></sl-icon>
-              </slot>
-            `}
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
       </div>
     `;
   }

From f4fba8eab4b41676f30099f4ccfeb928639d7652 Mon Sep 17 00:00:00 2001
From: Han Ye Htun <sloth30799@gmail.com>
Date: Fri, 24 Mar 2023 00:05:10 +0630
Subject: [PATCH 3/3] added tests

---
 src/components/avatar/avatar.test.ts | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/components/avatar/avatar.test.ts b/src/components/avatar/avatar.test.ts
index 5ccefdeb2..ad8ffc6fe 100644
--- a/src/components/avatar/avatar.test.ts
+++ b/src/components/avatar/avatar.test.ts
@@ -72,6 +72,46 @@ describe('<sl-avatar>', () => {
     });
   });
 
+  describe('when image is present, the initials or icon part should not render', () => {
+    const initials = 'SL';
+    const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    const label = 'Small transparent square';
+    before(async () => {
+      el = await fixture<SlAvatar>(
+        html`<sl-avatar image="${image}" label="${label}" initials="${initials}"></sl-avatar>`
+      );
+    });
+
+    it('should pass accessibility tests', async () => {
+      /**
+       * The image element itself is ancillary, because it's parent container contains the
+       * aria-label which dictates what "sl-avatar" is. This also implies that label text will
+       * resolve to "" when not provided and ignored by readers. This is why we use alt="" on
+       * the image element to pass accessibility.
+       * https://html.spec.whatwg.org/multipage/images.html#ancillary-images
+       */
+      await expect(el).to.be.accessible({ ignoredRules });
+    });
+
+    it('renders "image" part, with src and a role of presentation', () => {
+      const part = el.shadowRoot!.querySelector('[part~="image"]')!;
+
+      expect(part.getAttribute('src')).to.eq(image);
+    });
+
+    it('should not render the initials part', () => {
+      const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
+
+      expect(part).to.not.exist;
+    });
+
+    it('should not render the icon part', () => {
+      const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=icon]')!;
+
+      expect(slot).to.not.exist;
+    });
+  });
+
   ['square', 'rounded', 'circle'].forEach(shape => {
     describe(`when passed a shape attribute ${shape}`, () => {
       before(async () => {