[Search:Search Applications page]Popover for Create button is inaccessible via keyboard #199760
Assignees
Labels
defect-level-3
Moderate UX disruption or potentially confusing
Project:Accessibility
Team:Search
WCAG A
Comments
|
Pinging @elastic/kibana-accessibility (Project:Accessibility) |
alexwizp
added a commit
to alexwizp/kibana
that referenced
this issue
Nov 21, 2024
…accessible via keyboard Closes: elastic#199760 Closes: elastic#199749
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 22, 2024
…accessible via keyboard (elastic#201193) Closes: elastic#199760 Popovers, dialogs which are accessible with mouse, should also be accessible with keyboard. Otherwise users using only keyboard will miss the information present in popover, dialog. Closes: elastic#199749 User reaches the same button two times when navigating using only keyboard and it can get confusing. Better for element to get focus only one time when navigating in sequence from one element to another and for the user only to hear one announcement of the element. ## What was changed: 1. `CreateSearchApplicationButton` component: - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip` - extra `div` element with `tabindex` was removed. ## Screen https://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777 (cherry picked from commit 1b742e7)
kibanamachine
added a commit
that referenced
this issue
Nov 22, 2024
… is inaccessible via keyboard (#201193) (#201466) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard (#201193)](#201193) <!--- 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-11-22T19:38:24Z","message":"fix: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard (#201193)\n\nCloses: #199760 \r\nPopovers, dialogs which are accessible with mouse, should also be\r\naccessible with keyboard. Otherwise users using only keyboard will miss\r\nthe information present in popover, dialog.\r\n\r\nCloses: #199749\r\nUser reaches the same button two times when navigating using only\r\nkeyboard and it can get confusing. Better for element to get focus only\r\none time when navigating in sequence from one element to another and for\r\nthe user only to hear one announcement of the element.\r\n\r\n## What was changed: \r\n1. `CreateSearchApplicationButton` component: \r\n - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip`\r\n - extra `div` element with `tabindex` was removed. \r\n\r\n## Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777","sha":"1b742e77f41c6b0674ee01c28b17171508cb5784","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.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: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard","number":201193,"url":"https://github.com/elastic/kibana/pull/201193","mergeCommit":{"message":"fix: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard (#201193)\n\nCloses: #199760 \r\nPopovers, dialogs which are accessible with mouse, should also be\r\naccessible with keyboard. Otherwise users using only keyboard will miss\r\nthe information present in popover, dialog.\r\n\r\nCloses: #199749\r\nUser reaches the same button two times when navigating using only\r\nkeyboard and it can get confusing. Better for element to get focus only\r\none time when navigating in sequence from one element to another and for\r\nthe user only to hear one announcement of the element.\r\n\r\n## What was changed: \r\n1. `CreateSearchApplicationButton` component: \r\n - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip`\r\n - extra `div` element with `tabindex` was removed. \r\n\r\n## Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777","sha":"1b742e77f41c6b0674ee01c28b17171508cb5784"}},"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/201193","number":201193,"mergeCommit":{"message":"fix: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard (#201193)\n\nCloses: #199760 \r\nPopovers, dialogs which are accessible with mouse, should also be\r\naccessible with keyboard. Otherwise users using only keyboard will miss\r\nthe information present in popover, dialog.\r\n\r\nCloses: #199749\r\nUser reaches the same button two times when navigating using only\r\nkeyboard and it can get confusing. Better for element to get focus only\r\none time when navigating in sequence from one element to another and for\r\nthe user only to hear one announcement of the element.\r\n\r\n## What was changed: \r\n1. `CreateSearchApplicationButton` component: \r\n - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip`\r\n - extra `div` element with `tabindex` was removed. \r\n\r\n## Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777","sha":"1b742e77f41c6b0674ee01c28b17171508cb5784"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
paulinashakirova
pushed a commit
to paulinashakirova/kibana
that referenced
this issue
Nov 26, 2024
…accessible via keyboard (elastic#201193) Closes: elastic#199760 Popovers, dialogs which are accessible with mouse, should also be accessible with keyboard. Otherwise users using only keyboard will miss the information present in popover, dialog. Closes: elastic#199749 User reaches the same button two times when navigating using only keyboard and it can get confusing. Better for element to get focus only one time when navigating in sequence from one element to another and for the user only to hear one announcement of the element. ## What was changed: 1. `CreateSearchApplicationButton` component: - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip` - extra `div` element with `tabindex` was removed. ## Screen https://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Dec 12, 2024
…accessible via keyboard (elastic#201193) Closes: elastic#199760 Popovers, dialogs which are accessible with mouse, should also be accessible with keyboard. Otherwise users using only keyboard will miss the information present in popover, dialog. Closes: elastic#199749 User reaches the same button two times when navigating using only keyboard and it can get confusing. Better for element to get focus only one time when navigating in sequence from one element to another and for the user only to hear one announcement of the element. ## What was changed: 1. `CreateSearchApplicationButton` component: - `EuiPopover` was replaced to more a11y-friendly `EuiToolTip` - extra `div` element with `tabindex` was removed. ## Screen https://github.com/user-attachments/assets/fbb62841-6f2f-45d0-bee3-39a11a4fc777
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Popovers, dialogs which are accessible with mouse, should also be accessible with keyboard. Otherwise users using only keyboard will miss the information present in popover, dialog.
Preconditions
Stateful Search Applications page is opened.
Steps to reproduce
1.Using only keyboard Navigate to Create button by pressing Tab key.
2.Press Enter.
3.Observe the page.
UI element when navigated with only keyboard
UI element + html snippet when hovered with mouse
Actual Result
Expected Result
Notes
In EUI guidelines https://eui.elastic.co/#/layout/popover it is mentioned that "Popovers must not be activated by hover or focus events.". So, if it really has to be popover it should appear only when user activates Create button. But when user activates Create button, flyout appears and in this case popover would be behind it and not visible. That's why suggestion would be to show popover when user reaches Create button.
Meta Issue
Kibana Version: 8.17.0-SNAPSHOT
OS: Windows 11 Pro
Browser: Chrome Version 130.0.6723.70 (Official Build) (64-bit)
WCAG or Vendor Guidance (optional)
Related to: https://github.com/elastic/search-team/issues/8256
The text was updated successfully, but these errors were encountered: