feat(ld-notification): allow setting timeout on type alert notifications

src/liquid/components/ld-notification/ld-notification.tsx

@@ -53,7 +53,16 @@ export class LdNotification {
     clearTimeout(this.dismissTimeout)
 
     if (!this.currentNotification) return
-    if (this.currentNotification.type === 'alert') return
+
+    // Do not dismiss, if alert has no explicit timeout.
+    if (
+      this.currentNotification.type === 'alert' &&
+      !this.currentNotification.timeout
+    ) {
+      return
+    }
+
+    // Do not dismiss, if timeout is disabled explicitly.
     if (this.currentNotification.timeout === 0) return
 
     this.dismissTimeout = setTimeout(() => {

src/liquid/components/ld-notification/readme.md

@@ -34,12 +34,14 @@ dispatchEvent(new CustomEvent('ldNotificationAdd', {
 
 Each notification item that appears on the screen has either the ARIA role `status` or `alert`, so that assistive technology should announce the notification content to the user.
 
-Keep in mind that focus is not explicitly changed when a notification appears. This means that users with visual disabilities may have problems navigating to a notification. This is especially the case for notifications which time out. And even more for notifications containing interaction elements, such as confirmation buttons etc. Thus, we recommend you avoid using notifications for critical information that users need to act on immediately. In summary, notifications may be difficult for users with low vision or low dexterity to access because they
+Keep in mind that focus is not explicitly changed when a notification appears. This means that users with visual disabilities may have problems navigating to a notification. This is especially the case for notifications which time out. And even more for notifications containing interaction elements, such as confirmation buttons and the like. Thus, we recommend that you avoid using notifications for critical information that users need to act on immediately. In summary, notifications may be difficult for users with low vision or low dexterity to access because they
 
 - Disappear automatically
 - Can’t be easily accessed with the keyboard
 - Might appear outside the proximity of the user’s current focus
 
+For more information on this topic, please read the [WCAG Understanding SC 4.1.3: Status Messages](https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html) docs.
+
 ### Notifications with interactive content
 
 Make sure that users can accomplish the interaction in the notification another way, since an interaction element within a notification may be difficult to access for some users.
@@ -52,7 +54,7 @@ Notifications of type `'alert'` take precedence of notifications of type `'info'
 
 ## Notification timeout
 
-While notifications with type `'alert'` do not time out, notifications of type `'info'` and `'warn'` have a default timeout of **six seconds** after which they disappear automatically. You can customize this timeout by attaching a timeout value of your choice to the appropriate property on the event detail object: 
+While notifications with type `'alert'` do not time out by default, notifications of type `'info'` and `'warn'` have a default timeout of **six seconds** after which they disappear automatically. You can customize the timeout for each notification type by attaching a timeout value of your choice to the appropriate property on the event detail object:
 
 ```js
 dispatchEvent(new CustomEvent('ldNotificationAdd', {

src/liquid/components/ld-notification/test/ld-notification.spec.ts

@@ -431,6 +431,37 @@ describe('ld-notification', () => {
       expect(notifications.length).toEqual(1)
     })
 
+    it('dismisses a notification of type "alert" after explicit timeout', async () => {
+      const page = await newSpecPage({
+        components: [LdNotification],
+        html: `<ld-notification></ld-notification>`,
+      })
+      page.win.dispatchEvent(
+        new CustomEvent('ldNotificationAdd', {
+          detail: {
+            content: 'Ooops.',
+            type: 'alert',
+            timeout: DEFAULT_NOTIFICATION_TIMEOUT,
+          },
+        })
+      )
+      await page.waitForChanges()
+
+      let notifications = page.root.shadowRoot.querySelectorAll(
+        '.ld-notification__item:not(.ld-notification__item--dismissed)'
+      )
+      expect(notifications.length).toEqual(1)
+
+      // Fast-forward until the timer has been executed.
+      jest.advanceTimersByTime(DEFAULT_NOTIFICATION_TIMEOUT)
+      await page.waitForChanges()
+
+      notifications = page.root.shadowRoot.querySelectorAll(
+        '.ld-notification__item:not(.ld-notification__item--dismissed)'
+      )
+      expect(notifications.length).toEqual(0)
+    })
+
     it('does not dismiss a notification of type "info" if it is in queue behind another notification', async () => {
       const page = await newSpecPage({
         components: [LdNotification],