Address a11y issues in browser-based console UI
If merged, this PR addresses (at least some of) the accessibility issues outlined in https://hashicorp.atlassian.net/browse/VAULT-26829
- [x] Associate help text with input
- [x] Update minimize/maximize window message
- [x] remove tooltip on maximize button
- [x] Hide decorative glyphs from assistive tech
- [x] add support for ESC key
- [x] add focus trap
- [x] update console so it conditionally renders if it is opened
- [x] update tests that fail due to previous lack of conditional rendering
Some notes:
- The ESC key is not really working as fully intended right now. Trying to use the
oDeactivateoption fromfocus-trapand pass it thethis.closeConsoleaction. It moves the focus back to the toggle button, but it doesn't actually close the console. 🤔 So this is still something to figure out more completely. - Added the
clickOutsideDeactivatesoption to focus trap, that way if a mouse user still wants to use the background and navigate around they can. A keyboard-only user will stay inside of the focus-trap area until they explicitly take an action to leave it or close it. - Because there are interactive elements in the
Console::UiPanelcomponent, it's not enough for height of the parent container to be set to 0; the elements are still in the DOM and therefore violate hiding interactive elements. To account for this, I've updated theframe.hbsto conditionally render theConsole::UiPanelcomponent ifthis.console.isOpenis true. - ⚠️ Due to this conditional render change, there are failing tests that attempt to simply target the input and test a command. They need to be updated to toggle the console button first, and then target the input. There are some tests that do this correctly, and these pass.
CI Results: All Go tests succeeded! :white_check_mark:
Build Results: All builds succeeded! :white_check_mark:
There might be some future improvements that could be done to make this more of a lush experience but for the time being, this will provide compliance with WCAG and fix the critical a11y issues with this part of the UI. 👍
@chelshaw there are still some tests failing, but I can't see what they have to do with any of the changes I made. I might need some expert eyes to help me here.