vault icon indicating copy to clipboard operation
vault copied to clipboard

Address a11y issues in browser-based console UI

Open MelSumner opened this issue 1 year ago • 4 comments

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:

  1. The ESC key is not really working as fully intended right now. Trying to use the oDeactivate option from focus-trap and pass it the this.closeConsole action. 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.
  2. Added the clickOutsideDeactivates option 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.
  3. Because there are interactive elements in the Console::UiPanel component, 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 the frame.hbs to conditionally render the Console::UiPanel component if this.console.isOpen is true.
  4. ⚠️ 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.

MelSumner avatar May 07 '24 20:05 MelSumner

CI Results: All Go tests succeeded! :white_check_mark:

github-actions[bot] avatar May 07 '24 20:05 github-actions[bot]

Build Results: All builds succeeded! :white_check_mark:

github-actions[bot] avatar May 08 '24 17:05 github-actions[bot]

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. 👍

MelSumner avatar May 08 '24 17:05 MelSumner

@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.

MelSumner avatar May 13 '24 22:05 MelSumner