Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Stateful: Home page] Create an API key dialog information announcement duplication #195252

Closed
L1nBra opened this issue Oct 7, 2024 · 2 comments · Fixed by #196133
Closed

[Stateful: Home page] Create an API key dialog information announcement duplication #195252

L1nBra opened this issue Oct 7, 2024 · 2 comments · Fixed by #196133
Assignees
@alexwizp
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A

Comments

@L1nBra
Copy link

L1nBra commented Oct 7, 2024 •
edited
Loading

Description
Information about element (in this case dialog) should be announced one time for the user. In case user navigates to another element, then comes back to the same dialog - user could hear information about the dialog (one time).

Preconditions
Stateful Home page (Overview) is opened.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to New button while using only keyboard by pressing Tab key.
2.Press Enter.
3.Observe Screen reader announcement.

UI screenshots
Image

Image

NVDA Speech Viewer
Image

Actual Result

  • Information about modal dialog is announced two times (duplicated) and the second time only half of information is being announced.

Expected Result

  • All relevant information is announced one time for the user.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.70 (Official Build) (64-bit)

Screen reader: NVDA

WCAG or Vendor Guidance (optional)

Related to: https://github.com/elastic/search-team/issues/8256
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 7, 2024
@L1nBra L1nBra added WCAG A and removed needs-team Issues missing a team label labels Oct 7, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 7, 2024
@L1nBra L1nBra added defect-level-3 Moderate UX disruption or potentially confusing and removed needs-team Issues missing a team label labels Oct 7, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 7, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@L1nBra
Copy link
Author

L1nBra commented Oct 11, 2024

Same behavior observed on

  • Indices page with Default settings dialog.

NVDA announcement after clicking Default settings button
Image

@alexwizp alexwizp self-assigned this Oct 14, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 14, 2024
@alexwizp
fix: [Stateful: Home page] Create an API key dialog information annou…
862a4c8 
…ncement duplication

Closes: elastic#195252
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 14, 2024
@alexwizp
fix: [Stateful: Home page] Create an API key dialog information annou…
9ebd9f4 
…ncement duplication

Closes: elastic#195252
@alexwizp alexwizp mentioned this issue Oct 14, 2024
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 15, 2024
@alexwizp
fix: [Stateful: Home page] Create an API key dialog information annou…
36e049f 
…ncement duplication (elastic#196133)

Closes: elastic#195754
Closes: elastic#195252

## Description
Information about an element (in this case, a dialog) should be
announced once to the user. If the user navigates to another element and
then returns to the same dialog, they should hear the information about
the dialog again (one time).

## What was changed?:

1. Added `aria-labelledby` for `EuiFlyout` based on the EUI
recommendation. This will correctly pronounce the Flyout header without
extra text.
2. Added `aria-labelledby` and `role="region"` for `EuiAccordion` for
the same reason.

## Screen:

<img width="1792" alt="image"
src="https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0">

(cherry picked from commit 0ccfb70)
kibanamachine added a commit that referenced this issue Oct 15, 2024
@kibanamachine @alexwizp
[8.x] fix: [Stateful: Home page] Create an API key dialog information…
3ebe580 
… announcement duplication (#196133) (#196272)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Create an API key dialog information
announcement duplication
(#196133)](#196133)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-10-15T10:32:32Z","message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (#196133)\n\nCloses: #195754\r\nCloses: #195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication","number":196133,"url":"https://github.com/elastic/kibana/pull/196133","mergeCommit":{"message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (#196133)\n\nCloses: #195754\r\nCloses: #195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196133","number":196133,"mergeCommit":{"message":"fix:
[Stateful: Home page] Create an API key dialog information announcement
duplication (#196133)\n\nCloses: #195754\r\nCloses: #195252\r\n\r\n##
Description\r\nInformation about an element (in this case, a dialog)
should be\r\nannounced once to the user. If the user navigates to
another element and\r\nthen returns to the same dialog, they should hear
the information about\r\nthe dialog again (one time).\r\n\r\n## What was
changed?:\r\n\r\n1. Added `aria-labelledby` for `EuiFlyout` based on the
EUI\r\nrecommendation. This will correctly pronounce the Flyout header
without\r\nextra text.\r\n2. Added `aria-labelledby` and
`role=\"region\"` for `EuiAccordion` for\r\nthe same reason.\r\n\r\n##
Screen: \r\n\r\n<img width=\"1792\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0\">","sha":"0ccfb70c810b037c5aa02270e5a59da284d2b31c"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alexwizp alexwizp

Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A
Projects
None yet
Milestone
No milestone
3 participants
@elasticmachine @alexwizp @L1nBra