[ML] Fix missing accessible labels on scatterplot matrix form controls#264962
Merged
[ML] Fix missing accessible labels on scatterplot matrix form controls#264962
Conversation
Fixes the "Random scoring" and "Dynamic size" switch buttons in the
ML Results Explorer to use descriptive labels (`showLabel={false}`)
so screen readers announce the title (e.g., "Random scoring, off, switch")
instead of just "Off, off, switch".
Removes unused TOGGLE_ON/TOGGLE_OFF constants and their translations.
Agent-Logs-Url: https://github.com/elastic/kibana/sessions/933567f0-653f-4427-98dc-724292467a02
Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix missing title for switch button in results explorer
[ML] Fix missing accessible labels on scatterplot matrix switch buttons
Apr 22, 2026
Contributor
|
@copilot fix |
…nd for tooltips Address reviewer feedback: - Remove OptionLabelWithIconTip component and interface - Move tooltip icons into EuiFormRow labelAppend prop - Use plain text strings for EuiFormRow labels for proper accessibility Agent-Logs-Url: https://github.com/elastic/kibana/sessions/3c3e3474-81fc-4464-af07-d41e9a912d85 Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
Contributor
Author
Done in
Fixed in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot
AI
changed the title
[ML] Fix missing accessible labels on scatterplot matrix switch buttons
[ML] Fix missing accessible labels on scatterplot matrix form controls
Apr 23, 2026
alexwizp
added
Project:Accessibility
release_note:skip
Contributor
|
Pinging @elastic/kibana-accessibility (Project:Accessibility) |
Contributor
|
/ci |
Contributor
|
/ci |
Contributor
|
/ci |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
cc @alexwizp @Copilot |
Contributor
|
Pinging @elastic/ml-ui (:ml) |
Contributor
|
/ci |
Contributor
peteharverson
left a comment
peteharverson
left a comment
There was a problem hiding this comment.
Thanks for picking this one up @alexwizp ! The a11y fix for the screenreader works great, but left a comment around the positioning of the EuiIconTip.
| label={i18n.translate('xpack.ml.splom.fieldSelectionLabel', { | ||
| defaultMessage: 'Fields', | ||
| })} | ||
| labelAppend={ |
Contributor
There was a problem hiding this comment.
Could you see if you can get the EuiIconTip positioned directly next to the form input label as it was previously? Otherwise with the right align positioning, the help tooltip is less discoverable and seems out of context.
Before:
With this change:
This is probably achievable with a CSS override to target the label / label append wrapper div / span and change its justify-content.
Contributor
There was a problem hiding this comment.
@peteharverson Yes, I understand your concern. On the other hand, I’m not sure that overriding styles is a good idea. The current solution is fully in line with EUI recommendations.
Let me explain why we initially decided to move that out from the main label. The value of the main label is used as an aria attribute for EuiSwitch, and as a result, the tooltip was included in the announcement when the switch changed.
However, if you feel strongly about keeping the previous design, I think we can adjust the aria attributes a bit to make it work. But again, for now, the correct approach is to use the appendLabel
Contributor
|
@peteharverson code was updated 
|
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
cc @alexwizp @Copilot |
peteharverson
approved these changes
Apr 29, 2026
Contributor
peteharverson
left a comment
peteharverson
left a comment
There was a problem hiding this comment.
Tested and LGTM. Thanks for making those changes @alexwizp !
Contributor
|
Starting backport for target branches: 9.3, 9.4 https://github.com/elastic/kibana/actions/runs/25122300090 |
Contributor
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Apr 29, 2026
…ontrols (#264962) (#266474) # Backport This will backport the following commits from `main` to `9.4`: - [[ML] Fix missing accessible labels on scatterplot matrix form controls (#264962)](#264962) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Copilot","email":"198982749+Copilot@users.noreply.github.com"},"sourceCommit":{"committedDate":"2026-04-29T16:55:14Z","message":"[ML] Fix missing accessible labels on scatterplot matrix form controls (#264962)\n\nCloses: https://github.com/elastic/kibana/issues/264955\n\nThe \"Random scoring\" and \"Dynamic size\" switches in the Results Explorer\nscatterplot matrix announce as \"Off, off, switch\" to screen readers\ninstead of including their descriptive titles, violating WCAG 4.1.2\n(Name, Role, Value).\n\n- Set `label` to the descriptive title (`'Random scoring'` / `'Dynamic\nsize'`) with `showLabel={false}` so the label is visually hidden but\nexposed to assistive technology. The switch role communicates on/off\nstate via `aria-checked`.\n- Removed the `OptionLabelWithIconTip` component and moved tooltip icons\ninto `EuiFormRow`'s `labelAppend` prop, so all form row labels are plain\ntext strings with proper accessibility association.\n- Removed now-unused `TOGGLE_ON`/`TOGGLE_OFF` constants and their\ntranslation entries.\n\nScreen readers will now announce: **\"Random scoring, off, switch\"**.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>\nCo-authored-by: Alexey Antonov <alexwizp@gmail.com>","sha":"622954a75aac673d5f0aa51f04ef3d5651c02bb3","branchLabelMapping":{"^v9.5.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility",":ml","release_note:skip","backport:version","v9.4.0","a11y:agent-pr","v9.5.0","v9.3.4"],"title":"[ML] Fix missing accessible labels on scatterplot matrix form controls","number":264962,"url":"https://github.com/elastic/kibana/pull/264962","mergeCommit":{"message":"[ML] Fix missing accessible labels on scatterplot matrix form controls (#264962)\n\nCloses: https://github.com/elastic/kibana/issues/264955\n\nThe \"Random scoring\" and \"Dynamic size\" switches in the Results Explorer\nscatterplot matrix announce as \"Off, off, switch\" to screen readers\ninstead of including their descriptive titles, violating WCAG 4.1.2\n(Name, Role, Value).\n\n- Set `label` to the descriptive title (`'Random scoring'` / `'Dynamic\nsize'`) with `showLabel={false}` so the label is visually hidden but\nexposed to assistive technology. The switch role communicates on/off\nstate via `aria-checked`.\n- Removed the `OptionLabelWithIconTip` component and moved tooltip icons\ninto `EuiFormRow`'s `labelAppend` prop, so all form row labels are plain\ntext strings with proper accessibility association.\n- Removed now-unused `TOGGLE_ON`/`TOGGLE_OFF` constants and their\ntranslation entries.\n\nScreen readers will now announce: **\"Random scoring, off, switch\"**.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>\nCo-authored-by: Alexey Antonov <alexwizp@gmail.com>","sha":"622954a75aac673d5f0aa51f04ef3d5651c02bb3"}},"sourceBranch":"main","suggestedTargetBranches":["9.4","9.3"],"targetPullRequestStates":[{"branch":"9.4","label":"v9.4.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.5.0","branchLabelMappingKey":"^v9.5.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/264962","number":264962,"mergeCommit":{"message":"[ML] Fix missing accessible labels on scatterplot matrix form controls (#264962)\n\nCloses: https://github.com/elastic/kibana/issues/264955\n\nThe \"Random scoring\" and \"Dynamic size\" switches in the Results Explorer\nscatterplot matrix announce as \"Off, off, switch\" to screen readers\ninstead of including their descriptive titles, violating WCAG 4.1.2\n(Name, Role, Value).\n\n- Set `label` to the descriptive title (`'Random scoring'` / `'Dynamic\nsize'`) with `showLabel={false}` so the label is visually hidden but\nexposed to assistive technology. The switch role communicates on/off\nstate via `aria-checked`.\n- Removed the `OptionLabelWithIconTip` component and moved tooltip icons\ninto `EuiFormRow`'s `labelAppend` prop, so all form row labels are plain\ntext strings with proper accessibility association.\n- Removed now-unused `TOGGLE_ON`/`TOGGLE_OFF` constants and their\ntranslation entries.\n\nScreen readers will now announce: **\"Random scoring, off, switch\"**.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>\nCo-authored-by: Alexey Antonov <alexwizp@gmail.com>","sha":"622954a75aac673d5f0aa51f04ef3d5651c02bb3"}},{"branch":"9.3","label":"v9.3.4","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com> Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes: #264955
The "Random scoring" and "Dynamic size" switches in the Results Explorer scatterplot matrix announce as "Off, off, switch" to screen readers instead of including their descriptive titles, violating WCAG 4.1.2 (Name, Role, Value).
labelto the descriptive title ('Random scoring'/'Dynamic size') withshowLabel={false}so the label is visually hidden but exposed to assistive technology. The switch role communicates on/off state viaaria-checked.OptionLabelWithIconTipcomponent and moved tooltip icons intoEuiFormRow'slabelAppendprop, so all form row labels are plain text strings with proper accessibility association.TOGGLE_ON/TOGGLE_OFFconstants and their translation entries.Screen readers will now announce: "Random scoring, off, switch".