The Serials, Mark For, and Other Actions dropdowns in the staff catalog can't be navigated by keyboard

Bug #1814978 reported by Jane Sandberg
12
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
Low
Unassigned

Bug Description

Steps to reproduce:
1) In the web staff client, open a bib record.
2) Use the tab key to give focus to the Serials, Mark For, or Other Actions dropdown
3) Press the enter key to open up the dropdown.
4) Try to navigate the dropdown with tab, the arrow keys, or any other keys you can think of. Unfortunately, they do not work.

This is because entries in that dropdown menu are <a> tags with no href attributes, which are not included in the tabindex. I think there are a few different ways we can address this:

1) Add a tabindex="0" attribute to the entries in the dropdown, which would make it navigable by tab.
2) Add a href="#" attribute to the entries in the dropdown, which would make them navigable by tab. This is what the official uib-dropdown examples do.
3) Changing the <a> tags to <button> tags, which would make them navigable by tab
4) Add a keyboard-nav attribute to the div.btn-group (see https://angular-ui.github.io/bootstrap#uib-dropdown-settings), which would make it navigable by arrow keys. I would assume that we probably don't want to do this unless we consistently make all dropdowns in the UI navigable by arrow keys.

Revision history for this message
Kate Coleman (katecoleman) wrote :

Confirmed in webclient 3.1.10 using steps above. Can tab through the main menu fine, but when getting to a dropdown menu, cannot navigate any further via keyboard.

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Josh Stompro (u-launchpad-stompro-org) wrote :

Related bug #1697003 (webstaff: keyboard-nav for uib-dropdown)

tags: removed: webstaffclient
Revision history for this message
Erica Rohlfs (erohlfs) wrote :

There might be a slight change in version 3.7. I can follow steps 1 - 3. When I get to step 4, I can use the tab key to select either "Manage Subscriptions" or "Manage MFHD." However, the arrow keys still do not allow for navigation.

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

These submenu items just need the ngbDropdownItem directive to add keyboard support.

Branch here:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1814978-bib-action-dropdown-kbd

tags: added: pullrequest
Revision history for this message
Susan Morrison (smorrison425) wrote :

Confirmed ability to navigate using the arrow keys within the Serials, Mark For, or Other Actions dropdown menus.

I have tested this code and consent to signing off on it with my name, Susan Morrison, and my email address, <email address hidden>.

tags: added: signedoff
Revision history for this message
Jane Sandberg (sandbergja) wrote :

Thanks, Stephanie and Susan! Added to rel_3_10 and above.

Changed in evergreen:
status: Confirmed → Fix Committed
milestone: none → 3.10.1
importance: Undecided → Low
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.