Iqss/8247 flyout menu accessibility

[qqmyers]

What this PR does / why we need it: Addresses accessibility issues for menus and fly-out submenus. Specifically, it makes the file table kebab menus tab-able/focusable, it makes those submenus keyboard accessible (i.e. being able to tab to them and hit enter or space to open/close the fly-out submenu), and adds a delay in closing the submenu when the mouse stops hovering over the parent item.

Which issue(s) this PR closes:

Closes #8247

Special notes for your reviewer: Seems like these submenus had tabindex="-1" attributes, causing them to be skipped from early in their histories - not sure why that was, or if the changes here mess with some intended functionality. FWIW: I added the required javascript into the dv_rebind_bootstrap_ui.js and have the mouse/keyboard event hooks removed/reinstalled whenever it's called. I was not sure whether/when the file table and dataset menus might be getting refreshed via ajax and thereby losing the event handlers. If anyone thinks the flyout menus never get updated, we can run them once at page launch.

Suggestions on how to test this:
Keyboard: Type tabbing through the menus - the fly-out submenu parent items should be focusable and clicking space or return on them should open/close the submenu. When the submenu is open, you should be able to tab through it. Tabbing back to the parent item should let you hit return again to close the submenu.

Mouse: Hovering over a submenu should cause it to flyout as before. When you move the mouse away from the parent, i.e. to other entries in the parent menu, the submenu should close after 1 second instead of immediately.

Affected Menus:

• Dataset Compute menu in the explore tools (not sure how to configure this)
• Dataset edit/permissions,
• Dataset/publish/change curation status,
• File Access Kebab (now tab-able): File Citations and Aux file submenus
• File Edit Kebab (now tab-able)

Note that using the mouse and keyboard at the same time can be confusing (i.e. hitting enter on the parent item doesn't open/close the menu if the mouse is hovering on the item as well.)

Does this PR introduce a user interface change? If mockups are available, please link/include them here: Yes. The UI itself doesn't change, just the focus behavior so hard to mock up. One question I have - as currently implemented, once you hit enter to open a submenu, you can tab through it (forward or backward), but it doesn't auto-close when you tab through to the next main menu item. (You can tab back to the parent item and hit enter/space to close the submenu.) I didn't immediately find info on what should happen (stay open so you can tab forward/backward through the open submenu, or close when you leave the submenu and having to backtab to the parent and hit enter again to re-open it) - what is best practice? (And if different than the PR, should we add the scope here, make a new issue, etc.?)

Is there a release notes update needed for this change?:

Additional documentation:

[TaniaSchlatter]

Thanks @qqmyers. Looks like the submenu should close when you tab off of it, like this one: https://www.w3.org/WAI/tutorials/menus/flyout/#use-parent-as-toggle and this one: https://a11y-guidelines.orange.com/en/web/components-examples/dropdown-menu/

[qqmyers]

1. Added tab stop for the file edit kebab as well.
2. Changed to make the fly-out menu close when you tab out of it.

In doing that, I noticed some other oddities:

• The preview item, if it is there, can be activated via keyboard only with the Enter key - space makes the page scroll a bit, whereas the kebab menus do nothing with Enter but open when spacebar is hit. (For the flyouts, I made Enter and spacebar open/close the fly-out.)
• The preview icon gets a black square with focus, along with having the title appear. The two kebab menus only get their titles showing up/ no border.
• Tabbing between top level menu items doesn't close them. I.e. open the file access kebab and there isn't a keyboard way to close it again except by opening another menu

Also FWIW - in testing various options such as https://www.w3.org/WAI/tutorials/menus/flyout/#use-parent-as-toggle , I was unable to receive keyboard hits via the click event (as that page suggests) so I'm guessing that either bootstrap or PrimeFaces (or ?) is also trying to manage events. I mention this partly to explain why I chose to catch keydown events and partly to suggest that bootstrap/PF updates could change the behaviors we're seeing now.

[TaniaSchlatter]

The file table buttons/menus are tab-able and focusable. The situation for Preview having better contrast is probably this: "the focus indicator is typically shown as a border or highlight (called an outline) around the focused element. These outlines can be hidden by applying outline:0 or outline:none CSS to focusable elements" from the reference @kaitlinnewson cited. It looks like outline is set to none on a few buttons, or some elements are not defined as buttons. It is problematic on the Access Dataset button, as the focus highlight button is subtile. Glad these improvements are being made. There is more to do (not nec. for this issue/pull request).