From 9aea46185f3dcba5b982d67bab3ed926f52a7328 Mon Sep 17 00:00:00 2001
From: Yehuda Ringler <yehuda.ringler@chabad.org>
Date: Fri, 26 Jul 2024 12:33:14 -0400
Subject: [PATCH 1/3] AVATAR-EVENT: Send event if image load fails, update
 changelog

---
 docs/pages/resources/changelog.md         |  1 +
 src/components/avatar/avatar.component.ts | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 9d89e8e027..b3f82baad4 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -22,6 +22,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in the submenu controller that prevented submenus from rendering in RTL without explicitly setting `dir` on the parent menu item [#1992]
 - Fixed a bug where `<sl-relative-time>` would announce the full time instead of the relative time in screen readers
 - When calling `customElements.define` we no longer register with anonymous classes by default [#2079]
+- When avatar image load fails, send error event [#2122]
 
 ## 2.15.1
 
diff --git a/src/components/avatar/avatar.component.ts b/src/components/avatar/avatar.component.ts
index 7b9285ec79..4901ca9e22 100644
--- a/src/components/avatar/avatar.component.ts
+++ b/src/components/avatar/avatar.component.ts
@@ -15,6 +15,9 @@ import type { CSSResultGroup } from 'lit';
  * @since 2.0
  *
  * @dependency sl-icon
+ * 
+ * @event sl-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
+ * unknown cause.
  *
  * @slot icon - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
  *
@@ -54,6 +57,11 @@ export default class SlAvatar extends ShoelaceElement {
     this.hasError = false;
   }
 
+  private onImageLoadError() {
+    this.hasError = true;
+    this.emit('sl-error');
+  }
+
   render() {
     const avatarWithImage = html`
       <img
@@ -62,7 +70,7 @@ export default class SlAvatar extends ShoelaceElement {
         src="${this.image}"
         loading="${this.loading}"
         alt=""
-        @error="${() => (this.hasError = true)}"
+        @error="${this.onImageLoadError}"
       />
     `;
 

From 47bafd42fdfe6245fefd99ffd0919415bb5b8445 Mon Sep 17 00:00:00 2001
From: Yehuda Ringler <yehuda.ringler@chabad.org>
Date: Mon, 29 Jul 2024 10:42:55 -0400
Subject: [PATCH 2/3] AVATAR-EVENT: rename handler method

---
 src/components/avatar/avatar.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/avatar/avatar.component.ts b/src/components/avatar/avatar.component.ts
index 4901ca9e22..3d3c8c332f 100644
--- a/src/components/avatar/avatar.component.ts
+++ b/src/components/avatar/avatar.component.ts
@@ -57,7 +57,7 @@ export default class SlAvatar extends ShoelaceElement {
     this.hasError = false;
   }
 
-  private onImageLoadError() {
+  private handleImageLoadError() {
     this.hasError = true;
     this.emit('sl-error');
   }
@@ -70,7 +70,7 @@ export default class SlAvatar extends ShoelaceElement {
         src="${this.image}"
         loading="${this.loading}"
         alt=""
-        @error="${this.onImageLoadError}"
+        @error="${this.handleImageLoadError}"
       />
     `;
 

From 367de5f22c2d3c5532672dbcc4ad1a952340622a Mon Sep 17 00:00:00 2001
From: Yehuda Ringler <yehuda.ringler@chabad.org>
Date: Mon, 29 Jul 2024 10:46:49 -0400
Subject: [PATCH 3/3] AVATAR-EVENT: Add test

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

diff --git a/src/components/avatar/avatar.test.ts b/src/components/avatar/avatar.test.ts
index 4cfcb955fc..68ae9187ca 100644
--- a/src/components/avatar/avatar.test.ts
+++ b/src/components/avatar/avatar.test.ts
@@ -156,10 +156,16 @@ describe('<sl-avatar>', () => {
     el = await fixture<SlAvatar>(html`<sl-avatar></sl-avatar>`);
     el.image = 'bad_image';
 
+    let wasEventCalled = false;
+    el.addEventListener('sl-error', () => {
+      wasEventCalled = true;
+    });
+
     await aTimeout(0);
 
     await waitUntil(() => el.shadowRoot!.querySelector('img') === null);
     expect(el.shadowRoot!.querySelector('img')).to.be.null;
+    expect(wasEventCalled).to.be.ok;
   });
 
   it('should show a valid image after being passed an invalid image initially', async () => {