[a11y] Fix Eui modal title annoucment#250459
Merged
saarikabhasi merged 3 commits intoelastic:mainfrom Jan 29, 2026
Merged
Conversation
Contributor
|
I've tested this and it's working. I only have one question. Have you spoken to the a11y team to confirm that the focus being on the input instead of the modal heading is expected behavior from an a11y perspective? I only ask because I've had a situation before where I thought it made sense to change where the focus landed, but actually it was unhelpful to someone with accessibility issues. |
Member
Author
|
@seialkali I checked the WAI documentation Dialog(modal) pattern and it says, Since it has just one textBox and the create ruleset modal doesn't have any limitation mentioned in the WAI documentation), I think it's probably fine to following this pattern. But for sanity check will check with EUI. |
Contributor
|
Thanks @saarikabhasi! Yeah I think it's best to double check with EUI to confirm. Since the heading is a focusable element and it comes before the text input, I would have interpreted that to mean that the heading should be focused first, but I could be wrong! |
seialkali
approved these changes
Jan 29, 2026
Contributor
seialkali
left a comment
There was a problem hiding this comment.
Thanks for looking into my question on focus placement!
Contributor
|
Starting backport for target branches: 9.3 |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
|
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jan 29, 2026
## Summary Currently, create query rules set model header is set to default component which is `<h1>`. This causes voiceover to announce as heading level 1, this cause a bit of confusion as the actua pagel has heading level 1 as "Query rules". Changing to use `<div>` tag, so that heading would not be annouced as h1. Additionally, i have also added inital focus to text field. https://github.com/user-attachments/assets/2e4f14f6-76a5-4114-ac61-1a14866416b4 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) (cherry picked from commit bcaea17)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jan 29, 2026
# Backport This will backport the following commits from `main` to `9.3`: - [[a11y] Fix Eui modal title annoucment (#250459)](#250459) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Saarika Bhasi","email":"55930906+saarikabhasi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2026-01-29T20:59:06Z","message":"[a11y] Fix Eui modal title annoucment (#250459)\n\n## Summary\n\nCurrently, create query rules set model header is set to default\ncomponent which is `<h1>`. This causes voiceover to announce as heading\nlevel 1, this cause a bit of confusion as the actua pagel has heading\nlevel 1 as \"Query rules\". Changing to use `<div>` tag, so that heading\nwould not be annouced as h1.\nAdditionally, i have also added inital focus to text field. \n\n\nhttps://github.com/user-attachments/assets/2e4f14f6-76a5-4114-ac61-1a14866416b4\n\n\n\n### Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers should verify this PR satisfies this list as well.\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"bcaea17a3004e15d01927c56fb8b5e19a1ec8f12","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Search","backport:version","v9.3.0","v9.4.0"],"title":"[a11y] Fix Eui modal title annoucment","number":250459,"url":"https://github.com/elastic/kibana/pull/250459","mergeCommit":{"message":"[a11y] Fix Eui modal title annoucment (#250459)\n\n## Summary\n\nCurrently, create query rules set model header is set to default\ncomponent which is `<h1>`. This causes voiceover to announce as heading\nlevel 1, this cause a bit of confusion as the actua pagel has heading\nlevel 1 as \"Query rules\". Changing to use `<div>` tag, so that heading\nwould not be annouced as h1.\nAdditionally, i have also added inital focus to text field. \n\n\nhttps://github.com/user-attachments/assets/2e4f14f6-76a5-4114-ac61-1a14866416b4\n\n\n\n### Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers should verify this PR satisfies this list as well.\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"bcaea17a3004e15d01927c56fb8b5e19a1ec8f12"}},"sourceBranch":"main","suggestedTargetBranches":["9.3"],"targetPullRequestStates":[{"branch":"9.3","label":"v9.3.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/250459","number":250459,"mergeCommit":{"message":"[a11y] Fix Eui modal title annoucment (#250459)\n\n## Summary\n\nCurrently, create query rules set model header is set to default\ncomponent which is `<h1>`. This causes voiceover to announce as heading\nlevel 1, this cause a bit of confusion as the actua pagel has heading\nlevel 1 as \"Query rules\". Changing to use `<div>` tag, so that heading\nwould not be annouced as h1.\nAdditionally, i have also added inital focus to text field. \n\n\nhttps://github.com/user-attachments/assets/2e4f14f6-76a5-4114-ac61-1a14866416b4\n\n\n\n### Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers should verify this PR satisfies this list as well.\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)","sha":"bcaea17a3004e15d01927c56fb8b5e19a1ec8f12"}}]}] BACKPORT--> Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
mbondyra
added a commit
to mbondyra/kibana
that referenced
this pull request
Jan 30, 2026
…iew_cps * commit '5f7fec57cb01883038810bd735a0666683b49904': (116 commits) [Security Solution][Attacks/Alerts][Setup and miscellaneous] Advanced setting to control feature visibility (elastic#250157) (elastic#250830) Fix synthtrace `fetch` usage (elastic#250950) [APM] Add Nodes and Edges components and selection logic (elastic#250937) [Docs] Update alerting-settings.md and add serverless value for one parameter (elastic#250842) [Agent Builder] filestore: initial implementation (elastic#250043) [CPS] Support CPS in Vega ESQL (elastic#250693) Adjustments to cascade document esql helpers (elastic#250560) [Security Solutions] Trial Companion - adds ai chat and elastic agent detectors (elastic#250908) [Obs Presentation] Code Scanning Alert Fixes (elastic#250858) [performance] add return and refresh render scenarios to dashboard journeys (elastic#250939) skip failing test suite (elastic#245458) Add Cloud Forwarder onboarding tile to O11y Solution (elastic#250325) [Traces] Remove APM unified trace waterall embeddable registration (elastic#250808) [Discover] [Metrics] Fix: metrics grid titles do not update on order change (elastic#250963) [a11y] Fix Eui modal title annoucment (elastic#250459) [Cloud Security] [Fleet] Add cloud connector access scope for input or package level credential definitions (elastic#250280) [WorkplaceAI] SharePoint Online stack connector (elastic#248737) [Response Ops][Task Manager] Update functions do not handle API key invalidation (elastic#249109) [Osquery] Remove @kbn/timelines-plugin dependency from osquery plugin (elastic#250055) [One Discover][Logs UX] Update OpenTelemetry Semantic Conventions (elastic#250346) ...
hannahbrooks
pushed a commit
to hannahbrooks/kibana
that referenced
this pull request
Jan 30, 2026
## Summary Currently, create query rules set model header is set to default component which is `<h1>`. This causes voiceover to announce as heading level 1, this cause a bit of confusion as the actua pagel has heading level 1 as "Query rules". Changing to use `<div>` tag, so that heading would not be annouced as h1. Additionally, i have also added inital focus to text field. https://github.com/user-attachments/assets/2e4f14f6-76a5-4114-ac61-1a14866416b4 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
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
4 participants
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.
Summary
Currently, create query rules set model header is set to default component which is
<h1>. This causes voiceover to announce as heading level 1, this cause a bit of confusion as the actua pagel has heading level 1 as "Query rules". Changing to use<div>tag, so that heading would not be annouced as h1.Additionally, i have also added inital focus to text field.
Screen.Recording.2026-01-26.at.11.26.52.PM.mov
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.