Merge pull request #964 from cardstack/enter-key-create-card-def

Improve keyboard handling of CodeMode New file modals
cardstack · Jan 17, 2024 · bd9a50f · bd9a50f
2 parents e280f96 + 6ebd83b
commit bd9a50f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/packages/host/app/components/operator-mode/create-file-modal.gts b/packages/host/app/components/operator-mode/create-file-modal.gts
@@ -1,4 +1,5 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
@@ -10,6 +11,8 @@ import { tracked } from '@glimmer/tracking';
 
 import { restartableTask, enqueueTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
 import camelCase from 'lodash/camelCase';
 
 import {
@@ -87,6 +90,10 @@ export default class CreateFileModal extends Component<Signature> {
       @size='medium'
       @isOpen={{this.isModalOpen}}
       @onClose={{this.onCancel}}
+      {{focusTrap
+        isActive=this.onSetup.isIdle
+        focusTrapOptions=(hash initialFocus=this.initialFocusSelector)
+      }}
       data-test-ready={{this.onSetup.isIdle}}
       data-test-create-file-modal
     >
@@ -181,6 +188,7 @@ export default class CreateFileModal extends Component<Signature> {
             <div class='footer-buttons'>
               <Button
                 {{on 'click' this.onCancel}}
+                {{onKeyMod 'Escape'}}
                 @size='tall'
                 data-test-cancel-create-file
               >
@@ -193,6 +201,7 @@ export default class CreateFileModal extends Component<Signature> {
                   @loading={{this.createCardInstance.isRunning}}
                   @disabled={{this.isCreateCardInstanceButtonDisabled}}
                   {{on 'click' (perform this.createCardInstance)}}
+                  {{onKeyMod 'Enter'}}
                   data-test-create-card-instance
                 >
                   Create
@@ -204,6 +213,7 @@ export default class CreateFileModal extends Component<Signature> {
                   @loading={{this.duplicateCardInstance.isRunning}}
                   @disabled={{this.isDuplicateCardInstanceButtonDisabled}}
                   {{on 'click' (perform this.duplicateCardInstance)}}
+                  {{onKeyMod 'Enter'}}
                   data-test-duplicate-card-instance
                 >
                   Duplicate
@@ -220,6 +230,7 @@ export default class CreateFileModal extends Component<Signature> {
                   @loading={{this.createDefinition.isRunning}}
                   @disabled={{this.isCreateDefinitionButtonDisabled}}
                   {{on 'click' (perform this.createDefinition)}}
+                  {{onKeyMod 'Enter'}}
                   data-test-create-definition
                 >
                   Create
@@ -387,6 +398,18 @@ export default class CreateFileModal extends Component<Signature> {
     this.fileName = name;
   }
 
+  private get initialFocusSelector() {
+    switch (this.maybeFileType?.id) {
+      case 'card-instance':
+      case 'card-definition':
+      case 'field-definition':
+      case 'duplicate-instance':
+        return '.create-file-modal .realm-dropdown-trigger';
+      default:
+        return false;
+    }
+  }
+
   private get maybeFileType() {
     return this.currentRequest?.fileType;
   }

diff --git a/packages/host/app/components/operator-mode/edit-field-modal.gts b/packages/host/app/components/operator-mode/edit-field-modal.gts
@@ -1,4 +1,5 @@
 import { fn } from '@ember/helper';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -8,6 +9,9 @@ import { tracked } from '@glimmer/tracking';
 
 import { restartableTask } from 'ember-concurrency';
 
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
+
 import {
   BoxelButton,
   BoxelInput,
@@ -347,6 +351,9 @@ export default class EditFieldModal extends Component<Signature> {
       @onClose={{@onClose}}
       @size='medium'
       @centered={{true}}
+      {{focusTrap
+        focusTrapOptions=(hash initialFocus='.add-field-modal input')
+      }}
       class='add-field-modal'
       data-test-add-field-modal
       style={{cssVar boxel-modal-offset-top='40vh'}}
@@ -426,6 +433,7 @@ export default class EditFieldModal extends Component<Signature> {
             <BoxelButton
               @kind='secondary-light'
               {{on 'click' @onClose}}
+              {{onKeyMod 'Escape'}}
               data-test-cancel-adding-field-button
             >
               Cancel
@@ -434,6 +442,7 @@ export default class EditFieldModal extends Component<Signature> {
             <BoxelButton
               @kind='primary'
               {{on 'click' this.saveField}}
+              {{onKeyMod 'Enter'}}
               @disabled={{this.submitDisabled}}
               data-test-save-field-button
             >