Keyboard Navigation acceptance tests (#13893)

* Acceptance tests for keyboard modal * a11y audit fix and localStorage clear * Bind/rebind/localStorage tests * Keyboard tests for dynamic nav and tables * Rebinder and assert expectation * Second percy snapshot showing hints no longer relevant
hashicorp · Jul 22, 2022 · 02083a5 · 02083a5
1 parent ee19f85
commit 02083a5
Show file tree

Hide file tree

Showing 4 changed files with 382 additions and 16 deletions.
diff --git a/ui/app/components/keyboard-shortcuts-modal.hbs b/ui/app/components/keyboard-shortcuts-modal.hbs
@@ -11,6 +11,7 @@
         class="button is-borderless dismiss"
         type="button"
         {{on "click" (toggle "keyboard.shortcutsVisible" this)}}
+        aria-label="Dismiss"
       >
         {{x-icon "cancel"}}
       </button>
@@ -19,7 +20,7 @@
     </header>
     <ul class="commands-list">
       {{#each this.commands as |command|}}
-        <li>
+        <li data-test-command-label={{command.label}}>
           <strong>{{command.label}}</strong>
             <span class="keys">
               {{#if command.recording}}
@@ -30,7 +31,7 @@
                 {{/if}}
               {{/if}}
 
-              <button disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
+              <button data-test-rebinder disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
                 {{#each command.pattern as |key|}}
                   <span>{{clean-keycommand key}}</span>
                 {{/each}}
@@ -42,7 +43,7 @@
     <footer>
       <strong>Keyboard shortcuts {{#if this.keyboard.enabled}}enabled{{else}}disabled{{/if}}</strong>
       <Toggle
-        data-test-cpu-toggle
+        data-test-enable-shortcuts-toggle
         @isActive={{this.keyboard.enabled}}
         @onToggle={{this.toggleListener}}
         title="{{if this.keyboard.enabled "enable" "disable"}} keyboard shortcuts"
@@ -54,8 +55,9 @@
 {{#if (and this.keyboard.enabled this.keyboard.displayHints)}}
   {{#each this.hints as |hint|}}
     <span
-      {{did-insert this.tetherToElement element=hint.element hint=hint}}
-      {{will-destroy this.untetherFromElement element=hint.element hint=hint}}
+      {{did-insert (fn this.tetherToElement hint.element hint)}}
+      {{will-destroy (fn this.untetherFromElement hint)}}
+      data-test-keyboard-hint
       data-shortcut={{hint.pattern}}
       class="{{if hint.menuLevel "menu-level"}}"
       aria-hidden="true"

diff --git a/ui/app/components/keyboard-shortcuts-modal.js b/ui/app/components/keyboard-shortcuts-modal.js
@@ -6,6 +6,7 @@ import Tether from 'tether';
 
 export default class KeyboardShortcutsModalComponent extends Component {
   @service keyboard;
+  @service config;
 
   escapeCommand = {
     label: 'Hide Keyboard Shortcuts',
@@ -42,18 +43,25 @@ export default class KeyboardShortcutsModalComponent extends Component {
     }
   }
 
-  tetherToElement(self, _, { element, hint }) {
-    let binder = new Tether({
-      element: self,
-      target: element,
-      attachment: 'top left',
-      targetAttachment: 'top left',
-      targetModifier: 'visible',
-    });
-    hint.binder = binder;
+  @action
+  tetherToElement(element, hint, self) {
+    if (!this.config.isTest) {
+      let binder = new Tether({
+        element: self,
+        target: element,
+        attachment: 'top left',
+        targetAttachment: 'top left',
+        targetModifier: 'visible',
+      });
+      hint.binder = binder;
+    }
   }
-  untetherFromElement(self, _, { hint }) {
-    hint.binder.destroy();
+
+  @action
+  untetherFromElement(hint) {
+    if (!this.config.isTest) {
+      hint.binder.destroy();
+    }
   }
 
   @action toggleListener() {