Update account menu for keyboard accessibility #2587
Conversation
Previously, the dropdown account menu in the top right could only be used by clicking on it using a mouse. People who use screen readers, such as those who are blind or have low-vision, require the ability to navigate and interact using keyboard-only. These users cannot use a mouse for user interaction. Now, the account menu can be interacted with using keyboard. It uses the `aria-expanded` and `aria-controls` to provide better feedback to screen readers about whether the menu is opened or closed.
|
We have created an issue in Pivotal Tracker to manage this: https://www.pivotaltracker.com/story/show/186402792 The labels on this github issue will be updated when the story is started. |
|
@Tallicia can you retrigger concourse ? |
|
I can't find the test. I am investigating and hope I don't need to add a commit as a way to re-trigger this. hmmm. |
|
It looks like CI does not play nicely with "external" repos - https://hush-house.pivotal.io/teams/cf-uaa/pipelines/pull-requests/jobs/uaa-standalone-tests/builds/2133.2 |
|
new UI |
There was a problem hiding this comment.
@ystros, the change looks good. However, I have one question. In Chrome, I can expand the button with "enter" key or "space" key then select an option via "tab" key. However, in Firefox, I cannot do that. In Firefox, I still have to use mouse to select an option. Are you aware of that? And would it be possible to make the selection also work in Firefox?
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
bruce-ricard
assigned bruce-ricard and swalchemist and unassigned bruce-ricard and swalchemist
strehle
added
the
clarification needed
|
FYI @ystros we will include your change in uaa release as soon as open questions answered #2587 (review) For now only the other PR from you is included in the recent release |
|
Hi @strehle @hsinn0! Apologies for the late reply. I'm not seeing the problem you mention with my copy of latest Firefox (120.0.1) on Mac. I can tab to the account menu, and pressing either space or enter is expanding the menu as expected and seen in other browsers. Once expanded, I can press tab again to select the "Account Settings" or "Sign Out" options, and pressing enter on those opens the appropriate link. I know certain browser have different keyboard navigation settings you need to enable (e.g. Safari does not allow tab navigation to buttons and links by default). Maybe I have some additional setting in Firefox enabled? This is what I see when I search Firefox settings for "keyboard" |
"Use the tab key ..." option was unchecked in my Mac FF settings. I do not know whether this is checked by default or not. In any case, the change is good. |
strehle
removed
in_review
Previously, the dropdown account menu in the top right could only be used by clicking on it using a mouse. People who use screen readers, such as those who are blind or have low-vision, require the ability to navigate and interact using keyboard-only. These users cannot use a mouse for user interaction.
Now, the account menu can be interacted with using keyboard. It uses the
aria-expandedandaria-controlsto provide better feedback to screen readers about whether the menu is opened or closed.