Skip to content

[A11y] Fix Files Flyout incorrect label announcement using VoiceOver#219615

Merged
paulinashakirova merged 6 commits intoelastic:mainfrom
paulinashakirova:a11y-files-flyout-aria-label
May 26, 2025
Merged

[A11y] Fix Files Flyout incorrect label announcement using VoiceOver#219615
paulinashakirova merged 6 commits intoelastic:mainfrom
paulinashakirova:a11y-files-flyout-aria-label

Conversation

@paulinashakirova
Copy link
Contributor

@paulinashakirova paulinashakirova commented Apr 29, 2025

Summary

This PR fixes [Platform:StackManagement:Kibana:Files] File panel flyout not announced correctly issue.

Screen.Recording.2025-04-29.at.19.01.40.mov

@paulinashakirova paulinashakirova added Project:Accessibility Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// backport:all-open Backport to all branches that could still receive a release a11y Accessibility issue labels Apr 29, 2025
@paulinashakirova paulinashakirova self-assigned this Apr 29, 2025
@paulinashakirova paulinashakirova requested a review from a team as a code owner April 29, 2025 17:07
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

defaultMessage: 'Count by extension',
}
),
filesFlyoutLabel: i18n.translate('filesManagement.filesFlyout.flyoutLabel', {
Copy link
Contributor Author

@paulinashakirova paulinashakirova Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or is it better to write filesFlyoutAriaLabel?

Or what if we add a label/title to the flyout like so?

Screenshot 2025-04-29 at 19 08 38

Also!

Adding aria-label, instead of creating a titleId and connecting them, because for example in my case, the "screenshot etc." wouldn't add clarity so as to what I opened.
Or... this won't be an issue in production since the names there make sense at all times? Not sure... WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's link aria label with h2 element

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@paulinashakirova paulinashakirova added the release_note:skip Skip the PR/issue when compiling release notes label Apr 29, 2025
@paulinashakirova paulinashakirova changed the title [A11y] Files Flyout label announcement voiceover [A11y] Fix Files Flyout incorrect label announcement using VoiceOver Apr 29, 2025
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
filesManagement 102.7KB 102.8KB +72.0B

History

cc @paulinashakirova

@paulinashakirova paulinashakirova merged commit f517280 into elastic:main May 26, 2025
10 checks passed
@paulinashakirova paulinashakirova deleted the a11y-files-flyout-aria-label branch May 26, 2025 17:47
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 7.17, 8.17, 8.18, 8.19, 9.0

https://github.com/elastic/kibana/actions/runs/15259521500

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 26, 2025
…lastic#219615)

## Summary

This PR fixes [[Platform:StackManagement:Kibana:Files] File panel flyout
not announced
correctly](elastic#217695) issue.

https://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64
(cherry picked from commit f517280)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 26, 2025
…lastic#219615)

## Summary

This PR fixes [[Platform:StackManagement:Kibana:Files] File panel flyout
not announced
correctly](elastic#217695) issue.

https://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64
(cherry picked from commit f517280)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request May 26, 2025
…lastic#219615)

## Summary

This PR fixes [[Platform:StackManagement:Kibana:Files] File panel flyout
not announced
correctly](elastic#217695) issue.

https://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64
(cherry picked from commit f517280)
@kibanamachine
Copy link
Contributor

💔 Some backports could not be created

Status Branch Result
7.17 Backport failed because of merge conflicts

You might need to backport the following PRs to 7.17:
- Upgrading all undicis (#221445)
8.17
8.18
8.19
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 219615

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request May 26, 2025
…eOver (#219615) (#221552)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[A11y] Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)](#219615)

<!--- 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-05-26T17:47:00Z","message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:SharedUX","backport:all-open","a11y","v9.1.0"],"title":"[A11y]
Fix Files Flyout incorrect label announcement using
VoiceOver","number":219615,"url":"https://github.com/elastic/kibana/pull/219615","mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}},"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/219615","number":219615,"mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
kibanamachine added a commit that referenced this pull request May 26, 2025
…ceOver (#219615) (#221547)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[A11y] Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)](#219615)

<!--- 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-05-26T17:47:00Z","message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:SharedUX","backport:all-open","a11y","v9.1.0"],"title":"[A11y]
Fix Files Flyout incorrect label announcement using
VoiceOver","number":219615,"url":"https://github.com/elastic/kibana/pull/219615","mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}},"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/219615","number":219615,"mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
kibanamachine added a commit that referenced this pull request May 26, 2025
…ceOver (#219615) (#221549)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[A11y] Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)](#219615)

<!--- 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-05-26T17:47:00Z","message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:SharedUX","backport:all-open","a11y","v9.1.0"],"title":"[A11y]
Fix Files Flyout incorrect label announcement using
VoiceOver","number":219615,"url":"https://github.com/elastic/kibana/pull/219615","mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}},"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/219615","number":219615,"mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
kibanamachine added a commit that referenced this pull request May 26, 2025
…ceOver (#219615) (#221550)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[A11y] Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)](#219615)

<!--- 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-05-26T17:47:00Z","message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:SharedUX","backport:all-open","a11y","v9.1.0"],"title":"[A11y]
Fix Files Flyout incorrect label announcement using
VoiceOver","number":219615,"url":"https://github.com/elastic/kibana/pull/219615","mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}},"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/219615","number":219615,"mergeCommit":{"message":"[A11y]
Fix Files Flyout incorrect label announcement using VoiceOver
(#219615)\n\n## Summary\n\nThis PR fixes
[[Platform:StackManagement:Kibana:Files] File panel flyout\nnot
announced\ncorrectly](#217695)
issue.\n\n\n\nhttps://github.com/user-attachments/assets/694b475b-0418-427d-bd19-07e218a9cd64","sha":"f517280d92b8d970abcb827aa8eb7ea69c1378f5"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>
akowalska622 pushed a commit to akowalska622/kibana that referenced this pull request May 29, 2025
@mistic mistic added v8.17.8 and removed v8.17.7 labels Jun 3, 2025
@mistic
Copy link
Contributor

mistic commented Jun 3, 2025

This PR didn't make it into the latest v8.17.7 BC. Updating the labels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Accessibility issue backport:all-open Backport to all branches that could still receive a release Project:Accessibility release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v8.17.8 v8.18.2 v8.19.0 v9.0.2 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Platform:StackManagement:Kibana:Files] File panel flyout not announced correctly

6 participants