remove useless tabindex

puzzle · Oct 22, 2024 · 7e9a88f · 7e9a88f
1 parent a43a92e
commit 7e9a88f
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 151 deletions.
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -1,9 +1,6 @@
 <div class="ps-4 pt-3 pe-4">
   <app-dialog-header [dialogTitle]="'Check-in History'"></app-dialog-header>
-  <div
-    class="d-flex justify-content-start flex-column gap-4 text-black overflow-y-scroll text-break mt-3"
-    tabindex="-1"
-  >
+  <div class="d-flex justify-content-start flex-column gap-4 text-black overflow-y-scroll text-break mt-3">
     <ng-container
       *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory; else spinner"
     >

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -4,10 +4,7 @@
 </section>
 
 <mat-dialog-content>
-  <div
-    class="d-flex flex-column scroll-shadows overflow-x-hidden p-2 ps-0 justify-content-between align-items-center"
-    tabindex="-1"
-  >
+  <div class="d-flex flex-column scroll-shadows overflow-x-hidden p-2 ps-0 justify-content-between align-items-center">
     <form [formGroup]="dialogForm" class="d-flex flex-column flex-wrap container p-0">
       <div class="d-flex mb-3 gap-2 col-12 flex-column">
         <p class="fs-6 text-black">Key Result</p>

diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
@@ -5,7 +5,7 @@
 </section>
 
 <mat-dialog-content>
-  <div class="d-flex flex-column scroll-shadows" tabindex="-1">
+  <div class="d-flex flex-column scroll-shadows">
     <app-key-result-form
       class="keyresult-form"
       [keyResultForm]="keyResultForm"

diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -20,63 +20,61 @@
 </section>
 
 <mat-dialog-content>
-  <div tabindex="-1">
-    <div class="d-flex justify-content-between align-items-center pt-2 ps-0">
-      <form [formGroup]="objectiveForm" class="d-flex flex-column flex-wrap container-fluid p-0">
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="title">Titel</label>
-          <textarea
-            [attr.data-testId]="'title'"
-            class="big-dialog-form-field"
-            [ngClass]="formInputCheck(objectiveForm, 'title')"
-            formControlName="title"
-            id="title"
-          ></textarea>
-          <mat-error *ngIf="hasFormFieldErrors(objectiveForm, 'title')">
-            <span>{{ getErrorMessage("SIZE_BETWEEN", "Titel", 2, 250) }}</span>
-          </mat-error>
-        </div>
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="title">Beschreibung (optional)</label>
-          <textarea
-            [attr.data-testId]="'description'"
-            formControlName="description"
-            class="big-dialog-form-field"
-            [ngClass]="formInputCheck(objectiveForm, 'description')"
-          ></textarea>
-          <mat-error *ngIf="hasFormFieldErrors(objectiveForm, 'description')">
-            <span>{{ getErrorMessage("MAX_VALUE", "Beschreibung", 4096, null) }}</span>
-          </mat-error>
-        </div>
+  <div class="d-flex justify-content-between align-items-center pt-2 ps-0">
+    <form [formGroup]="objectiveForm" class="d-flex flex-column flex-wrap container-fluid p-0">
+      <div class="input-style gap-2 col-12">
+        <label class="text-black" for="title">Titel</label>
+        <textarea
+          [attr.data-testId]="'title'"
+          class="big-dialog-form-field"
+          [ngClass]="formInputCheck(objectiveForm, 'title')"
+          formControlName="title"
+          id="title"
+        ></textarea>
+        <mat-error *ngIf="hasFormFieldErrors(objectiveForm, 'title')">
+          <span>{{ getErrorMessage("SIZE_BETWEEN", "Titel", 2, 250) }}</span>
+        </mat-error>
+      </div>
+      <div class="input-style gap-2 col-12">
+        <label class="text-black" for="title">Beschreibung (optional)</label>
+        <textarea
+          [attr.data-testId]="'description'"
+          formControlName="description"
+          class="big-dialog-form-field"
+          [ngClass]="formInputCheck(objectiveForm, 'description')"
+        ></textarea>
+        <mat-error *ngIf="hasFormFieldErrors(objectiveForm, 'description')">
+          <span>{{ getErrorMessage("MAX_VALUE", "Beschreibung", 4096, null) }}</span>
+        </mat-error>
+      </div>
 
-        <div class="d-flex row mb-1">
-          <div class="d-flex flex-column gap-2 col-6">
-            <label class="text-black" for="quarter">Quartal</label>
-            <select
-              class="custom-select bg-white w-100"
-              formControlName="quarter"
-              id="quarter"
-              [attr.data-testId]="'quarterSelect'"
-            >
-              <ng-container *ngFor="let quarter of quarters$ | async; let i = index">
-                <option *ngIf="allowedOption(quarter)" [value]="quarter.id">
-                  {{ getQuarterLabel(quarter, i) }}
-                </option>
-              </ng-container>
-            </select>
-          </div>
-          <mat-checkbox
-            [attr.data-testId]="'keyResult-checkbox'"
-            class="d-flex align-items-center custom-text-wrap col-5 col-6 text-black add-keyresult"
-            color="primary"
-            formControlName="createKeyResults"
-            *ngIf="!data.objective.objectiveId"
+      <div class="d-flex row mb-1">
+        <div class="d-flex flex-column gap-2 col-6">
+          <label class="text-black" for="quarter">Quartal</label>
+          <select
+            class="custom-select bg-white w-100"
+            formControlName="quarter"
+            id="quarter"
+            [attr.data-testId]="'quarterSelect'"
           >
-            <p class="add-keyresult-text">Key Results im Anschluss erfassen</p>
-          </mat-checkbox>
+            <ng-container *ngFor="let quarter of quarters$ | async; let i = index">
+              <option *ngIf="allowedOption(quarter)" [value]="quarter.id">
+                {{ getQuarterLabel(quarter, i) }}
+              </option>
+            </ng-container>
+          </select>
         </div>
-      </form>
-    </div>
+        <mat-checkbox
+          [attr.data-testId]="'keyResult-checkbox'"
+          class="d-flex align-items-center custom-text-wrap col-5 col-6 text-black add-keyresult"
+          color="primary"
+          formControlName="createKeyResults"
+          *ngIf="!data.objective.objectiveId"
+        >
+          <p class="add-keyresult-text">Key Results im Anschluss erfassen</p>
+        </mat-checkbox>
+      </div>
+    </form>
   </div>
 </mat-dialog-content>
 

diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html
@@ -3,25 +3,23 @@
 </section>
 
 <mat-dialog-content>
-  <div tabindex="-1">
-    <div class="w-100 d-flex justify-content-between align-items-center">
-      <form [formGroup]="teamForm" class="d-flex flex-column flex-wrap container p-0">
-        <div class="input-style gap-2 col-12">
-          <label class="text-black" for="name">Teamname</label>
-          <input
-            matInput
-            [attr.data-testId]="'add-team-name'"
-            class="dialog-form-field"
-            [ngClass]="formInputCheck(teamForm, 'name')"
-            formControlName="name"
-            id="name"
-          />
-          <mat-error *ngIf="hasFormFieldErrors(teamForm, 'name')">
-            <span>{{ getErrorMessage("SIZE_BETWEEN", "Teamname", 2, 250) }}</span>
-          </mat-error>
-        </div>
-      </form>
-    </div>
+  <div class="w-100 d-flex justify-content-between align-items-center">
+    <form [formGroup]="teamForm" class="d-flex flex-column flex-wrap container p-0">
+      <div class="input-style gap-2 col-12">
+        <label class="text-black" for="name">Teamname</label>
+        <input
+          matInput
+          [attr.data-testId]="'add-team-name'"
+          class="dialog-form-field"
+          [ngClass]="formInputCheck(teamForm, 'name')"
+          formControlName="name"
+          id="name"
+        />
+        <mat-error *ngIf="hasFormFieldErrors(teamForm, 'name')">
+          <span>{{ getErrorMessage("SIZE_BETWEEN", "Teamname", 2, 250) }}</span>
+        </mat-error>
+      </div>
+    </form>
   </div>
 </mat-dialog-content>
 

diff --git a/...rc/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html b/...rc/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html
@@ -3,55 +3,53 @@
 </section>
 
 <mat-dialog-content>
-  <div tabindex="-1">
-    <div class="w-100 d-flex justify-content-between align-items-center">
-      <form class="example-form w-100">
-        <mat-form-field
-          class="w-100 bg-white header-form-field"
-          ngDefaultControl
-          subscriptSizing="dynamic"
-          appearance="outline"
+  <div class="w-100 d-flex justify-content-between align-items-center">
+    <form class="example-form w-100">
+      <mat-form-field
+        class="w-100 bg-white header-form-field"
+        ngDefaultControl
+        subscriptSizing="dynamic"
+        appearance="outline"
+      >
+        <input
+          type="text"
+          placeholder="Nach Name oder E-Mail suchen"
+          aria-label="Nach Name oder E-Mail suchen"
+          matInput
+          [formControl]="search"
+          [matAutocomplete]="auto"
+          [attr.data-testId]="'search-member-to-add'"
+        />
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          (optionSelected)="selectUser($event.option.value)"
+          [displayWith]="getDisplayValue"
         >
-          <input
-            type="text"
-            placeholder="Nach Name oder E-Mail suchen"
-            aria-label="Nach Name oder E-Mail suchen"
-            matInput
-            [formControl]="search"
-            [matAutocomplete]="auto"
-            [attr.data-testId]="'search-member-to-add'"
-          />
-          <mat-autocomplete
-            #auto="matAutocomplete"
-            (optionSelected)="selectUser($event.option.value)"
-            [displayWith]="getDisplayValue"
-          >
-            <mat-option *ngFor="let user of usersForSelection$ | async" [value]="user">
-              {{ getDisplayValue(user) }}
-            </mat-option>
-          </mat-autocomplete>
-        </mat-form-field>
-      </form>
-    </div>
-    <div class="w-100" *ngIf="dataSource">
-      <table mat-table [dataSource]="dataSource" class="okr-table" id="all-member-table">
-        <ng-container matColumnDef="name">
-          <td mat-cell *matCellDef="let element">{{ getDisplayValue(element) }}</td>
-        </ng-container>
-        <ng-container matColumnDef="delete">
-          <td mat-cell *matCellDef="let element">
-            <div class="d-flex">
-              <app-puzzle-icon-button
-                (click)="remove(element)"
-                icon="delete-icon.svg"
-                alt="Remove User Icon"
-              ></app-puzzle-icon-button>
-            </div>
-          </td>
-        </ng-container>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-      </table>
-    </div>
+          <mat-option *ngFor="let user of usersForSelection$ | async" [value]="user">
+            {{ getDisplayValue(user) }}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </form>
+  </div>
+  <div class="w-100" *ngIf="dataSource">
+    <table mat-table [dataSource]="dataSource" class="okr-table" id="all-member-table">
+      <ng-container matColumnDef="name">
+        <td mat-cell *matCellDef="let element">{{ getDisplayValue(element) }}</td>
+      </ng-container>
+      <ng-container matColumnDef="delete">
+        <td mat-cell *matCellDef="let element">
+          <div class="d-flex">
+            <app-puzzle-icon-button
+              (click)="remove(element)"
+              icon="delete-icon.svg"
+              alt="Remove User Icon"
+            ></app-puzzle-icon-button>
+          </div>
+        </td>
+      </ng-container>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
   </div>
 </mat-dialog-content>
 

diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
@@ -6,28 +6,26 @@
   </div>
 </section>
 <mat-dialog-content>
-  <div tabindex="-1">
-    <form>
-      @for (userFormGroup of form.controls; track $index) {
-        <div class="w-100 d-flex justify-content-between align-items-center pe-4">
-          <app-new-user
-            (removeUser)="removeUser($index)"
-            [index]="$index"
-            [userFormGroup]="userFormGroup"
-            [triedToSubmit]="triedToSubmit"
-          ></app-new-user>
-        </div>
-      }
-      <div class="w-100 d-flex justify-content-start">
-        <button (click)="addUser()" class="px-0 mb-3 pe-2 align-new-icon" color="primary" mat-button>
-          <span class="d-flex align-items-center fw-bold add-text">
-            <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
-            Weiterer Member hinzufügen
-          </span>
-        </button>
+  <form>
+    @for (userFormGroup of form.controls; track $index) {
+      <div class="w-100 d-flex justify-content-between align-items-center pe-4">
+        <app-new-user
+          (removeUser)="removeUser($index)"
+          [index]="$index"
+          [userFormGroup]="userFormGroup"
+          [triedToSubmit]="triedToSubmit"
+        ></app-new-user>
       </div>
-    </form>
-  </div>
+    }
+    <div class="w-100 d-flex justify-content-start">
+      <button (click)="addUser()" class="px-0 mb-3 pe-2 align-new-icon" color="primary" mat-button>
+        <span class="d-flex align-items-center fw-bold add-text">
+          <img alt="Add User button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
+          Weiterer Member hinzufügen
+        </span>
+      </button>
+    </div>
+  </form>
 </mat-dialog-content>
 <mat-dialog-actions>
   <div class="d-flex justify-content-between p-0 mt-2" mat-dialog-actions>