Address a11y issues in browser-based console UI #26872

MelSumner · 2024-05-07T20:29:03Z

If merged, this PR addresses (at least some of) the accessibility issues outlined in https://hashicorp.atlassian.net/browse/VAULT-26829

Associate help text with input
Update minimize/maximize window message
remove tooltip on maximize button
Hide decorative glyphs from assistive tech
add support for ESC key
add focus trap
update console so it conditionally renders if it is opened
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 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.
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.
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.
⚠️ 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.

github-actions · 2024-05-07T20:36:38Z

CI Results:
All Go tests succeeded! ✅

github-actions · 2024-05-08T17:26:36Z

Build Results:
All builds succeeded! ✅

MelSumner · 2024-05-08T17:41:17Z

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

hashishaw

This change needs a changelog so that users know the rest of the UI will not be interactive when the Web REPL is open. I will follow up on slack with our instructions on how to add a changelog to Vault

ui/app/templates/components/console/command-input.hbs

ui/app/styles/components/console-ui-panel.scss

ui/app/templates/components/console/ui-panel.hbs

MelSumner · 2024-05-13T22:25:40Z

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

changelog/26872.txt

MelSumner · 2024-05-13T22:27:08Z

ui/app/components/console/command-input.js

@@ -17,16 +17,17 @@ export default Component.extend({
  actions: {
    handleKeyUp(event) {
      const keyCode = event.keyCode;
+      const val = event.target.value;


I changed this to make it more consistent with the rest of the UI code so the implementation matches.

ui/app/components/console/ui-panel.js

MelSumner · 2024-05-13T22:29:27Z

ui/app/styles/components/console-ui-panel.scss

@@ -118,11 +120,11 @@ $console-close-height: 35px;

 .panel-open .console-ui-panel {
  box-shadow: $box-shadow-highest;
-  min-height: 400px;
+  min-height: 425px;


I think eventually we'll want to re-visit this to make it a little more flexible, but right now it needed to be increased to account for the close button.

The close button was positioned in the DOM outside of the container it was then positioned inside of, which was causing the element to overlap. We don't want it to overlap other content.

MelSumner · 2024-05-13T22:30:19Z

ui/app/templates/components/console/command-input.hbs

@@ -10,19 +10,20 @@
    <Chevron />
  {{/if}}
  <input
-    aria-label="command input"
+    aria-label="web R.E.P.L."


Adding it as "R.E.P.L." instead of just REPL helps screen readers to read it out correctly.

MelSumner · 2024-05-13T22:33:20Z

ui/tests/pages/components/console/ui-panel.js

@@ -54,12 +54,18 @@ export default {
    eventProperties: { keyCode: keys.ENTER },
  }),
  hasInput: isPresent('[data-test-component="console/command-input"] input'),
-  runCommands: async function (commands) {
+  runCommands: async function (commands, shouldToggle = true) {


We needed to add an extra condition here, because there are tests that don't actually need the toggle to happen. Maybe it's rendering the console/ui-panel directly, or maybe it's a test that runs multiple commands and multiple toggles would cause those tests to fail.

But in most cases this is a useful thing to do, so it defaults to true

hashishaw

Looks great! My only concern is about no longer throwing errors on setup. I'm also going to check double check if this is okay to get in now, after feature freeze for 1.17. Thank you for working through all those test failures!

changelog/26872.txt

ui/tests/acceptance/oidc-provider-test.js

hashishaw

✨ beautiful, thank you!

Added console focus trap Added else conditional for console-panel update aria-label for input reverting height style change reverting focus trap for now fixed typo re-adding focus trap to console::uiPanel component refactor conditional yield of console ui panel remove duplicated option for ui panel move ESC command to focus-trap change focus-trap to use onDeactivate

move toggle to commands helper file move toggle to ui-panel helper file added shouldToggle arg to runcommand fix console tests

remove unnecessary comment

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>

MelSumner added the a11y label May 7, 2024

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 7, 2024

hashishaw added the ui label May 8, 2024

MelSumner force-pushed the melsumner/VAULT-26829 branch from 64fc50b to 2b6fcba Compare May 8, 2024 16:49

MelSumner marked this pull request as ready for review May 8, 2024 17:20

MelSumner requested a review from a team as a code owner May 8, 2024 17:20

MelSumner marked this pull request as draft May 8, 2024 17:21

MelSumner marked this pull request as ready for review May 8, 2024 17:29

hashishaw requested changes May 8, 2024

View reviewed changes

ui/app/templates/components/console/command-input.hbs Outdated Show resolved Hide resolved

ui/app/styles/components/console-ui-panel.scss Outdated Show resolved Hide resolved

ui/app/templates/components/console/ui-panel.hbs Show resolved Hide resolved

MelSumner force-pushed the melsumner/VAULT-26829 branch 3 times, most recently from fefe1cd to 95cfa00 Compare May 13, 2024 22:24

MelSumner requested a review from hashishaw May 13, 2024 22:24

MelSumner commented May 13, 2024

View reviewed changes

changelog/26872.txt Outdated Show resolved Hide resolved

MelSumner commented May 13, 2024

View reviewed changes

ui/app/components/console/ui-panel.js Outdated Show resolved Hide resolved

MelSumner commented May 13, 2024

View reviewed changes

MelSumner force-pushed the melsumner/VAULT-26829 branch from 5a4f9eb to 0bb73ef Compare May 14, 2024 20:46

hashishaw reviewed May 15, 2024

View reviewed changes

changelog/26872.txt Outdated Show resolved Hide resolved

ui/tests/acceptance/oidc-provider-test.js Outdated Show resolved Hide resolved

hashishaw added this to the 1.17.0-rc milestone May 15, 2024

MelSumner commented May 16, 2024

View reviewed changes

ui/tests/acceptance/oidc-provider-test.js Outdated Show resolved Hide resolved

hashishaw approved these changes May 16, 2024

View reviewed changes

MelSumner added 2 commits May 16, 2024 11:27

VAULT-26829

3fc63ae

associate input and help text

bce5995

MelSumner and others added 16 commits May 16, 2024 11:27

Add ESC key support

c128021

fix test to toggle panel open before using it

36256da

move toggle to commands helper file move toggle to ui-panel helper file added shouldToggle arg to runcommand fix console tests

add changelog

425cc5b

Update ui/app/components/console/ui-panel.js

4bb5705

remove unnecessary comment

Update test to try to get it to pass

bf26929

add support for console dismiss button

b319d10

updates to command helper for toggling console

a4f5409

Adjusted code so tests pass

8bbb24a

Fixed one of the failing tests (one is still failing)

6b39201

Adjusted code so tests pass

5977177

Adjusted code to fix test

7525254

Added additional changelog text

30f9edc

Update changelog/26872.txt

a5b2076

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>

Update ui/tests/acceptance/oidc-provider-test.js

5029cf1

remove errant code

b9d6b0c

MelSumner force-pushed the melsumner/VAULT-26829 branch from 4291e2d to b9d6b0c Compare May 16, 2024 16:27

hashishaw enabled auto-merge (squash) May 16, 2024 16:30

hashishaw merged commit 530b266 into main May 16, 2024
31 checks passed

hashishaw deleted the melsumner/VAULT-26829 branch May 16, 2024 16:39

hashishaw mentioned this pull request May 16, 2024

Fix enterprise tests failing after Web REPL a11y updates #27092

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Address a11y issues in browser-based console UI #26872

Address a11y issues in browser-based console UI #26872

MelSumner commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

github-actions bot commented May 8, 2024 •

edited

MelSumner commented May 8, 2024

hashishaw left a comment

MelSumner commented May 13, 2024

MelSumner May 13, 2024

MelSumner May 13, 2024

MelSumner May 13, 2024

MelSumner May 13, 2024 •

edited

hashishaw left a comment

hashishaw left a comment

Address a11y issues in browser-based console UI #26872

Address a11y issues in browser-based console UI #26872

Conversation

MelSumner commented May 7, 2024 • edited

github-actions bot commented May 7, 2024 • edited

github-actions bot commented May 8, 2024 • edited

MelSumner commented May 8, 2024

hashishaw left a comment

Choose a reason for hiding this comment

MelSumner commented May 13, 2024

MelSumner May 13, 2024

Choose a reason for hiding this comment

MelSumner May 13, 2024

Choose a reason for hiding this comment

MelSumner May 13, 2024

Choose a reason for hiding this comment

MelSumner May 13, 2024 • edited

Choose a reason for hiding this comment

hashishaw left a comment

Choose a reason for hiding this comment

hashishaw left a comment

Choose a reason for hiding this comment

MelSumner commented May 7, 2024 •

edited

github-actions bot commented May 7, 2024 •

edited

github-actions bot commented May 8, 2024 •

edited

MelSumner May 13, 2024 •

edited