angular: add keyboard support to eg-grid options menu

[Andrea Neiman]

Master-ish (3.3+)

In the new Angular version of eg-grid, the gear icon represents the column options menu. This gear icon, if focused, will open the menu with an 'enter' keypress; however, up/down keys do not allow you to move through the list.

It would be an accessibility improvement to allow keyboard use of this menu, both to navigate up and down the list as well as to select or deselect column options from the list.

[Mike Risher (mrisher)]

A branch has been pushed to improve accessibility of the grid:

* The options within the grid's Column Options Menu can now be selected solely with a keyboard.

* The options menu has additional UIs for "Manage Columns" and "Manage Column Widths". These weren't accessible via keyboard either, so they've also been modified so that they're accessible.

* The number of grid rows couldn't be modified by keyboard. This has been addressed as well.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1828575-eg-grid-options-accessibility

[Terran McCanna (tmccanna)]

Very nice! My sign off is at:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1828575-eg-grid-options-accessibility-signoff

[Jane Sandberg (sandbergja)]

I'd like to propose a different approach: using <button> rather than <a href="javscript:void(0)"> tags.

For column config buttons, <button class="btn"> works pretty nicely.

For entries in dropdowns, <button ngbDropdownItem> works well.

This would give us a few benefits:
1) This would clear up some console log noise
2) Once you select a particular dropdown item with the enter key, the dropdown would close
3) Bonus: button is more semantically correct

[Mike Risher (mrisher)]

Thanks for the suggestions. Not clear what you mean re: console log noise. I see no logging on my end.

The work has been modified. All changes have been tested with NVDA. Some notes on the updates:

* The suggested approach to dropdowns causes display issues on all dropdown entries which use both an icon and text, which is most of them. The <button> tag has been implemented with a different approach on those.
* An <a> tag is needed on the "Download Full CSV" link due to the href and download attributes.
* Accessibility has been improved on the Manage Columns and Manage Column Widths grids. Now when a screen reader "looks at" an individual grid cell it'll read the column name and then the button function. For example: "Label Move Up", "Label Move Down"
* The Manage Columns interface has checkboxes. They're now using the proper role="checkbox" and aria-checked="true" or "false". The result is that a screen reader now understands they're checkboxes and will say if they're checked or unchecked.

It's ready for another look:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1828575-eg-grid-options-accessibility-v2

[Jane Sandberg (sandbergja)]

Works well for me! Thank you, Mike. Signoff here: user/sandbergja/lp1828575-eg-grid-options-accessibility-v2-signoff

[Galen Charlton (gmc)]

Upon reviewing this, using the button element for showing/hiding columns leads to the following result on (at least) Firefox 89.0: if you're navigating strictly by keyboard, when you get to the list of columns, it's not possible to visually tell which column you have selected. Going back to the <a href="javscript:void(0)"> approach would mean that the entire menu entry, including label, is highlighted.

Consequently, I think this needs a little more work. I did fix a rebase issue, so the current rebased branch is working/user/gmcharlt/lp1828575_rebased.

[Galen Charlton (gmc)]

(Also, this introduces unnecessary (IMO) vertical padding between rows in the column configuration drop-down.)

[Stephanie Leary (stephanieleary)]

This branch addresses only the keyboard operation + focus style issues:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/1828575-eg-grid-options-keyboard

I have not included the checkbox enhancements from Mike's second branch; I'll look at those separately later.

To test, open up the grid options dropdown and press your Tab key. The various menu options should appear outlined in blue, unless they are disabled, and pressing Space or Enter while one is focused should do whatever that button does.

The Manage Column Widths arrows and all the up/down arrows in the Grid Column Configuration dialog should also have focus outlines and Space/Enter support.

[Terran McCanna (tmccanna)]

I'm getting several merge conflicts when I try to apply this to current master.

[Stephanie Leary (stephanieleary)]

Bootstrap 5 strikes again. Rebased! Thanks, Terran.

[Blake GH (bmagic)]

Merge conflict today (feedback fest)

[Michele Morgan (mmorgan)]

Merges cleanly for me!

[William C. Szwagiel (wszwagiel)]

* The number of grid rows couldn't be modified by keyboard. This has been addressed as well.

Hello, this does not appear to be working for me, though I may be misunderstanding or doing something wrong. I am able to highlight the grid rows button with Tab, and when I press enter the dropdown menu appears. However, there does not appear to be a way to select any of the numbers listed in the menu.

If I hit Tab, it moves to the next button, not one of the numbers. I am unable to select any of the numbers using the up and down arrow keys, either.

[Stephanie Leary (stephanieleary)]

Thank you for pointing out that I'd overlooked the row number dropdown, William!

I've updated and rebased the branch above. Note that because these are scrollable menus, the keyboard support is inconsistent with our other non-scrolling dropdowns. Only the tab key works; the up/down arrow keys will not move from the toggle button into the submenu, or move between submenu options, because they trigger the scroll instead. You also have to press tab twice to move from the toggle to the first submenu item, because the scrollable submenu as a whole is a tab stop.

I could not find a good way around this; adding preventDefault() in a keydown listener on the arrow keys didn't work. I'm open to suggestions. In the meantime, the tab key is better than nothing.

[William C. Szwagiel (wszwagiel)]

Hello again,

After reading Stephanie's message, I went back to test this again following her instructions, and I wonder if perhaps I am still misunderstanding how exactly these fixes are applied? In my previous tests, I was using the Holds Pull List screen (because I knew it had the "gear" icon button). When I went to test this again, I once again used the Holds Pull List screen, but I am still unable to select any of the numbers from the Rows dropdown menu with the Tab key.

However, this time I thought to test this by using the Item Status screen as well (even though it does not have the gear icon button). On that screen, the fix appears to have been successful, as I am able to highlight the numbers in the Rows dropdown menu by pressing the Tab key.

Are these fixes only applied to specific screens in Evergreen, or should they resolve issues on all the different screens?

[Andrea Neiman (aneiman)]

Tossing in a cross reference to related bug 1833726

[Susan Morrison (smorrison425)]

I tested several different interfaces (Holds Pull List, Cash Reports, Acq, etc.), and confirmed
- you can tab through the gear dropdown options and select or deselect using enter or space
- options are outlined in blue as you tab
- Manage Column Widths and Grid Column Configuration include the focus outlines and selection with space or enter; up and down arrows work for the Sort Priority in the Grid Column Configuration
- Tabbing and selecting works in the Row number dropdown

I don't know if anything can be done about this but thought I'd note it just in case - when deselecting grid options, because it automatically puts it back in its spot in the list, if the option deselected is at the bottom of the list, the next tab exits you out of the menu.

[Terran McCanna (tmccanna)]

Responding to William in Comment #15 - these fixes are only for the Angular screens (the easiest way for me to tell the difference is that the Angular screens have eg2 in the URL).

[Terran McCanna (tmccanna)]

I admit I'm far from an expert on this, but I've tested to the best of my abilities (and see that Susan did a thorough testing as well) and I'm willing to add my signoff:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1828575-eg-grid-options-keyboard-signoff

[Galen Charlton (gmc)]

Pushed to main and rel_3_11. Thanks, Stephanie and Terran!

Keyboard navigation of the grid controls is working as described. However, testing with Windows Narrator on (in Win11) is leading to some funky results:

- In Firefox, the act of showing/hiding a column turns the column management menu invisible
- In Chrome, navigating around the grid controls gives me a lot of "No item in view statements" for the buttons.

I don't know if these issues are more about Narrator or are resolvable via changes to the ARIA tagging, but this may be an area for future work.