fix: make resize and close events composed (#5205)

* fix: make resize and close events composed

* Appease Linter

* Updating vdiff goldens (#5206)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

components/alert/alert-toast.js

@@ -315,7 +315,7 @@ class AlertToast extends LitElement {
 		this.dispatchEvent(new CustomEvent(
 			'd2l-alert-toast-resize', {
 				bubbles: true,
-				composed: false,
+				composed: true,
 				detail: { bottom, heightDifference: (newHeight - oldHeight), opening, closing: false }
 			}
 		));
@@ -327,7 +327,7 @@ class AlertToast extends LitElement {
 	}
 
 	_handleSiblingResize(e) {
-		if (e?.target === this || !this.open) return;
+		if (e?.composedPath()[0] === this || !this.open) return;
 
 		if (!e.detail.opening) {
 			const containerBottom = this._innerContainer.getBoundingClientRect().bottom;
@@ -444,7 +444,7 @@ class AlertToast extends LitElement {
 				this.dispatchEvent(new CustomEvent(
 					'd2l-alert-toast-close', {
 						bubbles: true,
-						composed: false,
+						composed: true,
 						detail: { bottom, heightDifference: -this._height, opening: false, closing: true }
 					}
 				));

components/alert/test/alert-toast.vdiff.js

@@ -1,5 +1,6 @@
+import { defineCE, expect, fixture, focusElem, hoverElem, html, oneEvent, setViewport } from '@brightspace-ui/testing';
 import { disableReducedMotionForTesting, restoreReducedMotionForTesting } from '../alert-toast.js';
-import { expect, fixture, focusElem, hoverElem, html, oneEvent, setViewport } from '@brightspace-ui/testing';
+import { LitElement } from 'lit';
 import sinon from 'sinon';
 
 const alertWithSubtextAndCloseButton = html`
@@ -27,6 +28,14 @@ const multipleAlertsAutoClose = html`
 
 const viewport = { width: 700, height: 400 };
 
+const tag = defineCE(
+	class extends LitElement {
+		render() {
+			return multipleAlerts;
+		}
+	}
+);
+
 describe('alert-toast', () => {
 
 	[
@@ -70,6 +79,12 @@ describe('alert-toast', () => {
 			await expect(document).to.be.golden();
 		});
 
+		it('open all from component', async() => {
+			const elem = await fixture(`<${tag}></${tag}>`, { viewport });
+			await openAlerts(elem.shadowRoot);
+			await expect(document).to.be.golden();
+		});
+
 		['top', 'middle', 'bottom'].forEach(position => {
 			it(`open all then close ${position}`, async() => {
 				const elem = await fixture(multipleAlerts, { viewport: { width: 700, height: 300 } });
@@ -79,6 +94,15 @@ describe('alert-toast', () => {
 				await oneEvent(alert, 'd2l-alert-toast-close');
 				await expect(document).to.be.golden();
 			});
+
+			it(`open all from component then close ${position}`, async() => {
+				const elem = await fixture(`<${tag}></${tag}>`, { viewport: { width: 700, height: 300 } });
+				await openAlerts(elem.shadowRoot);
+				const alert = elem.shadowRoot.querySelector(`#alert-${position}`);
+				alert.open = false;
+				await oneEvent(alert, 'd2l-alert-toast-close');
+				await expect(document).to.be.golden();
+			});
 		});
 
 		it('narrow', async() => {