a11y rework of pagination

elastic · Apr 10, 2020 · d9d8fa3 · d9d8fa3
1 parent 999502c
commit d9d8fa3
Show file tree

Hide file tree

Showing 28 changed files with 890 additions and 479 deletions.
diff --git a/src-docs/src/views/pagination/centered_pagination.js b/src-docs/src/views/pagination/centered_pagination.js
@@ -18,6 +18,7 @@ export default function() {
     <EuiFlexGroup justifyContent="spaceAround">
       <EuiFlexItem grow={false}>
         <EuiPagination
+          aria-label="Centered pagination example"
           pageCount={PAGE_COUNT}
           activePage={activePage}
           onPageClick={activePage => goToPage(activePage)}

diff --git a/src-docs/src/views/pagination/customizable_pagination.js b/src-docs/src/views/pagination/customizable_pagination.js
@@ -85,6 +85,7 @@ export default () => {
 
       <EuiFlexItem grow={false}>
         <EuiPagination
+          aria-label="Custom pagination example"
           pageCount={PAGE_COUNT}
           activePage={activePage}
           onPageClick={goToPage}

diff --git a/src-docs/src/views/pagination/few_pages.js b/src-docs/src/views/pagination/few_pages.js
@@ -12,6 +12,7 @@ export default function() {
 
   return (
     <EuiPagination
+      aria-label="Few pages example"
       pageCount={PAGE_COUNT}
       activePage={activePage}
       onPageClick={activePage => goToPage(activePage)}

diff --git a/src-docs/src/views/pagination/many_pages.js b/src-docs/src/views/pagination/many_pages.js
@@ -12,6 +12,7 @@ export default function() {
 
   return (
     <EuiPagination
+      aria-label="Many pages example"
       pageCount={PAGE_COUNT}
       activePage={activePage}
       onPageClick={activePage => goToPage(activePage)}

diff --git a/src-docs/src/views/pagination/pagination_example.js b/src-docs/src/views/pagination/pagination_example.js
@@ -15,6 +15,7 @@ import ManyPages from './many_pages';
 const manyPagesSource = require('!!raw-loader!./many_pages');
 const manyPagesHtml = renderToHtml(ManyPages);
 const manyPagesSnippet = `<EuiPagination
+  aria-label="my pagination"
   pageCount={higherThan5Number}
   activePage={this.state.activePage}
   onPageClick={this.goToPage}
@@ -25,6 +26,7 @@ import FewPages from './few_pages';
 const fewPagesSource = require('!!raw-loader!./few_pages');
 const fewPagesHtml = renderToHtml(FewPages);
 const fewPagesSnippet = `<EuiPagination
+  aria-label="my pagination"
   pageCount={lowerThan5Number}
   activePage={this.state.activePage}
   onPageClick={this.goToPage}
@@ -37,6 +39,7 @@ const centeredPaginationHtml = renderToHtml(CenteredPagination);
 const centeredPaginationSnippet = `<EuiFlexGroup justifyContent="spaceAround">
   <EuiFlexItem grow={false}>
     <EuiPagination
+      aria-label="my pagination"
       pageCount={pageCount}
       activePage={this.state.activePage}
       onPageClick={this.goToPage}
@@ -60,6 +63,7 @@ const customizablePaginationSnippet = `<EuiFlexGroup justifyContent="spaceBetwee
 
   <EuiFlexItem grow={false}>
     <EuiPagination
+      aria-label="my pagination"
       pageCount={pageCount}
       activePage={this.state.activePage}
       onPageClick={this.goToPage}
@@ -72,6 +76,7 @@ import Compressed from './compressed';
 const compressedSource = require('!!raw-loader!./compressed');
 const compressedHtml = renderToHtml(Compressed);
 const compressedSnippet = `<EuiPagination
+  aria-label="my pagination"
   pageCount={pageCount}
   activePage={this.state.activePage}
   onPageClick={this.goToPage}

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -685,6 +685,7 @@ export default class extends Component {
 
   render() {
     let optionalActionButtons;
+    const exampleId = 'example-id';
 
     if (this.areAnyRowsSelected() > 0) {
       optionalActionButtons = (
@@ -718,7 +719,7 @@ export default class extends Component {
           </EuiFlexGroup>
         </EuiTableHeaderMobile>
 
-        <EuiTable>
+        <EuiTable id={exampleId}>
           <EuiTableHeader>{this.renderHeaderCells()}</EuiTableHeader>
 
           <EuiTableBody>{this.renderRows()}</EuiTableBody>
@@ -729,6 +730,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiTablePagination
+          controls={exampleId}
           activePage={this.pager.getCurrentPageIndex()}
           itemsPerPage={this.state.itemsPerPage}
           itemsPerPageOptions={[5, 10, 20]}