[Stateful: Indices: Overview page] Wrong focus order after generating API key on the dialog #196490
Assignees
Labels
defect-level-3
Moderate UX disruption or potentially confusing
impact:high
Addressing this issue will have a high level of impact on the quality/strength of our product.
Project:Accessibility
Team:Search
WCAG A
WCAG AA
Comments
|
Pinging @elastic/kibana-accessibility (Project:Accessibility) |
L1nBra
added
WCAG A
WCAG AA
Team:Search
defect-level-3
L1nBra
added
the
impact:high
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Oct 22, 2024
…ating API key on the dialog Closes: elastic#196490
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Oct 23, 2024
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Oct 25, 2024
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Oct 28, 2024
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Oct 30, 2024
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Nov 4, 2024
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Nov 4, 2024
alexwizp
added a commit
that referenced
this issue
Nov 4, 2024
…ating API key on the dialog (#197212) Closes #196490 ## Description The focus order should be clear and sequential. Changes in the dialog should be announced so that users, especially those using assistive technologies, can navigate easily and understand what is happening. ## What was changed: 1. `generate_api_key_modal/modal.tsx` was slightly updated to be more accessibility (a11y) friendly: - To differentiate the two UI states, we now use two colors for the panel: `primary` for the initial state and `success` when the API key is generated. - An `EuiCallOut` with `role="alert"` was added to announce status updates for screen reader users. - After creating an API key, the focus now moves to the `Download API key` button. ## Screen https://github.com/user-attachments/assets/24d13648-390a-4fe6-9202-d808c38c3c5c
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 4, 2024
…ating API key on the dialog (elastic#197212) Closes elastic#196490 ## Description The focus order should be clear and sequential. Changes in the dialog should be announced so that users, especially those using assistive technologies, can navigate easily and understand what is happening. ## What was changed: 1. `generate_api_key_modal/modal.tsx` was slightly updated to be more accessibility (a11y) friendly: - To differentiate the two UI states, we now use two colors for the panel: `primary` for the initial state and `success` when the API key is generated. - An `EuiCallOut` with `role="alert"` was added to announce status updates for screen reader users. - After creating an API key, the focus now moves to the `Download API key` button. ## Screen https://github.com/user-attachments/assets/24d13648-390a-4fe6-9202-d808c38c3c5c (cherry picked from commit 198fbcf)
kibanamachine
added a commit
that referenced
this issue
Nov 4, 2024
… generating API key on the dialog (#197212) (#198823) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Stateful: Indices: Overview page] Wrong focus order after generating API key on the dialog (#197212)](#197212) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-04T16:42:00Z","message":"fix: [Stateful: Indices: Overview page] Wrong focus order after generating API key on the dialog (#197212)\n\nCloses #196490\r\n\r\n## Description \r\nThe focus order should be clear and sequential. Changes in the dialog\r\nshould be announced so that users, especially those using assistive\r\ntechnologies, can navigate easily and understand what is happening.\r\n\r\n## What was changed:\r\n\r\n1. `generate_api_key_modal/modal.tsx` was slightly updated to be more\r\naccessibility (a11y) friendly:\r\n- To differentiate the two UI states, we now use two colors for the\r\npanel: `primary` for the initial state and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut` with `role=\"alert\"` was added to announce status\r\nupdates for screen reader users.\r\n- After creating an API key, the focus now moves to the `Download API\r\nkey` button.\r\n\r\n## Screen \r\n\r\n\r\nhttps://github.com/user-attachments/assets/24d13648-390a-4fe6-9202-d808c38c3c5c","sha":"198fbcf253499ee276541b73dcc6980df6bfc66b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.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: Indices: Overview page] Wrong focus order after generating API key on the dialog","number":197212,"url":"https://github.com/elastic/kibana/pull/197212","mergeCommit":{"message":"fix: [Stateful: Indices: Overview page] Wrong focus order after generating API key on the dialog (#197212)\n\nCloses #196490\r\n\r\n## Description \r\nThe focus order should be clear and sequential. Changes in the dialog\r\nshould be announced so that users, especially those using assistive\r\ntechnologies, can navigate easily and understand what is happening.\r\n\r\n## What was changed:\r\n\r\n1. `generate_api_key_modal/modal.tsx` was slightly updated to be more\r\naccessibility (a11y) friendly:\r\n- To differentiate the two UI states, we now use two colors for the\r\npanel: `primary` for the initial state and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut` with `role=\"alert\"` was added to announce status\r\nupdates for screen reader users.\r\n- After creating an API key, the focus now moves to the `Download API\r\nkey` button.\r\n\r\n## Screen \r\n\r\n\r\nhttps://github.com/user-attachments/assets/24d13648-390a-4fe6-9202-d808c38c3c5c","sha":"198fbcf253499ee276541b73dcc6980df6bfc66b"}},"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/197212","number":197212,"mergeCommit":{"message":"fix: [Stateful: Indices: Overview page] Wrong focus order after generating API key on the dialog (#197212)\n\nCloses #196490\r\n\r\n## Description \r\nThe focus order should be clear and sequential. Changes in the dialog\r\nshould be announced so that users, especially those using assistive\r\ntechnologies, can navigate easily and understand what is happening.\r\n\r\n## What was changed:\r\n\r\n1. `generate_api_key_modal/modal.tsx` was slightly updated to be more\r\naccessibility (a11y) friendly:\r\n- To differentiate the two UI states, we now use two colors for the\r\npanel: `primary` for the initial state and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut` with `role=\"alert\"` was added to announce status\r\nupdates for screen reader users.\r\n- After creating an API key, the focus now moves to the `Download API\r\nkey` button.\r\n\r\n## Screen \r\n\r\n\r\nhttps://github.com/user-attachments/assets/24d13648-390a-4fe6-9202-d808c38c3c5c","sha":"198fbcf253499ee276541b73dcc6980df6bfc66b"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Focus order should be clear and in sequence, changes on the dialog should be announced, for the users to be able to navigate easily and understand what is happening, especially for the users using assistive technologies.
Preconditions
Stateful Indices -> Overview page is opened.
Use Screen Reader (NVDA).
Steps to reproduce
1.Navigate to New button while using only keyboard by pressing Tab key (in Generate an API key section).
2.Press Enter.
3.Navigate to Name your API key input field while pressing Tab key.
4.Enter any text (f.e: test).
5.Navigate to Generate API key button while pressing Tab key.
6.Press Enter.
7.Observe screen reader announcement.
8.Press Tab key.
9.Observe screen reader announcement.
UI elements
NVDA Speech Viewer
1 - step 7 (New button which is under the dialog announced).
2,3 - step 9 (focus on Cancel button but additionally before, dialog and generated key is announced).
Actual Result
Expected Result
Focus order should be either:
a) on the firs dialog element or on the dialog itself.
or
b) on copy button, because information changed in the modal and copy button appeared
Meta Issue
Kibana Version: 8.16.0-SNAPSHOT
OS: Windows 11 Pro
Browser: Chrome Version 129.0.6668.101 (Official Build) (64-bit)
WCAG or Vendor Guidance (optional)
Relevant ARIA spec: Dialog (Modal) Pattern Pattern(https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
Related to: https://github.com/elastic/search-team/issues/8256
The text was updated successfully, but these errors were encountered: