Bug 1874968: Pressing escape key doesn't exit the dropdown list #6907
Conversation
openshift-ci-robot
added
do-not-merge/work-in-progress
|
@harishsurf: This pull request references Bugzilla bug 1874968, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker. 3 validation(s) were run on this bug
In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
openshift-ci-robot
added
the
bugzilla/valid-bug
openshift-ci-robot
added
the
component/core
Bug 1874968: Accessibility: The project selection drop down is a keyboard trap Signed-off-by: Harish <hgovinda@redhat.com>
harishsurf
force-pushed
the
accessibility_dropdown
branch
from
4ea7872
to
cb887e5
Compare
harishsurf
changed the title
openshift-ci-robot
removed
the
do-not-merge/work-in-progress
| this.globalKeyDown = (e) => { | ||
| if (e.key === 'Escape' && this.state.active) { |
There was a problem hiding this comment.
This fixes one problem, but the accessibility issues seem to run a little deeper. You can tab outside of the project dropdown with it still open. We should really be using a focus trap and the tab key should cycle through the items in the dropdown, with escape closing. I shouldn't be able to tab outside the dropdown to other items on the page when it's open.
cc @jessiehuff
There was a problem hiding this comment.
I completely agree. You should not be able to tab outside of the dropdown when it's expanded. PF's most similar comparison in terms of keyboard interaction is our Context Selector. The keyboard interaction pattern we use there is similar in that you're able to tab through the options, but when you get to the bottom, pressing tab again brings you back to the top to the search input. So, as Sam mentioned, their focus should remain in the dropdown unless they escape out/close the dropdown.
There was a problem hiding this comment.
@jessiehuff, in the link you shared above, using the up/down arrow keys don't seem to be traversing through the dropdown list. Only the tab key does that. Do we want to have similar behavior for this dropdown?
There was a problem hiding this comment.
I would say that the ideal keyboard interaction would be to be able to tab to the search input and the create project button, but once focus leaves “Create Project” it should land on the options menu as a whole. Hitting the Tab key again would take the user back to the beginning of the panel, to the search input. While focus is on the options menu, the recommendation is to use arrow keys to manage focus within the menu: down/up arrow keys to traverse through the list items, right/left arrow keys to get between the item options. The reason for this is based on the WAI fundamental keyboard navigation conventions:
“A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements.“
The menu itself could be considered a UI component on its own and then within that UI component is when you would use the arrow keys. At least according to the WAI ideal. However, being able to tab through all items instead of using arrow keys is still accessible so what you have here with just Tab is an ok alternative. We’ve had intentions to update our context selector to follow that pattern and become more ideal as well, but given our recent commitments, it hasn’t been as high of a priority. The typeahead select is likely the most similar to the previous interaction mentioned specifically with the favoriting/bookmarking feature. For that component, you’re able to cycle through the items with the up/down arrow keys, then you press tab to switch focus into the select before you can use the up/down and right/left arrow key interaction that I’m referring to here. So it is a little bit different in how to get to the arrow key functionality, but that was necessary given the typeahead functionality of being able to select from the options as you’re typing.
There was a problem hiding this comment.
Alright. I have created this Jira to work on this. For now, this PR will be a temporary fix
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: harishsurf, spadgett The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci-robot
added
the
approved
|
@harishsurf: All pull requests linked via external trackers have merged: Bugzilla bug 1874968 has been moved to the MODIFIED state. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
Bug 1874968: Keyboard shortcut to exit dropdown doesn't work
Signed-off-by: Harish hgovinda@redhat.com