fix(eui): remove duplicated aria-label in pagination (#8597)

Author: weronikaolejniczak

packages/eui/changelogs/upcoming/8597.md

@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output
+- Set a more specific `aria-current="page"` on list items in `EuiPagination`

packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -962,15 +962,14 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             />
           </button>
           <ul
-            aria-label="Pagination for table: "
             class="euiPagination__list emotion-euiPagination__list"
           >
             <li
               class="euiPagination__item"
             >
               <button
                 aria-controls="__table_generated-id"
-                aria-current="true"
+                aria-current="page"
                 aria-label="Page 1 of 2"
                 class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
                 data-test-subj="pagination-button-0"

packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -89,7 +89,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
     />
   </a>
   <ul
-    aria-label="Pagination for table: "
     class="euiPagination__list emotion-euiPagination__list"
   >
     <li
@@ -119,7 +118,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
     >
       <button
         aria-controls="__table_generated-id"
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 2 of 2"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-1"

packages/eui/src/components/basic_table/basic_table.test.tsx

@@ -246,7 +246,7 @@ describe('EuiBasicTable', () => {
 
     expect(getByRole('list')).toBeTruthy();
     expect(
-      container.querySelector('[aria-current="true"]')?.textContent
+      container.querySelector('[aria-current="page"]')?.textContent
     ).toEqual('1');
   });
 
@@ -264,7 +264,7 @@ describe('EuiBasicTable', () => {
     const { container } = render(<EuiBasicTable {...props} />);
 
     expect(
-      container.querySelector('[aria-current="true"]')?.textContent
+      container.querySelector('[aria-current="page"]')?.textContent
     ).toEqual('2');
   });
 

packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -63,7 +63,6 @@ exports[`EuiDataGrid pagination renders 1`] = `
         />
       </a>
       <ul
-        aria-label="Pagination for preceding grid: test grid"
         class="euiPagination__list emotion-euiPagination__list"
       >
         <li
@@ -93,7 +92,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         >
           <button
             aria-controls="generated-id"
-            aria-current="true"
+            aria-current="page"
             aria-label="Page 2 of 2"
             class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
             data-test-subj="pagination-button-1"

packages/eui/src/components/pagination/__snapshots__/pagination.test.tsx.snap

@@ -29,14 +29,13 @@ exports[`EuiPagination is rendered 1`] = `
     />
   </button>
   <ul
-    aria-label="aria-label"
     class="euiPagination__list emotion-euiPagination__list"
   >
     <li
       class="euiPagination__item"
     >
       <button
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 1 of 1"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-0"
@@ -242,7 +241,7 @@ exports[`EuiPagination props activePage is rendered 1`] = `
       class="euiPagination__item"
     >
       <button
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 6 of 10"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-5"
@@ -392,7 +391,7 @@ exports[`EuiPagination props aria-controls is rendered 1`] = `
     >
       <button
         aria-controls="idOfTable"
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 1 of 1"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-0"
@@ -614,7 +613,7 @@ exports[`EuiPagination props pageCount is rendered 1`] = `
       class="euiPagination__item"
     >
       <button
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 1 of 10"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-0"
@@ -789,7 +788,7 @@ exports[`EuiPagination props responsive can be customized 1`] = `
       class="euiPagination__item"
     >
       <button
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 1 of 1"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-0"
@@ -858,7 +857,7 @@ exports[`EuiPagination props responsive can be false 1`] = `
       class="euiPagination__item"
     >
       <button
-        aria-current="true"
+        aria-current="page"
         aria-label="Page 1 of 1"
         class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
         data-test-subj="pagination-button-0"

packages/eui/src/components/pagination/pagination.tsx

@@ -281,19 +281,8 @@ export const EuiPagination: FunctionComponent<Props> = ({
 
       const selectablePages = pages;
 
-      const accessibleName = {
-        ...(rest['aria-label'] && { 'aria-label': rest['aria-label'] }),
-        ...(rest['aria-labelledby'] && {
-          'aria-labelledby': rest['aria-labelledby'],
-        }),
-      };
-
       centerPageCount = (
-        <ul
-          className="euiPagination__list"
-          css={styles.euiPagination__list}
-          {...accessibleName}
-        >
+        <ul className="euiPagination__list" css={styles.euiPagination__list}>
           {firstPageButtons}
           {selectablePages}
           {lastPageButtons}

packages/eui/src/components/pagination/pagination_button.tsx

@@ -55,7 +55,7 @@ export const EuiPaginationButton: FunctionComponent<Props> = ({
     color: 'text',
     'data-test-subj': `pagination-button-${pageIndex}`,
     isDisabled: isActive,
-    ...(isActive && { 'aria-current': true }),
+    ...(isActive && { 'aria-current': 'page' }),
     ...(rest['aria-controls'] && { href: `#${rest['aria-controls']}` }),
     ...rest,
   };

packages/eui/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap

@@ -66,7 +66,6 @@ exports[`EuiTablePagination renders 1`] = `
             />
           </button>
           <ul
-            aria-label="aria-label"
             class="euiPagination__list emotion-euiPagination__list"
           >
             <li
@@ -93,7 +92,7 @@ exports[`EuiTablePagination renders 1`] = `
               class="euiPagination__item"
             >
               <button
-                aria-current="true"
+                aria-current="page"
                 aria-label="Page 2 of 5"
                 class="euiButtonEmpty euiPaginationButton emotion-euiButtonDisplay-euiButtonEmpty-s-empty-disabled-isDisabled-euiPaginationButton-isActive"
                 data-test-subj="pagination-button-1"