#2078: Send event if image load fails, update changelog closes (#2123)

* AVATAR-EVENT: Send event if image load fails, update changelog

* AVATAR-EVENT: rename handler method

* AVATAR-EVENT: Add test

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
 

src/components/avatar/avatar.component.ts

@@ -16,6 +16,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @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>`.
  *
  * @csspart base - The component's base wrapper.
@@ -54,6 +57,11 @@ export default class SlAvatar extends ShoelaceElement {
     this.hasError = false;
   }
 
+  private handleImageLoadError() {
+    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.handleImageLoadError}"
       />
     `;
 

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