From 15410de64f63eb971ea7aa679f26355b4b9a0097 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 4 Oct 2021 16:02:56 -0700
Subject: [PATCH] Fix various axe failures on custom EuiTable example

- missing labels on checkbox elements, duplicate checkbox ID (solved in #5237)

- These are all a11y solutions that come OOTB in EuiBasicTable, but need to be added for the custom example
---
 src-docs/src/views/tables/custom/custom.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
index c141934bf5b8..50e20d28e7fe 100644
--- a/src-docs/src/views/tables/custom/custom.js
+++ b/src-docs/src/views/tables/custom/custom.js
@@ -440,8 +440,10 @@ export default class extends Component {
   renderSelectAll = (mobile) => {
     return (
       <EuiCheckbox
-        id="selectAllCheckbox"
-        label={mobile ? 'Select all' : null}
+        id={mobile ? 'selectAllCheckboxMobile' : 'selectAllCheckboxDesktop'}
+        label={mobile ? 'Select all rows' : null}
+        aria-label="Select all rows"
+        title="Select all rows"
         checked={this.areAllItemsSelected()}
         onChange={this.toggleAll.bind(this)}
         type={mobile ? null : 'inList'}
@@ -522,6 +524,8 @@ export default class extends Component {
                 checked={this.isItemSelected(item.id)}
                 onChange={this.toggleItem.bind(this, item.id)}
                 type="inList"
+                title="Select this row"
+                aria-label="Select this row"
               />
             </EuiTableRowCellCheckbox>
           );