Merge branch 'sloth30799' of github.com:sloth30799/shoelace into sloth30799-sloth30799

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 () => {

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,25 +87,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
-          ? html`
-              <img
-                part="image"
-                class="avatar__image"
-                src="${this.image}"
-                loading="${this.loading}"
-                alt=""
-                @error="${() => (this.hasError = true)}"
-              />
-            `
-          : ''}
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
       </div>
     `;
   }