feat(web): announce notifications to screen readers (#12071)

web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts

@@ -39,6 +39,29 @@ describe('NotificationCard component', () => {
     expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
   });
 
+  it('makes all buttons non-focusable and hidden from screen readers', () => {
+    sut = render(NotificationCard, {
+      notification: {
+        id: 1234,
+        message: 'Notification message',
+        timeout: 1000,
+        type: NotificationType.Info,
+        action: { type: 'discard' },
+        button: {
+          text: 'button',
+          onClick: vi.fn(),
+        },
+      },
+    });
+    const buttons = sut.container.querySelectorAll('button');
+
+    expect(buttons).toHaveLength(2);
+    for (const button of buttons) {
+      expect(button.getAttribute('tabindex')).toBe('-1');
+      expect(button.getAttribute('aria-hidden')).toBe('true');
+    }
+  });
+
   it('shows title and renders component', () => {
     sut = render(NotificationCard, {
       notification: {

web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts

@@ -9,8 +9,6 @@ function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLA
 }
 
 describe('NotificationList component', () => {
-  const sut: RenderResult<NotificationList> = render(NotificationList);
-
   beforeAll(() => {
     // https://testing-library.com/docs/svelte-testing-library/faq#why-arent-transition-events-running
     vi.stubGlobal('requestAnimationFrame', (fn: FrameRequestCallback) => {
@@ -23,6 +21,10 @@ describe('NotificationList component', () => {
   });
 
   it('shows a notification when added and closes it automatically after the delay timeout', async () => {
+    const sut: RenderResult<NotificationList> = render(NotificationList);
+    const status = await sut.findAllByRole('status');
+
+    expect(status).toHaveLength(1);
     expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
 
     notificationController.show({