feat : add focus in all component

- need to check focus on all popup to focus last element
- need to navigate in popup

src/app/app.component.html

@@ -95,9 +95,11 @@
     </div>
 
     <main class="content mat-typography"
+          cdkTrapFocus
           [dlcmSpinner]="!(isApplicationInitializedObs | async)"
     >
-      <div class="router-outlet-wrapper">
+      <div class="router-outlet-wrapper" [solidifyFocusFirstElement]="true"
+      >
         <router-outlet></router-outlet>
       </div>
     </main>

src/app/components/dialogs/cart/cart.dialog.html

+<lib-empty-container cdkTrapFocus
+                     [solidifyFocusFirstElement]="true"
+ >
 <h1 mat-dialog-title>{{'app.cart.title' | translate}}</h1>
 <div mat-dialog-content
      [dlcmSpinner]="isLoadingArchiveObs | async"
@@ -13,6 +16,8 @@
                   class="trash"
                   [matTooltip]="'app.cart.button.placeholder.remove' | translate"
                   [matTooltipPosition]="'right'"
+                  solidifyShortCuts
+                  (onEnter)="remove(archive.resId)"
                   (click)="remove(archive.resId)"
           >
             <mat-icon>delete</mat-icon>
@@ -32,12 +37,14 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
   >{{'app.cart.button.close' | translate}}</button>
   <button mat-flat-button
           color="primary"
           [dlcmButtonSpinner]="(isLoadingCartObs | async)"
           [disabled]="!(listArchiveObs | async) || (listArchiveObs | async).length === 0"
+          solidifyShortCuts
+          (onEnter)="submit()"
           (click)="submit()"
   >{{'app.cart.button.submit' | translate}}</button>
 </div>
+</lib-empty-container>

src/app/components/dialogs/token/token.dialog.html

@@ -6,6 +6,8 @@
     >
       <div>{{value}}</div>
       <button mat-icon-button
+              solidifyShortCuts
+              (onEnter)="copy()"
               (click)="copy()"
               [matTooltip]="'app.token.copyToClipboard' | translate"
               [matTooltipPosition]="'above'"

src/app/components/dialogs/update-version/update-version.dialog.html

@@ -4,10 +4,11 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
   >{{'app.updateVersion.button.updateAfter' | translate}}</button>
   <button mat-flat-button
           color="primary"
+          solidifyShortCuts
+          (onEnter)="update()"
           (click)="update()"
   >{{'app.updateVersion.button.updateNow' | translate}}</button>
 </div>

src/app/components/dialogs/user/user.dialog.html

@@ -19,10 +19,11 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
   >{{'app.user.button.close' | translate}}</button>
   <button mat-flat-button
           color="primary"
+          solidifyShortCuts
+          (onEnter)="formPresentational?.onSubmit()"
           (click)="formPresentational?.onSubmit()"
           [disabled]="!formPresentational?.form.valid || !formPresentational?.form.dirty"
   >{{'app.user.button.submit' | translate}}

src/app/components/presentationals/avatar/avatar.presentational.html

@@ -7,12 +7,16 @@
 <mat-menu #menu="matMenu">
   <button mat-menu-item
           [disabled]="!user"
+          solidifyShortCuts
+          (onEnter)="profileInfo()"
           (click)="profileInfo()"
   >
     <mat-icon>account_circle</mat-icon>
     <span>{{'app.toolbar.profileInfo' | translate}}</span>
   </button>
   <button mat-menu-item
+          solidifyShortCuts
+          (onEnter)="displayToken()"
           (click)="displayToken()"
   >
     <mat-icon>vpn_key</mat-icon>

src/app/components/presentationals/page-not-found/page-not-found.presentational.html

@@ -3,6 +3,8 @@
 <button type="button"
         mat-button
         color="primary"
+        solidifyShortCuts
+        (onEnter)="backToHome()"
         (click)="backToHome()"
 >
   <mat-icon>home</mat-icon>

src/app/features/admin/components/routables/admin-home/admin-home.routable.html

 <h1>{{'admin.home.title' | translate}}</h1>
 
+<lib-empty-container [solidifyFocusFirstElement]="true">
+
 <div class="cards-container">
   <mat-card *ngFor="let resource of getAdminResources()"
             class="card"
+            [tabIndex]="0"
+            solidifyShortCuts
+            (onEnter)="navigate(resource.path)"
             (click)="navigate(resource.path)"
   >
     <mat-card-header class="card-header">
@@ -16,3 +21,5 @@
     </mat-card-header>
   </mat-card>
 </div>
+
+</lib-empty-container>

src/app/features/admin/components/routables/admin-home/admin-home.routable.ts

 import {
   ChangeDetectionStrategy,
-  Component,
+  Component, ElementRef, QueryList, ViewChildren,
 } from "@angular/core";
+import {MatCard} from "@angular/material";
 import {SharedAbstractPresentational} from "@app/shared/components/presentationals/shared-abstract/shared-abstract.presentational";
 import {ApplicationRolePermissionEnum} from "@app/shared/enums/application-role-permission.enum";
 import {ApplicationRoleEnum} from "@app/shared/enums/application-role.enum";
@@ -22,6 +23,13 @@ export class AdminHomeRoutable extends SharedAbstractPresentational {
 
   userRolesObs: ApplicationRoleEnum[];
 
+  @ViewChildren("cardElement", {read: ElementRef})
+  cardElement: QueryList<ElementRef>
+
+ // onChangeCard(indexOfelement: number): void {
+  //  this.cardElement.
+  //}
+
   adminResources: AdminResource[] = [
     {
       avatarIcon: "building",

src/app/features/admin/dissemination-policy/components/presentationals/admin-dissemination-policy-form/admin-dissemination-policy-form.presentational.html

@@ -48,6 +48,7 @@
     <button *ngIf="!readonly"
             mat-flat-button
             color="primary"
+            (keydown.enter)="onSubmit()"
             type="submit"
             [disabled]="!form.valid || !form.dirty"
     >

src/app/features/admin/dissemination-policy/components/routables/admin-dissemination-policy-create/admin-dissemination-policy-create.routable.html

@@ -4,6 +4,9 @@
 </dlcm-button-toolbar-detail>
 
 <div class="wrapper"
+     solidifyShortCuts
+     (onEscape)="backToList()"
+     [solidifyFocusFirstElement]="true"
      [dlcmSpinner]="isLoadingWithDependencyObs | async"
 >
   <dlcm-admin-dissemination-policy-form #formPresentational

src/app/features/admin/dissemination-policy/components/routables/admin-dissemination-policy-detail-edit/admin-dissemination-policy-detail-edit.routable.html

+<lib-empty-container
+    solidifyShortCuts
+    (onEscape)="backToList()"
+    [solidifyFocusFirstElement]="true">
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
+  <dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
+                              [currentModel]="currentObs | async"
+                              (editChange)="edit()"
+                              (deleteChange)="delete()"
+                              (backToDetailChange)="backToDetail()"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
-                            [currentModel]="currentObs | async"
-                            (editChange)="edit()"
-                            (deleteChange)="delete()"
-                            (backToDetailChange)="backToDetail()"
-                            (backToListChange)="backToList()"
->
-</dlcm-button-toolbar-detail>
-
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-dissemination-policy-form #formPresentational
-                                        *ngIf="isReadyToBeDisplayedObs | async"
-                                        [model]="currentObs| async"
-                                        [readonly]="!isEdit"
-                                        (submitChange)="update($event)"
-                                        (dirtyChange)="updateCanDeactivate($event)"
-  ></dlcm-admin-dissemination-policy-form>
-</div>
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
+  >
+    <dlcm-admin-dissemination-policy-form #formPresentational
+                                          *ngIf="isReadyToBeDisplayedObs | async"
+                                          [model]="currentObs| async"
+                                          [readonly]="!isEdit"
+                                          (submitChange)="update($event)"
+                                          (dirtyChange)="updateCanDeactivate($event)"
+    ></dlcm-admin-dissemination-policy-form>
+  </div>
+</lib-empty-container>

src/app/features/admin/funding-agencies/components/presentationals/admin-funding-agencies-form/admin-funding-agencies-form.presentational.html

@@ -56,6 +56,7 @@
             mat-flat-button
             color="primary"
             type="submit"
+            (keydown.enter)="onSubmit()"
             [disabled]="!form.valid || !form.dirty"
     >
       {{'admin.funding-agencies.form.submit' | translate }}

src/app/features/admin/funding-agencies/components/routables/admin-funding-agencies-detail-edit/admin-funding-agencies-detail-edit.routable.html

+<lib-empty-container (keydown.escape)="isEdit ? backToDetail() : backToList()">
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
@@ -27,3 +28,4 @@
   </dlcm-admin-funding-agencies-form>
 
 </div>
+</lib-empty-container>

src/app/features/admin/institution/components/presentationals/admin-institution-form/admin-institution-form.presentational.html

@@ -6,6 +6,7 @@
     <mat-label>{{'admin.institution.form.name' | translate }}</mat-label>
     <input matInput
            [formControl]="fd"
+           autofocus
            [solidifyValidation]="errors"
            [required]="formValidationHelper.hasRequiredField(fd)"
            (blur)="checkAvailable(formDefinition.name, fd)"
@@ -37,6 +38,7 @@
             mat-flat-button
             color="primary"
             type="submit"
+            (keydown.enter)="onSubmit()"
             [disabled]="!form.valid || !form.dirty"
     >
       {{'admin.institution.form.submit' | translate }}

src/app/features/admin/institution/components/routables/admin-institution-create/admin-institution-create.routable.html

-<dlcm-button-toolbar-detail [mode]="'create'"
-                            (backToListChange)="backToList()"
+<lib-empty-container dlcmShortCuts
+                     [solidifyFocusFirstElement]="true"
+                     (onEscape)="backToList()"
 >
-</dlcm-button-toolbar-detail>
+  <dlcm-button-toolbar-detail [mode]="'create'"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-institution-form #formPresentational
-                               *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
-                               (submitChange)="create($event)"
-                               (checkAvailableChange)="checkAvailable($event)"
-                               (dirtyChange)="updateCanDeactivate($event)"
-  ></dlcm-admin-institution-form>
-</div>
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
+  >
+    <dlcm-admin-institution-form #formPresentational
+                                 *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
+                                 (submitChange)="create($event)"
+                                 (checkAvailableChange)="checkAvailable($event)"
+                                 (dirtyChange)="updateCanDeactivate($event)"
+    ></dlcm-admin-institution-form>
+  </div>
+</lib-empty-container>

src/app/features/admin/institution/components/routables/admin-institution-detail-edit/admin-institution-detail-edit.routable.html

+<lib-empty-container dlcmShortCuts
+                     [solidifyFocusFirstElement]="true"
+                     (onEscape)="isEdit ? backToList() : backToDetail()"
+>
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
@@ -23,6 +27,6 @@
   ></dlcm-admin-institution-form>
 
 </div>
-
+</lib-empty-container>
 
 

src/app/features/admin/language/components/dialogs/admin-language-create-edit/admin-language-create-edit.dialog.html

@@ -20,6 +20,8 @@
   <button mat-flat-button
           color="primary"
           [disabled]="formPresentational?.form?.invalid || formPresentational?.form?.pristine"
+          solidifyShortCuts
+          (onEnter)="confirm()"
           (click)="confirm()"
   >
     <ng-template [ngIf]="isCreateMode"

src/app/features/admin/license/components/presentationals/admin-license-form/admin-license-form.presentational.html

@@ -111,6 +111,7 @@
             mat-flat-button
             color="primary"
             type="submit"
+            (keydown.enter)="onSubmit()"
             [disabled]="!form.valid || !form.dirty"
     >
       {{'admin.license.form.submit' | translate }}

src/app/features/admin/license/components/routables/admin-license-create/admin-license-create.routable.html

+<lib-empty-container [solidifyFocusFirstElement]="true"
+                     solidifyShortCuts
+                     (onEscape)="backToList()"
+></lib-empty-container>
 <dlcm-button-toolbar-detail [mode]="'create'"
                             (backToListChange)="backToList()"
 >
@@ -7,6 +11,7 @@
      [dlcmSpinner]="isLoadingWithDependencyObs | async"
 >
   <dlcm-admin-license-form #formPresentational
+                           [solidifyFocusFirstElement]="true"
                            *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
                            (submitChange)="create($event)"
                            (checkAvailableChange)="checkAvailable($event)"