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: Indices: Overview page] Missing focus on New button after closing or cancelling Generate API key dialog #196174

Closed
L1nBra opened this issue Oct 14, 2024 · 5 comments · Fixed by #196905
Closed

[Stateful: Indices: Overview page] Missing focus on New button after closing or cancelling Generate API key dialog #196174

L1nBra opened this issue Oct 14, 2024 · 5 comments · Fixed by #196905
Assignees
@alexwizp
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

@L1nBra
Copy link

L1nBra commented Oct 14, 2024 •
edited
Loading

Description
Focus should be visible on any accessible element and in order when navigating through the elements. Especially for the users using assistive technology, only keyboard.
For the dialogs, after closing them, focus should be visible on the element which opened it.

Preconditions
Stateful Indices -> Overview page is opened.

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 x (close) button.
4.Press Enter.
3.Observe Generate an API key section.

UI elements
Image

Image

Actual Result

  • No focus visible on the New button, when pressing Enter it does not get activated.
    Same behavior with Cancel button.

Expected Result

  • Focus is present on New button, if user presses Enter - dialog appears.

Notes:
After Cancel/Close button when pressing Tab key, focus moves to the first element on the webpage itself.

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
@elasticmachine
Copy link
Contributor

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

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

L1nBra commented Oct 14, 2024

Similar to issue #195575
But created as separate, because this one is euiModal component (the other issue even though it is for dialog, but component used there is euiFlyout).

@alexwizp
Copy link
Contributor

@L1nBra Actually, that's not entirely accurate. Our current EUI Modal implementation works as follows: after opening the modal, we set the focus on the root dialog element. When pressing the Tab key for the first time, the focus moves to the Close button, and then follows the tab index priority.

On the other hand, in the EUI Modal API we have a few ways to change this, but I prefer to be consistent across all modals, and if you see something different from what I described, it should probably be fixed.

@cee-chen, please confirm that this is correct behavior.

Image

@alexwizp alexwizp self-assigned this Oct 15, 2024
@cee-chen
Copy link
Contributor

@cee-chen, please confirm that this is correct behavior.

Yes, that is correct. It allows keyboard users to predictably/reliably be able to close a modal quickly if needed.

@L1nBra L1nBra mentioned this issue Oct 16, 2024
Closed
@L1nBra L1nBra changed the title [Stateful: Indices: Overview page] Missing focus on Generate API key modal dialog [Stateful: Indices: Overview page] Missing focus on New button after closing or cancelling Generate API key dialog Oct 16, 2024
@L1nBra
Copy link
Author

L1nBra commented Oct 16, 2024

Adjusted the issue to reflect only the part where the real issue is.

@L1nBra L1nBra added the impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. label Oct 17, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 18, 2024
@alexwizp
fix: [Stateful: Indices: Overview page] Missing focus on New button a…
feb7bee 
…fter closing or cancelling Generate API key dialog

Closes: elastic#196174
@alexwizp alexwizp mentioned this issue Oct 18, 2024
Merged
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 21, 2024
@alexwizp
Merge branch 'main' into elastic#196174
4bb5dd7
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 21, 2024
@alexwizp
fix: [Stateful: Indices: Overview page] Missing focus on New button a…
1240fd6 
…fter closing or cancelling Generate API key dialog (elastic#196905)

Closes: elastic#196174

## Description

Focus should be visible on any accessible element and in order when
navigating through the elements. Especially for the users using
assistive technology, only keyboard.
For the dialogs, after closing them, focus should be visible on the
element which opened it.

## What was changed:
1. Cleaned up `generate_api_key_panel.tsx`. No need to open
`GenerateApiKeyModal` from this level. Same logic duplicated in
`APIGettingStarted` inner component

## Screen

https://github.com/user-attachments/assets/46a23fdd-ba54-4798-9cb7-a78e28d447b8
(cherry picked from commit 47a497c)
kibanamachine added a commit that referenced this issue Oct 21, 2024
@kibanamachine @alexwizp
[8.x] fix: [Stateful: Indices: Overview page] Missing focus on New bu…
e1c4ca2 
…tton after closing or cancelling Generate API key dialog (#196905) (#197069)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Indices: Overview page] Missing focus on New button
after closing or cancelling Generate API key dialog
(#196905)](#196905)

<!--- 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-10-21T13:59:07Z","message":"fix:
[Stateful: Indices: Overview page] Missing focus on New button after
closing or cancelling Generate API key dialog (#196905)\n\nCloses:
#196174\r\n\r\n## Description \r\n\r\nFocus should be visible on any
accessible element and in order when\r\nnavigating through the elements.
Especially for the users using\r\nassistive technology, only
keyboard.\r\nFor the dialogs, after closing them, focus should be
visible on the\r\nelement which opened it.\r\n\r\n## What was changed:
\r\n1. Cleaned up `generate_api_key_panel.tsx`. No need to
open\r\n`GenerateApiKeyModal` from this level. Same logic duplicated
in\r\n`APIGettingStarted` inner component\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/46a23fdd-ba54-4798-9cb7-a78e28d447b8","sha":"47a497cf3671eee56adeb4787cb4c9271671f5e8","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","backport:prev-minor"],"title":"fix:
[Stateful: Indices: Overview page] Missing focus on New button after
closing or cancelling Generate API key
dialog","number":196905,"url":"https://github.com/elastic/kibana/pull/196905","mergeCommit":{"message":"fix:
[Stateful: Indices: Overview page] Missing focus on New button after
closing or cancelling Generate API key dialog (#196905)\n\nCloses:
#196174\r\n\r\n## Description \r\n\r\nFocus should be visible on any
accessible element and in order when\r\nnavigating through the elements.
Especially for the users using\r\nassistive technology, only
keyboard.\r\nFor the dialogs, after closing them, focus should be
visible on the\r\nelement which opened it.\r\n\r\n## What was changed:
\r\n1. Cleaned up `generate_api_key_panel.tsx`. No need to
open\r\n`GenerateApiKeyModal` from this level. Same logic duplicated
in\r\n`APIGettingStarted` inner component\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/46a23fdd-ba54-4798-9cb7-a78e28d447b8","sha":"47a497cf3671eee56adeb4787cb4c9271671f5e8"}},"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/196905","number":196905,"mergeCommit":{"message":"fix:
[Stateful: Indices: Overview page] Missing focus on New button after
closing or cancelling Generate API key dialog (#196905)\n\nCloses:
#196174\r\n\r\n## Description \r\n\r\nFocus should be visible on any
accessible element and in order when\r\nnavigating through the elements.
Especially for the users using\r\nassistive technology, only
keyboard.\r\nFor the dialogs, after closing them, focus should be
visible on the\r\nelement which opened it.\r\n\r\n## What was changed:
\r\n1. Cleaned up `generate_api_key_panel.tsx`. No need to
open\r\n`GenerateApiKeyModal` from this level. Same logic duplicated
in\r\n`APIGettingStarted` inner component\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/46a23fdd-ba54-4798-9cb7-a78e28d447b8","sha":"47a497cf3671eee56adeb4787cb4c9271671f5e8"}}]}]
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
Assignees

@alexwizp alexwizp

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
Projects
None yet
Milestone
No milestone
4 participants
@cee-chen @elasticmachine @alexwizp @L1nBra