fixup! feat(cdk-experimental/radio): create radio group and button directives

Author: wagnermaciel

package.json

@@ -104,6 +104,7 @@
     "@types/shelljs": "^0.8.11",
     "@types/yargs": "^17.0.8",
     "autoprefixer": "^10.4.2",
+    "axe-core": "^4.10.3",
     "chalk": "^4.1.0",
     "dgeni": "^0.4.14",
     "dgeni-packages": "^0.29.5",

pnpm-lock.yaml

@@ -27,6 +27,7 @@ ts_project(
         ":radio",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
+        "//:node_modules/axe-core",
     ],
 )
 

src/cdk-experimental/radio/BUILD.bazel

@@ -3,6 +3,79 @@ import {CdkRadioButton, CdkRadioGroup} from './radio';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BidiModule, Direction, Directionality} from '@angular/cdk/bidi';
+import axe from 'axe-core';
+
+// Basic ANSI color functions because chalk has issues with unit tests.
+const colors = {
+  red: (text: string) => `\x1b[31m${text}\x1b[0m`,
+  yellow: (text: string) => `\x1b[33m${text}\x1b[0m`,
+  blue: (text: string) => `\x1b[34m${text}\x1b[0m`,
+  magenta: (text: string) => `\x1b[35m${text}\x1b[0m`,
+  cyan: (text: string) => `\x1b[36m${text}\x1b[0m`,
+  gray: (text: string) => `\x1b[90m${text}\x1b[0m`,
+  underline: (text: string) => `\x1b[4m${text}\x1b[0m`,
+  default: (text: string) => `\x1b[0m${text}\x1b[0m`,
+};
+
+// TODO: Move this to a separate folder/file so it can be reused across components.
+async function getAccessibilityViolationsReport(root: HTMLElement): Promise<string | null> {
+  const results = await axe.run(root);
+
+  if (!results.violations.length) {
+    return null;
+  }
+
+  const reportLines: string[] = [];
+  const append = (text: string) => reportLines.push(colors.default(text));
+  append(colors.red(`Found ${results.violations.length} accessibility violation(s):`));
+
+  results.violations.forEach((violation, index) => {
+    append('');
+    append(colors.red(`Violation ${index + 1}: ${violation.id}\n`));
+
+    let impactText = violation.impact || 'unknown';
+    switch (violation.impact) {
+      case 'critical':
+        impactText = colors.red(impactText);
+        break;
+      case 'serious':
+        impactText = colors.yellow(impactText);
+        break;
+      case 'moderate':
+        impactText = colors.blue(impactText);
+        break;
+      case 'minor':
+        impactText = colors.gray(impactText);
+        break;
+      default:
+        impactText = colors.default(impactText);
+        break;
+    }
+
+    append(`  Impact: ${impactText}`);
+    append(`  Description: ${violation.description}`);
+    append(`  Help: ${violation.help}`);
+    append(`  Help URL: ${colors.underline(colors.blue(violation.helpUrl))}\n`);
+
+    if (violation.nodes && violation.nodes.length > 0) {
+      append('  Failing Elements:');
+      violation.nodes.forEach((node, nodeIndex) => {
+        append(colors.cyan(`    Node ${nodeIndex + 1}:`));
+        if (node.target && node.target.length > 0) {
+          append(`      Selector: ${colors.magenta(node.target.join(', '))}`);
+        }
+        if (node.failureSummary) {
+          append('      Failure Summary:');
+          node.failureSummary
+            .split('\n')
+            .forEach(line => append(colors.yellow(`        ${line.trim()}`)));
+        }
+      });
+    }
+  });
+
+  return reportLines.join('\n');
+}
 
 describe('CdkRadioGroup', () => {
   let fixture: ComponentFixture<RadioGroupExample>;
@@ -46,14 +119,16 @@ describe('CdkRadioGroup', () => {
 
     const fixture = TestBed.createComponent<T>(component);
     fixture.detectChanges();
+    defineTestVariables(fixture);
+    return fixture;
+  }
 
+  function defineTestVariables(fixture: ComponentFixture<unknown>) {
     radioGroup = fixture.debugElement.query(By.directive(CdkRadioGroup));
-    radioButtons = radioGroup.queryAll(By.directive(CdkRadioButton));
+    radioButtons = fixture.debugElement.queryAll(By.directive(CdkRadioButton));
     radioGroupInstance = radioGroup.injector.get<CdkRadioGroup<number>>(CdkRadioGroup);
     radioGroupElement = radioGroup.nativeElement;
     radioButtonElements = radioButtons.map(radioButton => radioButton.nativeElement);
-
-    return fixture;
   }
 
   function setupRadioGroup(opts?: {
@@ -99,8 +174,17 @@ describe('CdkRadioGroup', () => {
       textDirection.emit(opts.textDirection);
     }
     fixture.detectChanges();
+    defineTestVariables(fixture); // Ensure env vars are up-to-date with the dom.
   }
 
+  afterEach(async () => {
+    const report = await getAccessibilityViolationsReport(radioGroupElement);
+
+    if (report) {
+      fail(report);
+    }
+  });
+
   describe('ARIA attributes and roles', () => {
     describe('default configuration', () => {
       beforeEach(() => {
@@ -490,10 +574,15 @@ describe('CdkRadioGroup', () => {
     return radioGroupElement.getAttribute('aria-activedescendant') === radioButtonElements[i].id;
   });
 
-  it('should handle an empty set of radio buttons gracefully', () => {
-    setupRadioGroup({options: []});
-    radioButtons = fixture.debugElement.queryAll(By.directive(CdkRadioButton));
-    expect(radioButtons.length).toBe(0);
+  describe('failure cases', () => {
+    beforeEach(() => {
+      fixture = setupTestEnvironment(RadioGroupExample);
+    });
+
+    it('should handle an empty set of radio buttons gracefully', () => {
+      setupRadioGroup({options: []});
+      expect(radioButtons.length).toBe(0);
+    });
   });
 });