fix: announce results count when filtering errors on report

Author: bellangerq

confiture-web-app/src/components/AuditGenerationCriterium.vue

@@ -55,7 +55,7 @@ const result = reactive<CriteriumResult>({
   )!,
 });
 
-/* 
+/*
 the result status can be updated from an external source (the not applicable
 page switch and the autofill debug button)
 So we watch the store to make sure to update our local state if needed.

confiture-web-app/src/components/ReportErrors.vue

@@ -80,28 +80,45 @@ const disabledResetFilters = computed(
 const minorUserImpactErrorCount = computed(
   () =>
     report.data?.results.filter(
-      (r) => r.userImpact === CriterionResultUserImpact.MINOR
+      (r) =>
+        r.status === CriteriumResultStatus.NOT_COMPLIANT &&
+        r.userImpact === CriterionResultUserImpact.MINOR
     ).length
 );
 
 const majorUserImpactErrorCount = computed(
   () =>
     report.data?.results.filter(
-      (r) => r.userImpact === CriterionResultUserImpact.MAJOR
+      (r) =>
+        r.status === CriteriumResultStatus.NOT_COMPLIANT &&
+        r.userImpact === CriterionResultUserImpact.MAJOR
     ).length
 );
 
 const blockingUserImpactErrorCount = computed(
   () =>
     report.data?.results.filter(
-      (r) => r.userImpact === CriterionResultUserImpact.BLOCKING
+      (r) =>
+        r.status === CriteriumResultStatus.NOT_COMPLIANT &&
+        r.userImpact === CriterionResultUserImpact.BLOCKING
     ).length
 );
 
 const unknownUserImpactErrorCount = computed(
-  () => report.data?.results.filter((r) => r.userImpact === null).length
+  () =>
+    report.data?.results.filter(
+      (r) =>
+        r.status === CriteriumResultStatus.NOT_COMPLIANT &&
+        r.userImpact === null
+    ).length
 );
 
+const displayedErrorCount = computed(() => {
+  return errors.value
+    .map((page) => page.topics.map((topic) => topic.errors))
+    .flat(2).length;
+});
+
 function expandAll() {
   const collapses = Array.from(
     document.querySelectorAll("[data-accordion] > [data-fr-js-collapse]")
@@ -343,9 +360,11 @@ function updateActiveAnchorLink(id: string, event: MouseEvent) {
 
       <div>
         <div class="fr-mb-6w header">
-          <span class="fr-mb-0 fr-text--xl fr-text--bold"
-            >{{ report.data.errorCount }} résultats</span
-          >
+          <div role="alert" aria-live="polite">
+            <p class="fr-mb-0 fr-text--xl fr-text--bold">
+              {{ displayedErrorCount }} résultats
+            </p>
+          </div>
           <button class="fr-btn fr-btn--tertiary-no-outline" @click="expandAll">
             Tout déplier
           </button>