Merge pull request #333 from 4site-interactive-studios/error-aria

Add role attribute if en__errorList is not empty

Author: fernanDOTdo

packages/scripts/dist/a11y.d.ts

@@ -5,4 +5,5 @@ export declare class A11y {
     private addLabel;
     private updateFrequencyLabel;
     private setAutoGeneratedAltTags;
+    private manageErrorListAlertRole;
 }

packages/scripts/dist/a11y.js

@@ -8,6 +8,7 @@ export class A11y {
         this.updateFrequencyLabel();
         const ecardImages = document.querySelectorAll('.en__ecarditems__list img');
         this.setAutoGeneratedAltTags(ecardImages);
+        this.manageErrorListAlertRole();
     }
     addGroupRole() {
         // Add role="group" to all EN Radio fields
@@ -93,4 +94,29 @@ export class A11y {
             }
         });
     }
+    manageErrorListAlertRole() {
+        const errorList = document.querySelector('ul.en__errorList');
+        if (!errorList)
+            return;
+        const hasErrorItems = () => Boolean(errorList.querySelector('li'));
+        const enableAlert = () => {
+            if (!errorList.hasAttribute('role')) {
+                errorList.setAttribute('role', 'alert');
+            }
+        };
+        const disableAlert = () => {
+            if (errorList.hasAttribute('role')) {
+                errorList.removeAttribute('role');
+            }
+        };
+        hasErrorItems() ? enableAlert() : disableAlert();
+        new MutationObserver(records => {
+            for (const record of records) {
+                if (record.type === 'childList') {
+                    hasErrorItems() ? enableAlert() : disableAlert();
+                    break;
+                }
+            }
+        }).observe(errorList, { childList: true });
+    }
 }

packages/scripts/package-lock.json

@@ -9,6 +9,7 @@ export class A11y {
     this.updateFrequencyLabel();
     const ecardImages: NodeListOf<HTMLImageElement> = document.querySelectorAll('.en__ecarditems__list img');
     this.setAutoGeneratedAltTags(ecardImages);
+    this.manageErrorListAlertRole();
   }
 
   private addGroupRole() {
@@ -116,4 +117,33 @@ export class A11y {
       }
     });
   }
+  private manageErrorListAlertRole(): void {
+    const errorList = document.querySelector<HTMLUListElement>('ul.en__errorList');
+    if (!errorList) return;
+
+    const hasErrorItems = (): boolean => Boolean(errorList.querySelector('li'));
+
+    const enableAlert = (): void => {
+      if (!errorList.hasAttribute('role')) {
+        errorList.setAttribute('role', 'alert');
+      }
+    };
+
+    const disableAlert = (): void => {
+      if (errorList.hasAttribute('role')) {
+        errorList.removeAttribute('role');
+      }
+    };
+
+    hasErrorItems() ? enableAlert() : disableAlert();
+
+    new MutationObserver(records => {
+      for (const record of records) {
+        if (record.type === 'childList') {
+          hasErrorItems() ? enableAlert() : disableAlert();
+          break;
+        }
+      }
+    }).observe(errorList, { childList: true });
+  }
 }