From 5375f42210497c0773bada6b6bfbe59ab0a7974c Mon Sep 17 00:00:00 2001
From: Jake Fink <jfink@bitwarden.com>
Date: Thu, 16 Feb 2023 15:11:02 -0500
Subject: [PATCH] [EC-1029][EC-1030][EC-1031] focus on dialogs in admin console
 (#4634)

* [EC-1031] focus on dialogs in vault

* [EC-1031] remove extra permissionMode

* [EC-1030] add focus to group dialog

* [EC-1031] undo extra changes

* Update apps/web/src/vault/app/vault/vault-items.component.html

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
---
 apps/web/src/app/core/web-platform-utils.service.ts    |  1 +
 .../organizations/manage/group-add-edit.component.html |  2 +-
 .../collection-dialog/collection-dialog.component.html |  2 +-
 .../vault/individual-vault/vault-items.component.html  | 10 ++++------
 .../dialog/simple-dialog/simple-dialog.component.html  |  4 +++-
 libs/components/src/menu/menu-trigger-for.directive.ts |  2 +-
 libs/components/src/menu/menu.component.html           |  1 -
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/core/web-platform-utils.service.ts b/apps/web/src/app/core/web-platform-utils.service.ts
index e2271f713b3..7f693200bc7 100644
--- a/apps/web/src/app/core/web-platform-utils.service.ts
+++ b/apps/web/src/app/core/web-platform-utils.service.ts
@@ -184,6 +184,7 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
       showConfirmButton: true,
       confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
       target: target != null ? target : "body",
+      onOpen: () => Swal.getConfirmButton().focus(),
     });
 
     if (bootstrapModal != null) {
diff --git a/apps/web/src/app/organizations/manage/group-add-edit.component.html b/apps/web/src/app/organizations/manage/group-add-edit.component.html
index c1d45cbadf6..197dde56607 100644
--- a/apps/web/src/app/organizations/manage/group-add-edit.component.html
+++ b/apps/web/src/app/organizations/manage/group-add-edit.component.html
@@ -20,7 +20,7 @@
         <bit-tab label="{{ 'groupInfo' | i18n }}">
           <bit-form-field>
             <bit-label>{{ "name" | i18n }}</bit-label>
-            <input bitInput type="text" formControlName="name" />
+            <input bitInput appAutofocus type="text" formControlName="name" />
             <bit-hint>{{ "characterMaximum" | i18n: 100 }}</bit-hint>
           </bit-form-field>
           <bit-form-field>
diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html
index 03c061b6801..8fd96a33a48 100644
--- a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html
+++ b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html
@@ -19,7 +19,7 @@
         <bit-tab label="{{ 'collectionInfo' | i18n }}">
           <bit-form-field>
             <bit-label>{{ "name" | i18n }}</bit-label>
-            <input bitInput formControlName="name" />
+            <input bitInput appAutofocus formControlName="name" />
           </bit-form-field>
 
           <bit-form-field>
diff --git a/apps/web/src/vault/individual-vault/vault-items.component.html b/apps/web/src/vault/individual-vault/vault-items.component.html
index 1292c957002..39e8af4f1b8 100644
--- a/apps/web/src/vault/individual-vault/vault-items.component.html
+++ b/apps/web/src/vault/individual-vault/vault-items.component.html
@@ -43,8 +43,7 @@
           <bit-menu #headerMenu>
             <ng-container>
               <button
-                class="dropdown-item"
-                appStopClick
+                bitMenuItem
                 (click)="bulkMove()"
                 *ngIf="!activeFilter.isDeleted && !organization"
               >
@@ -52,19 +51,18 @@
                 {{ "moveSelected" | i18n }}
               </button>
               <button
-                class="dropdown-item"
-                appStopClick
+                bitMenuItem
                 (click)="bulkShare()"
                 *ngIf="!activeFilter.isDeleted && !organization"
               >
                 <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
                 {{ "moveSelectedToOrg" | i18n }}
               </button>
-              <button class="dropdown-item" (click)="bulkRestore()" *ngIf="activeFilter.isDeleted">
+              <button bitMenuItem (click)="bulkRestore()" *ngIf="activeFilter.isDeleted">
                 <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                 {{ "restoreSelected" | i18n }}
               </button>
-              <button class="dropdown-item text-danger" (click)="bulkDelete()">
+              <button bitMenuItem class="tw-text-danger" (click)="bulkDelete()">
                 <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{
                   (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 0093e5bd73b..89dccd4f904 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -3,7 +3,9 @@
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
-    <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content>
+    <ng-template *ngIf="hasIcon; else elseBlock">
+      <ng-content select="[bit-dialog-icon]"></ng-content>
+    </ng-template>
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>
diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index e270fe10fcb..06f11a03b3f 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -82,7 +82,7 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.overlayRef.attach(templatePortal);
 
     this.closedEventsSub = this.getClosedEvents().subscribe((event: KeyboardEvent | undefined) => {
-      if (event?.key === "Tab") {
+      if (["Tab", "Escape"].includes(event?.key)) {
         // Required to ensure tab order resumes correctly
         this.elementRef.nativeElement.focus();
       }
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index 15f78351a30..f254fe5826c 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -5,7 +5,6 @@
     [attr.role]="ariaRole"
     [attr.aria-label]="ariaLabel"
     cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
   >
     <ng-content></ng-content>
   </div>