From d96e254c2053b6ae1d79380bd7db8084961f4477 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 23 Nov 2021 14:10:01 -0500
Subject: [PATCH] Wrapping with ScreenReaderOnly

---
 .../in_memory_table.test.tsx.snap             | 11 ++-
 .../__snapshots__/data_grid.test.tsx.snap     |  9 ++-
 .../__snapshots__/pagination.test.tsx.snap    | 81 ++++++++++++++++---
 src/components/pagination/pagination.tsx      | 18 ++++-
 .../table_pagination.test.tsx.snap            | 18 ++++-
 5 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 5e8e5d7dff2..cab35a27421 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -485,7 +485,16 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           aria-label="Pagination for table: "
                           className="euiPagination"
                         >
-                          Page 2 of 2
+                          <EuiScreenReaderOnly>
+                            <span
+                              aria-atomic="true"
+                              aria-relevant="additions text"
+                              className="euiScreenReaderOnly"
+                              role="status"
+                            >
+                              Page 2 of 2
+                            </span>
+                          </EuiScreenReaderOnly>
                           <EuiPaginationButtonArrow
                             ariaControls="__table_generated-id"
                             disabled={false}
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 1d5557c8d5e..d0b2f430718 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -43,7 +43,14 @@ exports[`EuiDataGrid pagination renders 1`] = `
       aria-label="Pagination for preceding grid: test grid"
       class="euiPagination"
     >
-      Page 2 of 2
+      <span
+        aria-atomic="true"
+        aria-relevant="additions text"
+        class="euiScreenReaderOnly"
+        role="status"
+      >
+        Page 2 of 2
+      </span>
       <a
         aria-controls="generated-id"
         aria-label="Previous page"
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 80a2160aa3f..04ce46fa087 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -6,7 +6,14 @@ exports[`EuiPagination is rendered 1`] = `
   class="euiPagination testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  Page 1 of 1
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of 1
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -69,7 +76,14 @@ exports[`EuiPagination props activePage can be -1 1`] = `
 <nav
   class="euiPagination"
 >
-  Last Page of collection
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Last Page of collection
+  </span>
   <button
     aria-label="First page"
     class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -133,7 +147,14 @@ exports[`EuiPagination props activePage is rendered 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 6 of 10
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 6 of 10
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -341,7 +362,14 @@ exports[`EuiPagination props aria-controls is rendered 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of 1
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of 1
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -404,7 +432,14 @@ exports[`EuiPagination props compressed is rendered 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of 1
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page
+  </span>
   <button
     aria-label="First page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -479,7 +514,14 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of collection
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of collection
+  </span>
   <button
     aria-label="First page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -543,7 +585,14 @@ exports[`EuiPagination props pageCount is rendered 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of 10
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of 10
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -711,7 +760,14 @@ exports[`EuiPagination props responsive can be customized 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of 1
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of 1
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -773,7 +829,14 @@ exports[`EuiPagination props responsive can be false 1`] = `
 <nav
   class="euiPagination"
 >
-  Page 1 of 1
+  <span
+    aria-atomic="true"
+    aria-relevant="additions text"
+    class="euiScreenReaderOnly"
+    role="status"
+  >
+    Page 1 of 1
+  </span>
   <button
     aria-label="Previous page"
     class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index d732aff564b..399224653ea 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -15,6 +15,7 @@ import { EuiI18n, useEuiI18n } from '../i18n';
 import { EuiText } from '../text';
 import { EuiPaginationButtonArrow } from './pagination_button_arrow';
 import { EuiBreakpointSize, useIsWithinBreakpoints } from '../../services';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 const MAX_VISIBLE_PAGES = 5;
 const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
@@ -282,12 +283,16 @@ export const EuiPagination: FunctionComponent<Props> = ({
       );
     }
   }
+
+  // All the i18n strings used to build the whole SR-only text
   const lastLabel = useEuiI18n('euiPagination.last', 'Last');
   const pageLabel = useEuiI18n('euiPagination.page', 'Page');
   const ofLabel = useEuiI18n('euiPagination.of', 'of');
   const collectionLabel = useEuiI18n('euiPagination.collection', 'collection');
   const fromEndLabel = useEuiI18n('euiPagination.fromEndLabel', 'from end');
 
+  // Based on the `activePage` count, build the front of the SR-only text
+  // i.e. `Page 1`, `Page 2 from end`, `Last Page`
   const accessiblePageString = (): string => {
     if (activePage < -1)
       return `${pageLabel} ${Math.abs(activePage)} ${fromEndLabel}`;
@@ -295,14 +300,23 @@ export const EuiPagination: FunctionComponent<Props> = ({
     return `${pageLabel} ${activePage + 1}`;
   };
 
+  // If `pageCount` is unknown call it `collection`
   const accessibleCollectionString =
     pageCount === 0 ? collectionLabel : pageCount.toString();
 
-  const accessiblePageCount = `${accessiblePageString()} ${ofLabel} ${accessibleCollectionString}`;
+  // The compressed version already should the activePage with pageCount, so it just needs `Page`
+  // The other types will append the whole string with total pageCount or `collection`
+  const accessiblePageCount = compressed
+    ? pageLabel
+    : `${accessiblePageString()} ${ofLabel} ${accessibleCollectionString}`;
 
   return (
     <nav className={classes} {...rest}>
-      {accessiblePageCount}
+      <EuiScreenReaderOnly>
+        <span aria-atomic="true" aria-relevant="additions text" role="status">
+          {accessiblePageCount}
+        </span>
+      </EuiScreenReaderOnly>
       {firstButton}
       {previousButton}
       {centerPageCount}
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 53afbdb38dc..00292562014 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -44,7 +44,14 @@ exports[`EuiTablePagination is rendered 1`] = `
       class="euiPagination testClass1 testClass2"
       data-test-subj="test subject string"
     >
-      Page 2 of 5
+      <span
+        aria-atomic="true"
+        aria-relevant="additions text"
+        class="euiScreenReaderOnly"
+        role="status"
+      >
+        Page 2 of 5
+      </span>
       <button
         aria-label="Previous page"
         class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
@@ -200,7 +207,14 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
       class="euiPagination testClass1 testClass2"
       data-test-subj="test subject string"
     >
-      Page 2 of 5
+      <span
+        aria-atomic="true"
+        aria-relevant="additions text"
+        class="euiScreenReaderOnly"
+        role="status"
+      >
+        Page 2 of 5
+      </span>
       <button
         aria-label="Previous page"
         class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"