github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[7.17] [a11y][ml] Add visually hidden label for screenreader for select checkboxes in anomaly detection job selection flyout (#224025) (#224119)

Browse source 
# 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>
This commit is contained in:
Kibana Machine 2025-06-16 23:23:07 +02:00 • committed by GitHub
parent 437bc00698
commit 699080d9ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js
View file

@ -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>