<a routerLink><button></button></a> yields two stops during keyboard navigation

Bug #2052960 reported by Galen Charlton
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Fix Released
Fix Released

Bug Description

As exemplified by the Patron View and Place Hold buttons in the action bar for record details in the Evergreen staff interface the construct <a routerLink><button></button></a> results in needing two hits of the tab button to move on when navigating the interface via keyboard. Regardless of whether the link or the button has focus, the action corresponding to the button happens when you hit enter.

I see this in both Firefox 122.0.1 and Chrome 121.0.6167.161 on Windows.

Desired behavior is that the control needs just one hit of the tab key to move away from.

Evergreen 3.11+

Galen Charlton (gmc)
Changed in evergreen:
importance: Undecided → Low
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

We definitely should not have buttons nested inside links; in general, we can't have any interactive element nested inside any other.

Branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2052960-catalog-record-actions-nested-buttons

To test:

1. View any bib record (staff/catalog/record/210 will do)
2. Inspect the Patron View and Place Hold buttons below the bib summary box
3. Verify that the link tags do not contain button tags
4. Verify that both links still work

tags: added: accessibility ux-buttons ux-keyboard
tags: added: pullrequest
Revision history for this message
Galen Charlton (gmc) wrote :

Tested and signed off after resolving a merge conflict. Branch is user/gmcharlt/lp2052960_signoff

tags: added: signedoff
Galen Charlton (gmc)
Changed in evergreen:
milestone: none → 3.12.2
status: New → Confirmed
Revision history for this message
Jane Sandberg (sandbergja) wrote :

Thanks, Stephanie and Galen! Pushed to rel_3_11 and above.

Changed in evergreen:
status: Confirmed → Fix Committed
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.