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 missing ARIA attributes #195754

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

[Stateful: Home page] Create an API key dialog missing ARIA attributes #195754

L1nBra opened this issue Oct 10, 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 10, 2024

Description
Flyouts implemented on the webpage should be correctly announced for screen reader users (using assistive technology) in order not to confuse the user.

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.

NVDA Speech Viewer
Image

UI element + html code
Image

Actual Result

  • Screen reader announces that it is a dialog and you are in a modal dialog, without any indication that it is a flyout panel.

Expected Result

  • It should be announced as flyout panel.

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)

As per EUI guidelines, flyout should have "aria-labelledby={headingId} to announce the flyout to screen readers."

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 10, 2024
@L1nBra L1nBra added WCAG A Team:Search defect-level-3 Moderate UX disruption or potentially confusing and removed needs-team Issues missing a team label labels Oct 10, 2024
@L1nBra
Copy link
Author

L1nBra commented Oct 11, 2024

Same behavior observed on

  • Indices page with Default settings dialog. Missing aria-labelledby.

UI elements
Image

@alexwizp alexwizp self-assigned this Oct 14, 2024
@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