Merge branch 'live-region-8.0' into live-region-main

src/app/shared/live-region/live-region.component.ts

@@ -11,6 +11,12 @@ import { Observable } from 'rxjs';
 
 import { LiveRegionService } from './live-region.service';
 
+/**
+ * The Live Region Component is an accessibility tool for screenreaders. When a change occurs on a page when the changed
+ * section is not in focus, a message should be displayed by this component so it can be announced by a screen reader.
+ *
+ * This component should not be used directly. Use the {@link LiveRegionService} to add messages.
+ */
 @Component({
   selector: `ds-live-region`,
   templateUrl: './live-region.component.html',

src/app/shared/live-region/live-region.service.spec.ts

@@ -4,14 +4,16 @@ import {
   tick,
 } from '@angular/core/testing';
 
+import { UUIDService } from '../../core/shared/uuid.service';
 import { LiveRegionService } from './live-region.service';
 
 describe('liveRegionService', () => {
   let service: LiveRegionService;
 
-
   beforeEach(() => {
-    service = new LiveRegionService();
+    service = new LiveRegionService(
+      new UUIDService(),
+    );
   });
 
   describe('addMessage', () => {
@@ -90,6 +92,34 @@ describe('liveRegionService', () => {
       expect(results[3]).toEqual([]);
     }));
 
+    it('should not pop messages added after clearing within timeOut period', fakeAsync(() => {
+      const results: string[][] = [];
+
+      service.getMessages$().subscribe((messages) => {
+        results.push(messages);
+      });
+
+      expect(results.length).toEqual(1);
+      expect(results[0]).toEqual([]);
+
+      service.addMessage('Message One');
+      tick(10000);
+      service.clear();
+      tick(15000);
+      service.addMessage('Message Two');
+
+      // Message Two should not be cleared after 5 more seconds
+      tick(5000);
+
+      expect(results.length).toEqual(4);
+      expect(results[3]).toEqual(['Message Two']);
+
+      // But should be cleared 30 seconds after it was added
+      tick(25000);
+      expect(results.length).toEqual(5);
+      expect(results[4]).toEqual([]);
+    }));
+
     it('should respect configured timeOut', fakeAsync(() => {
       const results: string[][] = [];
 

src/app/shared/live-region/live-region.service.ts

@@ -2,12 +2,22 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
+import { UUIDService } from '../../core/shared/uuid.service';
 
+/**
+ * The LiveRegionService is responsible for handling the messages that are shown by the {@link LiveRegionComponent}.
+ * Use this service to add or remove messages to the Live Region.
+ */
 @Injectable({
   providedIn: 'root',
 })
 export class LiveRegionService {
 
+  constructor(
+    protected uuidService: UUIDService,
+  ) {
+  }
+
   /**
    * The duration after which the messages disappear in milliseconds
    * @protected
@@ -15,10 +25,11 @@ export class LiveRegionService {
   protected messageTimeOutDurationMs: number = environment.liveRegion.messageTimeOutDurationMs;
 
   /**
-   * Array containing the messages that should be shown in the live region
+   * Array containing the messages that should be shown in the live region,
+   * together with a uuid, so they can be uniquely identified
    * @protected
    */
-  protected messages: string[] = [];
+  protected messages: { message: string, uuid: string }[] = [];
 
   /**
    * BehaviorSubject emitting the array with messages every time the array updates
@@ -35,27 +46,28 @@ export class LiveRegionService {
   /**
    * Returns a copy of the array with the current live region messages
    */
-  getMessages() {
-    return [...this.messages];
+  getMessages(): string[] {
+    return this.messages.map(messageObj => messageObj.message);
   }
 
   /**
    * Returns the BehaviorSubject emitting the array with messages every time the array updates
    */
-  getMessages$() {
+  getMessages$(): BehaviorSubject<string[]> {
     return this.messages$;
   }
 
   /**
    * Adds a message to the live-region messages array
    * @param message
+   * @return The uuid of the message
    */
-  addMessage(message: string) {
-    this.messages.push(message);
+  addMessage(message: string): string {
+    const uuid = this.uuidService.generate();
+    this.messages.push({ message, uuid });
+    setTimeout(() => this.clearMessageByUUID(uuid), this.messageTimeOutDurationMs);
     this.emitCurrentMessages();
-
-    // Clear the message once the timeOut has passed
-    setTimeout(() => this.pop(), this.messageTimeOutDurationMs);
+    return uuid;
   }
 
   /**
@@ -67,12 +79,14 @@ export class LiveRegionService {
   }
 
   /**
-   * Removes the longest living message from the array.
-   * @protected
+   * Removes the message with the given UUID from the messages array
+   * @param uuid The uuid of the message to clear
    */
-  protected pop() {
-    if (this.messages.length > 0) {
-      this.messages.shift();
+  clearMessageByUUID(uuid: string) {
+    const index = this.messages.findIndex(messageObj => messageObj.uuid === uuid);
+
+    if (index !== -1) {
+      this.messages.splice(index, 1);
       this.emitCurrentMessages();
     }
   }