[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

@@ -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) {

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>

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>

apps/web/src/vault/individual-vault/vault-items.component.html

@@ -43,8 +43,7 @@
           <bit-menu #headerMenu>
             <ng-container>
               <button
-                class="dropdown-item"
+                bitMenuItem
-                appStopClick
                 (click)="bulkMove()"
                 *ngIf="!activeFilter.isDeleted && !organization"
               >
@@ -52,19 +51,18 @@
                 {{ "moveSelected" | i18n }}
               </button>
               <button
-                class="dropdown-item"
+                bitMenuItem
-                appStopClick
                 (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

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>

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();
       }

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>