[EuiBasicTable] Fix duplicate ID in EuiBasicTable's Select All checkb…

…ox(es) (#5237) * Fix Select All checkbox in EuiBasicTable duplicate ID - the Select All checkbox is shown in both the mobile and regular table header, so it was creating an a11y duplicate ID error * Add changelog entry
elastic · Oct 4, 2021 · 4212ba6 · 4212ba6
1 parent 2aa5bb0
commit 4212ba6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed tick and level alignment in `Eui[Dual]Range` ([#5181](https://github.com/elastic/eui/pull/5181))
+- Fixed duplicate IDs on mobile/desktop select all checkboxes in `EuiBasicTable` ([#5237](https://github.com/elastic/eui/pull/5237))
 
 **Breaking changes**
 

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1463,7 +1463,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                       checked={false}
                       compressed={false}
                       disabled={false}
-                      id="_selection_column-checkbox_generated-id"
+                      id="_selection_column-checkbox_generated-id_mobile"
                       indeterminate={false}
                       label="Select all rows"
                       onChange={[Function]}
@@ -1476,7 +1476,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                           checked={false}
                           className="euiCheckbox__input"
                           disabled={false}
-                          id="_selection_column-checkbox_generated-id"
+                          id="_selection_column-checkbox_generated-id_mobile"
                           onChange={[Function]}
                           type="checkbox"
                         />
@@ -1485,7 +1485,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                         />
                         <label
                           className="euiCheckbox__label"
-                          htmlFor="_selection_column-checkbox_generated-id"
+                          htmlFor="_selection_column-checkbox_generated-id_mobile"
                         >
                           Select all rows
                         </label>
@@ -1552,7 +1552,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                           compressed={false}
                           data-test-subj="checkboxSelectAll"
                           disabled={false}
-                          id="_selection_column-checkbox_generated-id"
+                          id="_selection_column-checkbox_generated-id_desktop"
                           indeterminate={false}
                           label={null}
                           onChange={[Function]}
@@ -1567,7 +1567,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
                               className="euiCheckbox__input"
                               data-test-subj="checkboxSelectAll"
                               disabled={false}
-                              id="_selection_column-checkbox_generated-id"
+                              id="_selection_column-checkbox_generated-id_desktop"
                               onChange={[Function]}
                               type="checkbox"
                             />

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
@@ -923,7 +923,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                         checked={false}
                         compressed={false}
                         disabled={false}
-                        id="_selection_column-checkbox_generated-id"
+                        id="_selection_column-checkbox_generated-id_mobile"
                         indeterminate={false}
                         label="Select all rows"
                         onChange={[Function]}
@@ -936,7 +936,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                             checked={false}
                             className="euiCheckbox__input"
                             disabled={false}
-                            id="_selection_column-checkbox_generated-id"
+                            id="_selection_column-checkbox_generated-id_mobile"
                             onChange={[Function]}
                             type="checkbox"
                           />
@@ -945,7 +945,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                           />
                           <label
                             className="euiCheckbox__label"
-                            htmlFor="_selection_column-checkbox_generated-id"
+                            htmlFor="_selection_column-checkbox_generated-id_mobile"
                           >
                             Select all rows
                           </label>
@@ -1012,7 +1012,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                             compressed={false}
                             data-test-subj="checkboxSelectAll"
                             disabled={false}
-                            id="_selection_column-checkbox_generated-id"
+                            id="_selection_column-checkbox_generated-id_desktop"
                             indeterminate={false}
                             label={null}
                             onChange={[Function]}
@@ -1027,7 +1027,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
                                 className="euiCheckbox__input"
                                 data-test-subj="checkboxSelectAll"
                                 disabled={false}
-                                id="_selection_column-checkbox_generated-id"
+                                id="_selection_column-checkbox_generated-id_desktop"
                                 onChange={[Function]}
                                 type="checkbox"
                               />

diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -528,7 +528,6 @@ export class EuiBasicTable<T = any> extends Component<
   }
 
   tableId = htmlIdGenerator('__table')();
-  selectAllCheckboxId = htmlIdGenerator('_selection_column-checkbox')();
 
   render() {
     const {
@@ -733,6 +732,8 @@ export class EuiBasicTable<T = any> extends Component<
     );
   }
 
+  selectAllIdGenerator = htmlIdGenerator('_selection_column-checkbox');
+
   renderSelectAll = (isMobile: boolean) => {
     const { items, selection } = this.props;
 
@@ -763,7 +764,7 @@ export class EuiBasicTable<T = any> extends Component<
       <EuiI18n token="euiBasicTable.selectAllRows" default="Select all rows">
         {(selectAllRows: string) => (
           <EuiCheckbox
-            id={this.selectAllCheckboxId}
+            id={this.selectAllIdGenerator(isMobile ? 'mobile' : 'desktop')}
             type={isMobile ? undefined : 'inList'}
             checked={checked}
             disabled={disabled}