feat: Add accessibility repair slice to the stacked bar chart

This change introduces a new "Successful after repair" metric to the accessibility stats. This allows for a more granular view of accessibility results, distinguishing between applications that were compliant from the start and those that became compliant after automated repairs.

The stacked bar chart in the report viewer will now conditionally display this new slice, ensuring backward compatibility with older reports.

Co-authored-by: Tiffany Shiu <[email protected]>

Author: crisbeto

report-app/src/app/pages/report-viewer/report-viewer.ts

@@ -328,6 +328,7 @@ export class ReportViewer {
 
   protected accessibilityStatsAsGraphData(stats: {
     appsWithErrors: number;
+    appsWithoutErrorsAfterRepair?: number;
     appsWithoutErrors: number;
   }) {
     return [
@@ -336,6 +337,18 @@ export class ReportViewer {
         color: ScoreCssVariable.excellent,
         value: stats.appsWithoutErrors,
       },
+      // Conditionally add the 'Successful after repair' bar. This property is
+      // optional to maintain backwards compatibility with older reports where
+      // this metric was not calculated.
+      ...(typeof stats.appsWithoutErrorsAfterRepair === 'number'
+        ? [
+            {
+              label: 'Successful after repair',
+              color: ScoreCssVariable.great,
+              value: stats.appsWithoutErrorsAfterRepair,
+            },
+          ]
+        : []),
       {
         label: 'Have violations',
         color: ScoreCssVariable.poor,

runner/ratings/stats.ts

@@ -29,7 +29,11 @@ export function calculateBuildAndCheckStats(
   let failedBuilds = 0;
   let runtimeStats: RuntimeStats | undefined;
   let accessibilityStats:
-    | { appsWithErrors: number; appsWithoutErrors: number }
+    | {
+        appsWithErrors: number;
+        appsWithoutErrorsAfterRepair: number;
+        appsWithoutErrors: number;
+      }
     | undefined;
   let securityStats:
     | { appsWithErrors: number; appsWithoutErrors: number }
@@ -66,11 +70,19 @@ export function calculateBuildAndCheckStats(
       }
     }
     if (result.build.axeViolations != undefined) {
-      accessibilityStats ??= { appsWithErrors: 0, appsWithoutErrors: 0 };
+      accessibilityStats ??= {
+        appsWithErrors: 0,
+        appsWithoutErrors: 0,
+        appsWithoutErrorsAfterRepair: 0,
+      };
       if (result.build.axeViolations.length > 0) {
         accessibilityStats.appsWithErrors++;
       } else {
-        accessibilityStats.appsWithoutErrors++;
+        if (result.axeRepairAttempts === 0) {
+          accessibilityStats.appsWithoutErrors++;
+        } else {
+          accessibilityStats.appsWithoutErrorsAfterRepair++;
+        }
       }
     }
     securityStats ??= { appsWithErrors: 0, appsWithoutErrors: 0 };

runner/shared-interfaces.ts

@@ -264,7 +264,11 @@ export interface AggregatedRunStats {
   /** Runtime stats. Not present for reports that didn't request runtime error collection. */
   runtime?: RuntimeStats;
 
-  accessibility?: { appsWithErrors: number; appsWithoutErrors: number };
+  accessibility?: {
+    appsWithErrors: number;
+    appsWithoutErrorsAfterRepair: number;
+    appsWithoutErrors: number;
+  };
   security?: { appsWithErrors: number; appsWithoutErrors: number };
 }