fix(alert): not announced correctly in screen reader (VIV-1970)

libs/components/src/lib/alert/VARIATIONS.md

@@ -119,7 +119,7 @@ Use the `placement` attribute to set the location of the Alert.
 Use the `removable` attribute to add a close button to the Alert.
 
 ```html preview 100px
-<vwc-alert text="Some important information for you" removable open></vwc-alert>
+<vwc-alert removable text="Some important information for you" open></vwc-alert>
 
 <vwc-button
 	appearance="outlined"

libs/components/src/lib/alert/alert.spec.ts

@@ -7,6 +7,7 @@ import {
 import type { Icon } from '../icon/icon';
 import type { Button } from '../button/button';
 import { Connotation } from '../enums';
+import { Button } from '../button/button';
 import { Alert } from './alert';
 import type { AlertConnotation } from './alert';
 import '.';
@@ -55,6 +56,7 @@ describe('vwc-alert', () => {
 			const alertHeadline = 'headline text';
 
 			element.headline = alertHeadline;
+			element.open = true;
 			await elementUpdated(element);
 			const fromProptoDOM = getHeadline();
 
@@ -81,6 +83,7 @@ describe('vwc-alert', () => {
 			const alertText = 'alert text';
 
 			element.text = alertText;
+			element.open = true;
 			await elementUpdated(element);
 			const fromProptoDOM = getText();
 
@@ -95,13 +98,14 @@ describe('vwc-alert', () => {
 	});
 
 	describe('focus', () => {
-		it('should focus when opened', async () => {
-			const spy = vi.fn();
-			const alertText: HTMLElement = element.shadowRoot?.querySelector(
-				'.alert-text'
-			) as HTMLElement;
-			alertText.focus = spy;
+		it('should focus on dismiss button when opened', async () => {
 			element.removable = true;
+			await elementUpdated(element);
+			const spy = vi.fn();
+			const closeBtn = element.shadowRoot?.querySelector(
+				'.dismiss-button'
+			) as Button;
+			closeBtn.addEventListener('focus', spy);
 
 			element.open = false;
 			await elementUpdated(element);
@@ -394,17 +398,9 @@ describe('vwc-alert', () => {
 			await elementUpdated(element);
 		});
 
-		it('should set alertdialog on the control when removable', async () => {
-			element.removable = true;
-			await elementUpdated(element);
-
-			const control = getControlElement(element);
-			expect(control.getAttribute('role')).toBe('alertdialog');
-		});
-
-		it('should set a role of alert on the control', async () => {
-			const control = getControlElement(element);
-			expect(control.getAttribute('role')).toBe('alert');
+		it('should set a role of alert on the base element', async () => {
+			const baseEl = getBaseElement(element);
+			expect(baseEl!.getAttribute('role')).toBe('alert');
 		});
 	});
 

libs/components/src/lib/alert/alert.template.ts

@@ -32,6 +32,7 @@ function renderDismissButton(buttonTag: string) {
 			aria-label="${(x) =>
 				x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
+			type="button"
 			class="dismiss-button"
 			icon="close-line"
 			@click="${(x) => (x.open = false)}">
@@ -44,12 +45,14 @@ export const AlertTemplate = (context: VividElementDefinitionContext) => {
 
 	return html<Alert>`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
-		<div
-			class="${getControlClasses}"
-			role="${(x) => (x.removable ? 'alertdialog' : 'alert')}"
-			aria-live="assertive"
-		>
-			<div part="vvd-theme-alternate" class="${getClasses}">
+		<div class="${getControlClasses}">
+			<div 
+				part="vvd-theme-alternate" 
+				class="${getClasses}" 
+				role="alert" 
+				aria-hidden="${(x) => (x.open ? 'false' : 'true')}" 
+				${(x) => (!x.open ? 'hidden' : '')}
+			>
 				${renderIcon(context)}
 				<div class="alert-text">
 					${when(

libs/components/src/lib/alert/alert.ts

@@ -134,13 +134,11 @@ export class Alert extends VividElement {
 		this.#setupTimeout();
 		if (newValue) {
 			this.style.display = 'contents';
-			const alertText = this.shadowRoot!.querySelector(
-				'.alert-text'
+			const closeBtn = this.shadowRoot!.querySelector(
+				'.dismiss-button'
 			) as HTMLElement;
-			if (this.removable && alertText) {
-				alertText.setAttribute('tabindex', '0');
-				alertText.focus();
-				alertText.removeAttribute('tabindex');
+			if (this.removable && closeBtn) {
+				closeBtn.focus();
 			}
 		} else {
 			this.style.display = 'none';