a11y rework of [EuiPagination] and friends

CHANGELOG.md

@@ -4,6 +4,9 @@
 - Added support for `EuiCodeEditor` to set `readonly` and `id` on `<textarea />` ([#3212](https://github.com/elastic/eui/pull/3212))
 - Added `EuiComment` component ([#3179](https://github.com/elastic/eui/pull/3179))
 
+**Breaking changes**
+- Improved `EuiPagination`, `EuiDataGrid`, `EuiBasicTable` and `EuiInMemoryTable` accessibility, causing `EuiPaginationButton` to require a new prop `pageIndex` ([#3294](https://github.com/elastic/eui/pull/3294))
+
 **Deprecation**
 
 - Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -306,6 +306,7 @@ export class GuidePageChrome extends Component {
           toggleOpenOnMobile={this.toggleOpenOnMobile}
           isOpenOnMobile={this.state.isSideNavOpenOnMobile}
           items={sideNav}
+          aria-label="Primary"
         />
       );
     } else {

src-docs/src/views/datagrid/additional_controls.js

@@ -57,7 +57,7 @@ export default () => {
 
   return (
     <EuiDataGrid
-      aria-label="Top EUI contributors"
+      aria-label="Data grid demo with additional controls"
       columns={columns}
       columnVisibility={{
         visibleColumns: visibleColumns,

src-docs/src/views/datagrid/container.js

@@ -55,7 +55,7 @@ export default () => {
     <EuiPanel style={{ width: 400, paddingBottom: 4 }} paddingSize="none">
       <div style={{ height: 300 }}>
         <EuiDataGrid
-          aria-label="Top EUI contributors"
+          aria-label="Container constrained data grid demo"
           columns={columns}
           columnVisibility={{
             visibleColumns: visibleColumns,

src-docs/src/views/datagrid/in_memory.js

@@ -119,7 +119,7 @@ export default () => {
 
   return (
     <EuiDataGrid
-      aria-label="Data grid demo"
+      aria-label="inMemory level defaulting to undefined data grid demo"
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={raw_data.length}

src-docs/src/views/datagrid/in_memory_pagination.js

@@ -103,7 +103,7 @@ export default () => {
 
   return (
     <EuiDataGrid
-      aria-label="Data grid demo"
+      aria-label="inMemory level set to pagination data grid demo"
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={raw_data.length}

src-docs/src/views/datagrid/in_memory_sorting.js

@@ -89,7 +89,7 @@ export default () => {
 
   return (
     <EuiDataGrid
-      aria-label="Data grid demo"
+      aria-label="inMemory level set to sorting data grid demo"
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={raw_data.length}

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)}

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}

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)}

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)}

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}

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]}