Adding aria-label for discover data grid select document checkbox (#1…

…31277)
elastic · May 3, 2022 · 02c21aa · 02c21aa
1 parent 9d7b459
commit 02c21aa
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_document_selection.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_document_selection.tsx
@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
 import { DiscoverGridContext } from './discover_grid_context';
 import { ElasticSearchHit } from '../../types';
 
@@ -36,6 +37,11 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   const id = useMemo(() => getDocId(doc), [doc]);
   const checked = useMemo(() => selectedDocs.includes(id), [selectedDocs, id]);
 
+  const toggleDocumentSelectionLabel = i18n.translate('discover.grid.selectDoc', {
+    defaultMessage: `Select document '{rowNumber}'`,
+    values: { rowNumber: rowIndex + 1 },
+  });
+
   useEffect(() => {
     if (expanded && doc && expanded._id === doc._id) {
       setCellProps({
@@ -51,7 +57,7 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   return (
     <EuiCheckbox
       id={id}
-      label=""
+      aria-label={toggleDocumentSelectionLabel}
       checked={checked}
       data-test-subj={`dscGridSelectDoc-${id}`}
       onChange={() => {