From 699080d9acf618d25c667dceef7aa891190dc987 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 16 Jun 2025 23:23:07 +0200
Subject: [PATCH] [7.17] [a11y][ml] Add visually hidden label for screenreader
 for select checkboxes in anomaly detection job selection flyout (#224025)
 (#224119)

# Backport

This will backport the following commits from `main` to `7.17`:
- [[a11y][ml] Add visually hidden label for screenreader for select
checkboxes in anomaly detection job selection flyout
(#224025)](https://github.com/elastic/kibana/pull/224025)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Paulina
Shakirova","email":"paulina.shakirova@elastic.co"},"sourceCommit":{"committedDate":"2025-06-16T18:05:18Z","message":"[a11y][ml]
Add visually hidden label for screenreader for select checkboxes in
anomaly detection job selection flyout (#224025)\n\n## Summary\n\nThis
PR resolves [[ML] Anomaly Detection: Job selector flyout checkboxes\nin
the first column missing title
from\nannouncement](https://github.com/elastic/kibana/issues/216802).\n\n####
This is a follow up from\nhttps://github.com/elastic/kibana/pull/221865
pr. (Closed because of\nmerge
issues.)\n\n\nhttps://github.com/user-attachments/assets/a6796576-cc46-4769-ab3d-c8f5dc37409e\n\nFixes
https://github.com/elastic/kibana/issues/216802","sha":"3f5e970d3bbaa9d73412b67937a5e1c82f94de06","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","backport:all-open","a11y","v9.1.0"],"title":"[a11y][ml]
Add visually hidden label for screenreader for select checkboxes in
anomaly detection job selection
flyout","number":224025,"url":"https://github.com/elastic/kibana/pull/224025","mergeCommit":{"message":"[a11y][ml]
Add visually hidden label for screenreader for select checkboxes in
anomaly detection job selection flyout (#224025)\n\n## Summary\n\nThis
PR resolves [[ML] Anomaly Detection: Job selector flyout checkboxes\nin
the first column missing title
from\nannouncement](https://github.com/elastic/kibana/issues/216802).\n\n####
This is a follow up from\nhttps://github.com/elastic/kibana/pull/221865
pr. (Closed because of\nmerge
issues.)\n\n\nhttps://github.com/user-attachments/assets/a6796576-cc46-4769-ab3d-c8f5dc37409e\n\nFixes
https://github.com/elastic/kibana/issues/216802","sha":"3f5e970d3bbaa9d73412b67937a5e1c82f94de06"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/224025","number":224025,"mergeCommit":{"message":"[a11y][ml]
Add visually hidden label for screenreader for select checkboxes in
anomaly detection job selection flyout (#224025)\n\n## Summary\n\nThis
PR resolves [[ML] Anomaly Detection: Job selector flyout checkboxes\nin
the first column missing title
from\nannouncement](https://github.com/elastic/kibana/issues/216802).\n\n####
This is a follow up from\nhttps://github.com/elastic/kibana/pull/221865
pr. (Closed because of\nmerge
issues.)\n\n\nhttps://github.com/user-attachments/assets/a6796576-cc46-4769-ab3d-c8f5dc37409e\n\nFixes
https://github.com/elastic/kibana/issues/216802","sha":"3f5e970d3bbaa9d73412b67937a5e1c82f94de06"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
---
 .../custom_selection_table.js                      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js b/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js
index d52d22f6b4aa..23cdfbcdfb2b 100644
--- a/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js
+++ b/x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js
@@ -192,6 +192,7 @@ export function CustomSelectionTable({
       <EuiCheckbox
         id={`${mobile ? `mobile-` : ''}${selectAllCheckboxId}`}
         label={mobile ? selectAll : null}
+        aria-label={selectAll}
         checked={areAllItemsSelected()}
         onChange={toggleAll}
         type={mobile ? null : 'inList'}
@@ -278,6 +279,10 @@ export function CustomSelectionTable({
                   }
                   id={`${item[tableItemId]}-checkbox`}
                   data-test-subj={`${item[tableItemId]}-checkbox`}
+                  aria-label={i18n.translate('xpack.ml.jobSelector.customTable.checkboxAriaLabel', {
+                    defaultMessage: 'Select job {itemId}',
+                    values: { itemId: item[tableItemId] },
+                  })}
                   checked={isItemSelected(item[tableItemId])}
                   onChange={() => toggleItem(item[tableItemId])}
                   type="inList"
@@ -288,6 +293,13 @@ export function CustomSelectionTable({
                   id={item[tableItemId]}
                   data-test-subj={`${item[tableItemId]}-radio-button`}
                   checked={isItemSelected(item[tableItemId])}
+                  aria-label={i18n.translate(
+                    'xpack.ml.jobSelector.customTable.singleSelectionRadioButtonAriaLabel',
+                    {
+                      defaultMessage: 'Select job {itemId}',
+                      values: { itemId: item[tableItemId] },
+                    }
+                  )}
                   onChange={() => toggleItem(item[tableItemId])}
                   disabled={radioDisabledCheck !== undefined ? radioDisabledCheck(item) : undefined}
                 />
@@ -368,7 +380,7 @@ export function CustomSelectionTable({
             fullWidth
             isInvalid={error !== null}
             error={getError(error)}
-            style={{ maxHeight: '0px' }}
+            css={{ maxHeight: '0px' }}
           >
             <Fragment />
           </EuiFormRow>