SONAR-17845 [1095656] Fix list status not being automatically announced

2 files changed, 51 insertions, 15 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index 31225984a7c..30ae1741a89 100644
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -100,13 +100,15 @@ export default function ListFooter(props: ListFooterProps) {
         className
       )}
     >
-      {total !== undefined
-        ? translateWithParameters(
-            'x_of_y_shown',
-            formatMeasure(count, 'INT', null),
-            formatMeasure(total, 'INT', null)
-          )
-        : translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
+      <span aria-live="polite" aria-busy={loading}>
+        {total !== undefined
+          ? translateWithParameters(
+              'x_of_y_shown',
+              formatMeasure(count, 'INT', null),
+              formatMeasure(total, 'INT', null)
+            )
+          : translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
+      </span>
       {button}
       {loading && <DeferredSpinner className="text-bottom spacer-left position-absolute" />}
     </div>
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
index 0ee8385503f..d16290f172b 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ListFooter-test.tsx.snap
@@ -5,7 +5,11 @@ exports[`should render correctly: default 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.3.5
+  <span
+    aria-live="polite"
+  >
+    x_of_y_shown.3.5
+  </span>
   <Button
     className="spacer-left"
     data-test="show-more"
@@ -21,7 +25,11 @@ exports[`should render correctly: empty if everything is loaded 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.5.5
+  <span
+    aria-live="polite"
+  >
+    x_of_y_shown.5.5
+  </span>
 </div>
 `;
 
@@ -30,7 +38,11 @@ exports[`should render correctly: empty if no loadMore nor reload props 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.3.5
+  <span
+    aria-live="polite"
+  >
+    x_of_y_shown.3.5
+  </span>
 </div>
 `;
 
@@ -39,7 +51,11 @@ exports[`should render correctly: force show load more button if count % pageSiz
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_show.60
+  <span
+    aria-live="polite"
+  >
+    x_show.60
+  </span>
   <Button
     className="spacer-left"
     data-test="show-more"
@@ -55,7 +71,12 @@ exports[`should render correctly: loading 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.3.5
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    x_of_y_shown.3.5
+  </span>
   <Button
     className="spacer-left"
     data-test="show-more"
@@ -75,7 +96,11 @@ exports[`should render correctly: reload 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.3.5
+  <span
+    aria-live="polite"
+  >
+    x_of_y_shown.3.5
+  </span>
   <Button
     className="spacer-left"
     data-test="reload"
@@ -91,7 +116,12 @@ exports[`should render correctly: reload, loading 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_of_y_shown.3.5
+  <span
+    aria-busy={true}
+    aria-live="polite"
+  >
+    x_of_y_shown.3.5
+  </span>
   <Button
     className="spacer-left"
     data-test="reload"
@@ -111,6 +141,10 @@ exports[`should render correctly: total undefined 1`] = `
   className="list-footer spacer-top note text-center"
   tabIndex={-1}
 >
-  x_show.3
+  <span
+    aria-live="polite"
+  >
+    x_show.3
+  </span>
 </div>
 `;