Merge pull request #100 from roomman/add-menu-key-interactions

Menu: add additional keydown events and tests
GavinJoyce · Nov 23, 2021 · 418874b · 418874b
2 parents dfee0f4 + aaa7c54
commit 418874b
Show file tree

Hide file tree

Showing 5 changed files with 1,464 additions and 210 deletions.
diff --git a/addon/components/menu.hbs b/addon/components/menu.hbs
@@ -31,6 +31,7 @@
       goToPreviousItem=this.goToPreviousItem
       goToItem=this.goToItem
       search=(perform this.searchTask)
+      searchTaskIsRunning=this.searchTask.isRunning
     )
   )
 }}
diff --git a/addon/components/menu/button.js b/addon/components/menu/button.js
@@ -24,7 +24,7 @@ export default class Button extends Component {
           });
         }
         break;
-      case 'ArrowUp':
+      case Keys.ArrowUp:
         event.preventDefault();
         event.stopPropagation();
         this.args.openMenu();

diff --git a/addon/components/menu/items.js b/addon/components/menu/items.js
@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
+import { Keys } from 'ember-headlessui/utils/keyboard';
+
 export default class Items extends Component {
   get menuItemsElementSelector() {
     return `#${this.args.itemsGuid}`;
@@ -10,20 +12,38 @@ export default class Items extends Component {
   onKeydown(event) {
     switch (event.key) {
       // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
-      case 'Enter':
+      // `Escape` key is handled by focus-trap
+      case Keys.Space:
+        if (this.args.searchTaskIsRunning) {
+          event.preventDefault();
+          event.stopPropagation();
+          return this.args.search(event.key);
+        }
+      // eslint-disable-next-line no-fallthrough
+      case Keys.Enter:
         if (this.args.activeItem) {
           this.args.activeItem.element.click();
         }
         this.args.closeMenu();
         break;
-      case 'ArrowDown':
+      case Keys.ArrowDown:
         event.preventDefault();
         event.stopPropagation();
         return this.args.goToNextItem();
-      case 'ArrowUp':
+      case Keys.ArrowUp:
         event.preventDefault();
         event.stopPropagation();
         return this.args.goToPreviousItem();
+      case Keys.Home:
+      case Keys.PageUp:
+        event.preventDefault();
+        event.stopPropagation();
+        return this.args.goToFirstItem();
+      case Keys.End:
+      case Keys.PageDown:
+        event.preventDefault();
+        event.stopPropagation();
+        return this.args.goToLastItem();
       default:
         if (event.key.length === 1) {
           return this.args.search(event.key);