[Ingest pipelines] A11y: Fix Define as Json announcement#261896
Merged
SoniaSanzV merged 1 commit intoelastic:mainfrom Apr 10, 2026
Merged
Conversation
SoniaSanzV
added
release_note:fix
Team:Kibana Management
Contributor
|
Pinging @elastic/kibana-management (Team:Kibana Management) |
SoniaSanzV
deleted the
a11y/ingest_pipelines-define_as_json_announcement#218059
branch
Contributor
|
Starting backport for target branches: 8.19, 9.2, 9.3 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 10, 2026
) Closes elastic#218059 ## Summary - When toggling between "Define as JSON" and "Define as text" in the Append processor form (and any other processor that uses `XJsonToggle`), the focused link unmounted without restoring focus, leaving `document.activeElement` as `<body>`. NVDA then scanned from body and announced the first visited link in view — the "Ingest Pipelines" breadcrumb — confusing screen reader users. - Fixed by sharing a callback ref across both toggle links. A pending-focus flag is set when the toggle is activated; when React mounts the replacement link, the flag is read and `focus()` is called immediately, keeping focus inside the form. ### Test plan Manual — Windows 11 + NVDA: 1. Stack Management → Ingest Pipelines → Create pipeline. 2. Add a processor → select **Append**. 3. Activate the **Define as JSON** toggle (click or keyboard Enter). - Verify: focus is on "Define as text"; NVDA announces "Define as text button" (no breadcrumb or navigation announced). 4. Activate **Define as text**. - Verify: focus is on "Define as JSON"; NVDA announces "Define as JSON button". ### Evidence (screenshots / screen recording) <img width="994" height="455" alt="Screenshot 2026-04-08 at 09 41 48" src="https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5" /> (cherry picked from commit 7450f1f)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 10, 2026
) Closes elastic#218059 ## Summary - When toggling between "Define as JSON" and "Define as text" in the Append processor form (and any other processor that uses `XJsonToggle`), the focused link unmounted without restoring focus, leaving `document.activeElement` as `<body>`. NVDA then scanned from body and announced the first visited link in view — the "Ingest Pipelines" breadcrumb — confusing screen reader users. - Fixed by sharing a callback ref across both toggle links. A pending-focus flag is set when the toggle is activated; when React mounts the replacement link, the flag is read and `focus()` is called immediately, keeping focus inside the form. ### Test plan Manual — Windows 11 + NVDA: 1. Stack Management → Ingest Pipelines → Create pipeline. 2. Add a processor → select **Append**. 3. Activate the **Define as JSON** toggle (click or keyboard Enter). - Verify: focus is on "Define as text"; NVDA announces "Define as text button" (no breadcrumb or navigation announced). 4. Activate **Define as text**. - Verify: focus is on "Define as JSON"; NVDA announces "Define as JSON button". ### Evidence (screenshots / screen recording) <img width="994" height="455" alt="Screenshot 2026-04-08 at 09 41 48" src="https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5" /> (cherry picked from commit 7450f1f)
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 |
SoniaSanzV
added
backport:version
Contributor
|
Starting backport for target branches: 9.2, 9.3 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 10, 2026
) Closes elastic#218059 ## Summary - When toggling between "Define as JSON" and "Define as text" in the Append processor form (and any other processor that uses `XJsonToggle`), the focused link unmounted without restoring focus, leaving `document.activeElement` as `<body>`. NVDA then scanned from body and announced the first visited link in view — the "Ingest Pipelines" breadcrumb — confusing screen reader users. - Fixed by sharing a callback ref across both toggle links. A pending-focus flag is set when the toggle is activated; when React mounts the replacement link, the flag is read and `focus()` is called immediately, keeping focus inside the form. ### Test plan Manual — Windows 11 + NVDA: 1. Stack Management → Ingest Pipelines → Create pipeline. 2. Add a processor → select **Append**. 3. Activate the **Define as JSON** toggle (click or keyboard Enter). - Verify: focus is on "Define as text"; NVDA announces "Define as text button" (no breadcrumb or navigation announced). 4. Activate **Define as text**. - Verify: focus is on "Define as JSON"; NVDA announces "Define as JSON button". ### Evidence (screenshots / screen recording) <img width="994" height="455" alt="Screenshot 2026-04-08 at 09 41 48" src="https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5" /> (cherry picked from commit 7450f1f)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 10, 2026
) Closes elastic#218059 ## Summary - When toggling between "Define as JSON" and "Define as text" in the Append processor form (and any other processor that uses `XJsonToggle`), the focused link unmounted without restoring focus, leaving `document.activeElement` as `<body>`. NVDA then scanned from body and announced the first visited link in view — the "Ingest Pipelines" breadcrumb — confusing screen reader users. - Fixed by sharing a callback ref across both toggle links. A pending-focus flag is set when the toggle is activated; when React mounts the replacement link, the flag is read and `focus()` is called immediately, keeping focus inside the form. ### Test plan Manual — Windows 11 + NVDA: 1. Stack Management → Ingest Pipelines → Create pipeline. 2. Add a processor → select **Append**. 3. Activate the **Define as JSON** toggle (click or keyboard Enter). - Verify: focus is on "Define as text"; NVDA announces "Define as text button" (no breadcrumb or navigation announced). 4. Activate **Define as text**. - Verify: focus is on "Define as JSON"; NVDA announces "Define as JSON button". ### Evidence (screenshots / screen recording) <img width="994" height="455" alt="Screenshot 2026-04-08 at 09 41 48" src="https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5" /> (cherry picked from commit 7450f1f)
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
Apr 10, 2026
…) (#262447) # Backport This will backport the following commits from `main` to `9.3`: - [[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)](#261896) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Sonia Sanz Vivas","email":"sonia.sanzvivas@elastic.co"},"sourceCommit":{"committedDate":"2026-04-10T07:51:43Z","message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Kibana Management","Feature:Ingest Node Pipelines","backport:all-open","v9.4.0"],"title":"[Ingest pipelines] A11y: Fix Define as Json announcement","number":261896,"url":"https://github.com/elastic/kibana/pull/261896","mergeCommit":{"message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/261896","number":261896,"mergeCommit":{"message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49"}}]}] BACKPORT--> Co-authored-by: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Apr 10, 2026
…) (#262446) # Backport This will backport the following commits from `main` to `9.2`: - [[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)](#261896) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Sonia Sanz Vivas","email":"sonia.sanzvivas@elastic.co"},"sourceCommit":{"committedDate":"2026-04-10T07:51:43Z","message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Kibana Management","Feature:Ingest Node Pipelines","backport:all-open","v9.4.0"],"title":"[Ingest pipelines] A11y: Fix Define as Json announcement","number":261896,"url":"https://github.com/elastic/kibana/pull/261896","mergeCommit":{"message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/261896","number":261896,"mergeCommit":{"message":"[Ingest pipelines] A11y: Fix Define as Json announcement (#261896)\n\nCloses https://github.com/elastic/kibana/issues/218059\n## Summary\n- When toggling between \"Define as JSON\" and \"Define as text\" in the\nAppend processor form (and any other processor that uses `XJsonToggle`),\nthe focused link unmounted without restoring focus, leaving\n`document.activeElement` as `<body>`. NVDA then scanned from body and\nannounced the first visited link in view — the \"Ingest Pipelines\"\nbreadcrumb — confusing screen reader users.\n- Fixed by sharing a callback ref across both toggle links. A\npending-focus flag is set when the toggle is activated; when React\nmounts the replacement link, the flag is read and `focus()` is called\nimmediately, keeping focus inside the form.\n### Test plan\nManual — Windows 11 + NVDA:\n1. Stack Management → Ingest Pipelines → Create pipeline.\n2. Add a processor → select **Append**.\n3. Activate the **Define as JSON** toggle (click or keyboard Enter).\n- Verify: focus is on \"Define as text\"; NVDA announces \"Define as text\nbutton\" (no breadcrumb or navigation announced).\n4. Activate **Define as text**.\n- Verify: focus is on \"Define as JSON\"; NVDA announces \"Define as JSON\nbutton\".\n### Evidence (screenshots / screen recording)\n<img width=\"994\" height=\"455\" alt=\"Screenshot 2026-04-08 at 09 41 48\"\nsrc=\"https://github.com/user-attachments/assets/6c9f84e2-e7e0-4196-a529-825593b796f5\"\n/>","sha":"7450f1f2ff7cb0b8096af13042cacf07e6b0ac49"}}]}] BACKPORT--> Co-authored-by: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
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.
Closes #218059
Summary
XJsonToggle), the focused link unmounted without restoring focus, leavingdocument.activeElementas<body>. NVDA then scanned from body and announced the first visited link in view — the "Ingest Pipelines" breadcrumb — confusing screen reader users.focus()is called immediately, keeping focus inside the form.Test plan
Manual — Windows 11 + NVDA:
Evidence (screenshots / screen recording)