Comment 5 for bug 1615805

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

Here is a branch that rearranges the DOM order of buttons for the patron search form in both Angular and AngularJS: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1615805-patron-search-button-placement

This uses CSS Grid layout (https://wiki.evergreen-ils.org/doku.php?id=newdevs:grid) rather than Flexbox. Grid allows us to specify exactly where elements should go, which means we can place the buttons after all the form fields but still place them in the upper right corner. I've included styles to turn off the grid below certain breakpoints, which should make this form more usable on smaller screens.

To be clear, this is intended as an accessibility band-aid, and a temporary measure on the path to revamping this form entirely.

To test, tab through the form fields. You should skip over the search and clear buttons at first, and reach them only after you've cycled through all the inputs. (This will be a little odd for sighted keyboard users, but the improvement for screen reader users is worth the trade-off in this case.)