-
Notifications
You must be signed in to change notification settings - Fork 488
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Iqss/8247 flyout menu accessibility #8257
Iqss/8247 flyout menu accessibility #8257
Conversation
just a checkpoint - only this submenu supported Conflicts: src/main/webapp/filesFragment.xhtml
Conflicts: src/main/webapp/dataset.xhtml
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/ |
In doing that, I noticed some other oddities:
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. |
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). |
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:
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: