[Snapshots and restore] A11y: Announce policy button with distinguishable names#261313
Merged
SoniaSanzV merged 3 commits intoelastic:mainfrom Apr 10, 2026
Merged
Conversation
SoniaSanzV
added
release_note:fix
Team:Kibana Management
Contributor
|
Pinging @elastic/kibana-management (Team:Kibana Management) |
Contributor
⏳ Build in-progress, with failures
Failed CI Stepscc @SoniaSanzV |
SoniaSanzV
changed the title
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
…able names (elastic#261313) Closes elastic#219382 ## Summary - On Snapshot and Restore → Add policy → Review → Summary, the three section edit controls were all exposed similarly and NVDA could repeat tooltip + name + heading-related phrasing. - Section edit links now have distinct accessible names (`Edit {sectionTitle}`), tooltip output for screen readers is suppressed when it would duplicate that name (`disableScreenReaderOutput`), the pencil icon is decorative (`aria-hidden`), and the edit control is no longer nested inside the section heading (flex layout next to the title). Section titles for visible headings and for `i18n.translate` share one constant per section to avoid string drift. ### Test plan - Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and Restore → Add policy → complete steps → Review → Summary; tab to each edit control and confirm distinct names and no duplicated “Edit …” announcement when the tooltip shows; activate each and confirm the correct step opens. - Automated: not added; eslint + scoped typecheck for `snapshot_restore` plugin. ### Before/after notes - WCAG 2.2 Understanding 4.1.2 Name, Role, Value. - Before/after behavior: - **Before:** All three edit buttons were announced as “Edit”, with extra landmark/heading noise; after an initial fix, names were distinct but NVDA could still duplicate announcements (tooltip `aria-describedby` while open + edit control inside `<h3>` + label on icon). - **After:** Each edit link has a unique name including the section; tooltip does not add a second description for AT when it matches the link name; heading contains only the section title text; manual NVDA check on the issue environment reports acceptable, non-duplicated output. ### Evidence (screenshots / screen recording) <img width="713" height="490" alt="Screenshot 2026-04-06 at 10 50 31" src="https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b" /> (cherry picked from commit 1deee30)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 10, 2026
…able names (elastic#261313) Closes elastic#219382 ## Summary - On Snapshot and Restore → Add policy → Review → Summary, the three section edit controls were all exposed similarly and NVDA could repeat tooltip + name + heading-related phrasing. - Section edit links now have distinct accessible names (`Edit {sectionTitle}`), tooltip output for screen readers is suppressed when it would duplicate that name (`disableScreenReaderOutput`), the pencil icon is decorative (`aria-hidden`), and the edit control is no longer nested inside the section heading (flex layout next to the title). Section titles for visible headings and for `i18n.translate` share one constant per section to avoid string drift. ### Test plan - Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and Restore → Add policy → complete steps → Review → Summary; tab to each edit control and confirm distinct names and no duplicated “Edit …” announcement when the tooltip shows; activate each and confirm the correct step opens. - Automated: not added; eslint + scoped typecheck for `snapshot_restore` plugin. ### Before/after notes - WCAG 2.2 Understanding 4.1.2 Name, Role, Value. - Before/after behavior: - **Before:** All three edit buttons were announced as “Edit”, with extra landmark/heading noise; after an initial fix, names were distinct but NVDA could still duplicate announcements (tooltip `aria-describedby` while open + edit control inside `<h3>` + label on icon). - **After:** Each edit link has a unique name including the section; tooltip does not add a second description for AT when it matches the link name; heading contains only the section title text; manual NVDA check on the issue environment reports acceptable, non-duplicated output. ### Evidence (screenshots / screen recording) <img width="713" height="490" alt="Screenshot 2026-04-06 at 10 50 31" src="https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b" /> (cherry picked from commit 1deee30)
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 10, 2026
…nguishable names (#261313) (#262454) # Backport This will backport the following commits from `main` to `9.3`: - [[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)](#261313) <!--- 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-10T08:07:19Z","message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Kibana Management","Feature:Snapshot and Restore","backport:all-open","v9.4.0"],"title":"[Snapshots and restore] A11y: Announce policy button with distinguishable names","number":261313,"url":"https://github.com/elastic/kibana/pull/261313","mergeCommit":{"message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5"}},"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/261313","number":261313,"mergeCommit":{"message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5"}}]}] BACKPORT--> Co-authored-by: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Apr 10, 2026
…nguishable names (#261313) (#262453) # Backport This will backport the following commits from `main` to `9.2`: - [[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)](#261313) <!--- 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-10T08:07:19Z","message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Kibana Management","Feature:Snapshot and Restore","backport:all-open","v9.4.0"],"title":"[Snapshots and restore] A11y: Announce policy button with distinguishable names","number":261313,"url":"https://github.com/elastic/kibana/pull/261313","mergeCommit":{"message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5"}},"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/261313","number":261313,"mergeCommit":{"message":"[Snapshots and restore] A11y: Announce policy button with distinguishable names (#261313)\n\nCloses https://github.com/elastic/kibana/issues/219382\n## Summary\n- On Snapshot and Restore → Add policy → Review → Summary, the three\nsection edit controls were all exposed similarly and NVDA could repeat\ntooltip + name + heading-related phrasing.\n- Section edit links now have distinct accessible names (`Edit\n{sectionTitle}`), tooltip output for screen readers is suppressed when\nit would duplicate that name (`disableScreenReaderOutput`), the pencil\nicon is decorative (`aria-hidden`), and the edit control is no longer\nnested inside the section heading (flex layout next to the title).\nSection titles for visible headings and for `i18n.translate` share one\nconstant per section to avoid string drift.\n### Test plan\n- Manual: Windows 11, Chrome, NVDA — Stack Management → Snapshot and\nRestore → Add policy → complete steps → Review → Summary; tab to each\nedit control and confirm distinct names and no duplicated “Edit …”\nannouncement when the tooltip shows; activate each and confirm the\ncorrect step opens.\n- Automated: not added; eslint + scoped typecheck for `snapshot_restore`\nplugin.\n### Before/after notes\n- WCAG 2.2 Understanding 4.1.2 Name, Role, Value.\n- Before/after behavior:\n- **Before:** All three edit buttons were announced as “Edit”, with\nextra landmark/heading noise; after an initial fix, names were distinct\nbut NVDA could still duplicate announcements (tooltip `aria-describedby`\nwhile open + edit control inside `<h3>` + label on icon).\n- **After:** Each edit link has a unique name including the section;\ntooltip does not add a second description for AT when it matches the\nlink name; heading contains only the section title text; manual NVDA\ncheck on the issue environment reports acceptable, non-duplicated\noutput.\n### Evidence (screenshots / screen recording)\n\n<img width=\"713\" height=\"490\" alt=\"Screenshot 2026-04-06 at 10 50 31\"\nsrc=\"https://github.com/user-attachments/assets/0ecd4a92-4beb-4ca6-bf69-da8ca028b34b\"\n/>","sha":"1deee307c3ff02669fc27d479e74f656c6fea7c5"}}]}] 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 #219382
Summary
Edit {sectionTitle}), tooltip output for screen readers is suppressed when it would duplicate that name (disableScreenReaderOutput), the pencil icon is decorative (aria-hidden), and the edit control is no longer nested inside the section heading (flex layout next to the title). Section titles for visible headings and fori18n.translateshare one constant per section to avoid string drift.Test plan
snapshot_restoreplugin.Before/after notes
aria-describedbywhile open + edit control inside<h3>+ label on icon).Evidence (screenshots / screen recording)