chore(sdk/testing): add support for axe-core version 4.8 (#1983)

libs/sdk/testing/package.json

@@ -20,7 +20,7 @@
     "@angular/core": "^17.1.0",
     "@angular/platform-browser": "^17.1.0",
     "@skyux/i18n": "0.0.0-PLACEHOLDER",
-    "axe-core": "^3.5.6 || ^4.6.3 <4.8.0"
+    "axe-core": "^3.5.6 || ~4.6.3 || ~4.7.2 || ~4.8.3"
   },
   "dependencies": {
     "tslib": "^2.6.2"

libs/sdk/testing/src/lib/matchers/matchers.spec.ts

@@ -23,7 +23,7 @@ function createElement(innerText: string): any {
   return elem;
 }
 
-function createPassingElement(): any {
+function createPassingElement(): HTMLDivElement {
   const wrapper = document.createElement('div');
   const elem1 = document.createElement('div');
   const elem2 = document.createElement('div');
@@ -33,12 +33,20 @@ function createPassingElement(): any {
   return wrapper;
 }
 
-function createFailingElement(): any {
-  // Make every DIV have the same ID:
+function createFailingElement(params?: {
+  includeRelatedNodesError: boolean;
+}): HTMLDivElement {
+  // Use a deprecated role to trigger an accessibility failure.
   const element = createPassingElement();
-  [].slice.call(element.querySelectorAll('div')).forEach((elem: any) => {
-    elem.setAttribute('id', 'same-id');
-  });
+  element.setAttribute('role', 'directory');
+
+  if (params?.includeRelatedNodesError) {
+    // Related nodes include additional reporting.
+    const elem1 = element.firstElementChild as HTMLElement;
+    elem1.setAttribute('role', 'grid');
+    elem1.appendChild(document.createElement('textarea'));
+  }
+
   return element;
 }
 
@@ -191,11 +199,13 @@ describe('Jasmine matchers', () => {
     it('should fail if accessibility rules fail', waitForAsync(() => {
       const failSpy = spyOn(window as any, 'fail').and.callFake(
         (message: string) => {
-          expect(message.indexOf('duplicate-id') > -1).toEqual(true);
+          expect(message.indexOf('aria-deprecated-role') > -1).toEqual(true);
         },
       );
 
-      const element = createFailingElement();
+      const element = createFailingElement({
+        includeRelatedNodesError: true,
+      });
 
       // This will result in a failure on a consumer unit test.
       // We're swallowing the error in order to double-check
@@ -225,7 +235,7 @@ describe('Jasmine matchers', () => {
         const element = createFailingElement();
         expect(element).toBeAccessible(undefined, {
           rules: {
-            'duplicate-id': { enabled: false },
+            'aria-deprecated-role': { enabled: false },
           },
         });
       }));

package.json

@@ -104,7 +104,7 @@
     "ag-grid-angular": "29.3.5",
     "ag-grid-community": "29.3.5",
     "autonumeric": "4.10.4",
-    "axe-core": "4.6.3",
+    "axe-core": "4.8.3",
     "comment-json": "4.2.3",
     "dom-autoscroller": "2.3.4",
     "dompurify": "3.0.8",