From c8bae3e4fe4bd785ed27fd76553134dcc1933ba5 Mon Sep 17 00:00:00 2001
From: Manuel <moeri@puzzle.ch>
Date: Mon, 21 Oct 2024 15:27:58 +0200
Subject: [PATCH] Fix various semantic tags

---
 frontend/package.json                         |   2 +-
 .../action-plan/action-plan.component.html    |   8 +-
 .../application-banner.component.html         |   1 -
 .../check-in-history-dialog.component.html    |   4 +-
 .../check-in-form-metric.component.html       |  28 +--
 .../check-in-form-ordinal.component.html      |  11 +-
 .../check-in-form.component.html              |   4 +-
 .../key-result-form.component.html            |   2 +-
 .../keyresult-dialog.component.html           |   4 +-
 .../keyresult-type.component.html             | 168 +++++++++---------
 .../keyresult/keyresult.component.html        |  18 +-
 .../objective/objective.component.html        |   4 +-
 12 files changed, 125 insertions(+), 129 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 1bbcd384ff..023c5f5bad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0",
+    "start": "ng serve ",
     "build": "ng build",
     "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",
diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
index b056643283..4239b49ead 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.html
+++ b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column gap-2 col-12">
+<section class="d-flex flex-column gap-2 col-12">
   <label for="actionlist" class="text-black">Action Plan (optional)</label>
   <div
     cdkDropList
@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <section class="add-action-button">
+  <div class="add-action-button">
     <button
       mat-button
       color="primary"
@@ -60,5 +60,5 @@
         Weitere Action hinzufügen
       </span>
     </button>
-  </section>
-</div>
+  </div>
+</section>
diff --git a/frontend/src/app/components/application-banner/application-banner.component.html b/frontend/src/app/components/application-banner/application-banner.component.html
index 08be2ac67b..fd59295d0d 100644
--- a/frontend/src/app/components/application-banner/application-banner.component.html
+++ b/frontend/src/app/components/application-banner/application-banner.component.html
@@ -1,5 +1,4 @@
 <div id="okrBanner" #okrBanner>
-  <!-- Possibly cleanup a few div's here? -->
   <div class="d-flex flex-row">
     <div [ngClass]="isMobileDevice() ? 'filters' : 'none'" class="w-100 h-100 m-0 d-flex filters" slot="content">
       <section class="d-none d-md-flex">
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
index 45f8a39c78..4224e87ffa 100644
--- 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
@@ -7,7 +7,7 @@
     <ng-container
       *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory; else spinner"
     >
-      <div
+      <section
         *ngFor="let checkIn of checkInHistory; index as i"
         class="d-flex flex-column dialog-form-fields p-2 check-in-box"
       >
@@ -47,7 +47,7 @@
           <span class="label-width"><i>Massnahmen: </i></span>
           <span class="value-width linebreak">{{ checkIn.initiatives }}</span>
         </div>
-      </div>
+      </section>
     </ng-container>
   </div>
   <button class="close-button" mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
index 45d9ce03ec..eb40dc05ae 100644
--- a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -1,27 +1,27 @@
 <div class="input-style gap-2 col-12">
-  <div class="d-flex flex-row flex-wrap gap-between">
+  <div class="d-flex flex-wrap gap-between">
     <div class="d-flex flex-column gap-2" id="new-value">
       <label class="text-black" for="value">Neuer Wert</label>
-      <div class="d-flex flex-row align-items-center">
-        <form [formGroup]="dialogForm">
-          <input
-            class="value-field"
-            [attr.data-testId]="'check-in-metric-value'"
-            [ngClass]="formInputCheck(dialogForm, 'value')"
-            formControlName="value"
-            id="value"
-          />
-        </form>
+      <form [formGroup]="dialogForm" class="d-flex align-items-center">
+        <input
+          class="value-field"
+          [attr.data-testId]="'check-in-metric-value'"
+          [ngClass]="formInputCheck(dialogForm, 'value')"
+          formControlName="value"
+          id="value"
+        />
         <span class="text-black unit-label">{{ generateUnitLabel() }}</span>
-      </div>
+      </form>
     </div>
+
     <div *ngIf="checkIn.value" class="d-flex flex-column gap-2" id="old-value">
       <label class="text-black">Letzter Wert</label>
-      <div class="value-field disabled-field d-flex justify-content-start text-black">
+      <p class="value-field disabled-field d-flex justify-content-start text-black">
         {{ checkIn.value }} {{ generateUnitLabel() }}
-      </div>
+      </p>
     </div>
   </div>
+
   <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'value')">
     <span>{{ getErrorMessage("MUST_BE_NUMBER", "Neuer Wert") }}</span>
   </mat-error>
diff --git a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
index 511f0222b1..d0f8829ca8 100644
--- a/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
+++ b/frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -4,22 +4,25 @@
     <mat-radio-group formControlName="value" class="d-flex flex-column gap-2">
       <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
         <div class="radio-text-container d-flex align-items-center p-3 text-black">
-          <b>Fail:&nbsp;&nbsp; </b>Commit / Target / Stretch noch nicht erreicht
+          <strong>Fail:&nbsp;</strong> Commit / Target / Stretch noch nicht erreicht
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'commit-radio'" value="{{ Zone.COMMIT }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3">
-          <p class="text-black"><b>Commit:&nbsp; </b> {{ keyResult.commitZone }}</p>
+          <span class="text-black"><strong>Commit:&nbsp;</strong>{{ keyResult.commitZone }}</span>
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'target-radio'" value="{{ Zone.TARGET }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3 w-100">
-          <p class="text-black"><b>Target:&nbsp; </b>{{ keyResult.targetZone }}</p>
+          <span class="text-black"><strong>Target:&nbsp;</strong>{{ keyResult.targetZone }}</span>
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'stretch-radio'" value="{{ Zone.STRETCH }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3">
-          <p class="text-black"><b>Stretch:&nbsp; </b>{{ keyResult.stretchZone }}</p>
+          <span class="text-black"><strong>Stretch:&nbsp;</strong>{{ keyResult.stretchZone }}</span>
         </div>
       </mat-radio-button>
     </mat-radio-group>
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
index 61916e9b7f..4820ffa896 100644
--- 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
@@ -14,7 +14,7 @@
       </div>
       <div *ngIf="getActions()?.length != 0" class="input-style gap-1">
         <label class="text-black mb-1">Action Plan:</label>
-        <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
+        <div *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
           <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
           <span
             class="action-list-item w-100 break-word"
@@ -22,7 +22,7 @@
           >
             {{ action.action }}
           </span>
-        </span>
+        </div>
       </div>
 
       <div class="input-style gap-2 col-12">
diff --git a/frontend/src/app/components/key-result-form/key-result-form.component.html b/frontend/src/app/components/key-result-form/key-result-form.component.html
index 9816b6710d..8839c7bcd7 100644
--- a/frontend/src/app/components/key-result-form/key-result-form.component.html
+++ b/frontend/src/app/components/key-result-form/key-result-form.component.html
@@ -23,7 +23,7 @@
     </div>
 
     <div class="input-style gap-2 col-12">
-      <label class="text-black" for="owner">Owner</label>
+      <label class="text-black">Owner</label>
       <input
         (keydown.enter)="$event.preventDefault()"
         [ngClass]="invalidOwner() ? 'dialog-form-field-error' : 'dialog-form-field'"
diff --git a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
index 4395773e0c..ad403a6d36 100644
--- a/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
+++ b/frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
@@ -1,8 +1,8 @@
-<section mat-dialog-title>
+<div mat-dialog-title>
   <app-dialog-header
     [dialogTitle]="data.keyResult ? 'Key Result bearbeiten' : 'Key Result erfassen'"
   ></app-dialog-header>
-</section>
+</div>
 
 <mat-dialog-content>
   <div class="d-flex flex-column scroll-shadows" tabindex="-1">
diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.html b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
index ee5c40bd9c..a45700df22 100644
--- a/frontend/src/app/components/keyresult-type/keyresult-type.component.html
+++ b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
@@ -32,53 +32,51 @@
   <form [formGroup]="keyResultForm" class="gap-1">
     <div class="d-flex flex-column flex-wrap container p-0">
       <div class="d-flex flex-row">
-        <div class="flex-fill">
-          <div class="input-alignments">
-            <div class="input-style gap-2">
-              <label class="text-black" for="unit">Einheit</label>
-              <select
-                class="unit-dropdown bg-white menu-option"
-                [ngClass]="formInputCheck(keyResultForm, 'unit')"
-                formControlName="unit"
-                id="unit"
-                [attr.data-testId]="'unit'"
-              >
-                <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
-                  {{ "UNIT." + unit.value | translate }}
-                </option>
-              </select>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
-                <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
-              </mat-error>
-            </div>
+        <div class="flex-fill input-alignments">
+          <div class="input-style gap-2">
+            <label class="text-black" for="unit">Einheit</label>
+            <select
+              class="unit-dropdown bg-white menu-option"
+              [ngClass]="formInputCheck(keyResultForm, 'unit')"
+              formControlName="unit"
+              id="unit"
+              [attr.data-testId]="'unit'"
+            >
+              <option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
+                {{ "UNIT." + unit.value | translate }}
+              </option>
+            </select>
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
+              <span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
+            </mat-error>
+          </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="baseline">Baseline</label>
-              <input
-                [attr.data-testId]="'baseline'"
-                class="metric-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'baseline')"
-                formControlName="baseline"
-                id="baseline"
-              />
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
-                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
-              </mat-error>
-            </div>
+          <div class="input-style gap-2">
+            <label class="text-black" for="baseline">Baseline</label>
+            <input
+              [attr.data-testId]="'baseline'"
+              class="metric-fields"
+              [ngClass]="formInputCheck(keyResultForm, 'baseline')"
+              formControlName="baseline"
+              id="baseline"
+            />
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
+              <span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
+            </mat-error>
+          </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="stretchGoal">Stretch Goal</label>
-              <input
-                [attr.data-testId]="'stretchGoal'"
-                class="metric-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
-                formControlName="stretchGoal"
-                id="stretchGoal"
-              />
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
-                <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
-              </mat-error>
-            </div>
+          <div class="input-style gap-2">
+            <label class="text-black" for="stretchGoal">Stretch Goal</label>
+            <input
+              [attr.data-testId]="'stretchGoal'"
+              class="metric-fields"
+              [ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
+              formControlName="stretchGoal"
+              id="stretchGoal"
+            />
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
+              <span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
+            </mat-error>
           </div>
         </div>
       </div>
@@ -90,49 +88,47 @@
   <form [formGroup]="keyResultForm" class="gap-1">
     <div class="d-flex flex-column flex-wrap container p-0">
       <div class="d-flex flex-row">
-        <div class="flex-fill">
-          <div class="input-alignments">
-            <div class="input-style gap-2">
-              <label class="text-black" for="commitZone">Commit Zone</label>
-              <textarea
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'commitZone')"
-                formControlName="commitZone"
-                id="commitZone"
-                [attr.data-testId]="'commitZone'"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
+        <div class="flex-fill input-alignments">
+          <div class="input-style gap-2">
+            <label class="text-black" for="commitZone">Commit Zone</label>
+            <textarea
+              class="ordinal-input-fields"
+              [ngClass]="formInputCheck(keyResultForm, 'commitZone')"
+              formControlName="commitZone"
+              id="commitZone"
+              [attr.data-testId]="'commitZone'"
+            ></textarea>
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
+              <span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
+            </mat-error>
+          </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="targetZone">Target Zone</label>
-              <textarea
-                [attr.data-testId]="'targetZone'"
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'targetZone')"
-                formControlName="targetZone"
-                id="targetZone"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
+          <div class="input-style gap-2">
+            <label class="text-black" for="targetZone">Target Zone</label>
+            <textarea
+              [attr.data-testId]="'targetZone'"
+              class="ordinal-input-fields"
+              [ngClass]="formInputCheck(keyResultForm, 'targetZone')"
+              formControlName="targetZone"
+              id="targetZone"
+            ></textarea>
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
+              <span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
+            </mat-error>
+          </div>
 
-            <div class="input-style gap-2">
-              <label class="text-black" for="stretchZone">Stretch Goal</label>
-              <textarea
-                [attr.data-testId]="'stretchZone'"
-                class="ordinal-input-fields"
-                [ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
-                formControlName="stretchZone"
-                id="stretchZone"
-              ></textarea>
-              <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
-                <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
-              </mat-error>
-            </div>
+          <div class="input-style gap-2">
+            <label class="text-black" for="stretchZone">Stretch Goal</label>
+            <textarea
+              [attr.data-testId]="'stretchZone'"
+              class="ordinal-input-fields"
+              [ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
+              formControlName="stretchZone"
+              id="stretchZone"
+            ></textarea>
+            <mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
+              <span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
+            </mat-error>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
index a8e6dc93b8..6d1a96ffe2 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.html
+++ b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -8,18 +8,16 @@
   <h3 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-1">
-    <div class="d-flex justify-content-center">
-      <span class="d-flex align-items-center flex-wrap keyResult-overview-attribute">
-        <span class="me-1 text-nowrap me-2">Letztes Check-in</span>
-        <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn != null">{{
-          keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT
-        }}</span>
-        <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn == null">Keines</span>
-      </span>
+    <div class="d-flex justify-content-center align-items-center flex-wrap keyResult-overview-attribute">
+      <span class="me-1 text-nowrap me-2">Letztes Check-in</span>
+      <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn != null">{{
+        keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT
+      }}</span>
+      <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn == null">Keines</span>
     </div>
 
-    <div class="d-flex align-items-center flex-wrap justify-content-end">
-      <p class="keyResult-overview-attribute">Confidence</p>
+    <div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
+      <span>Confidence</span>
       <app-confidence
         [edit]="false"
         [isDetail]="false"
diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html
index 48fd01a194..725bd25687 100644
--- a/frontend/src/app/components/objective/objective.component.html
+++ b/frontend/src/app/components/objective/objective.component.html
@@ -8,7 +8,7 @@
 >
   <div class="row mx-1">
     <section class="d-flex mb-3 mt-3 justify-content-between pe-0">
-      <section class="d-flex gap-2 align-items-start fit-content objective-title">
+      <div class="d-flex gap-2 align-items-start fit-content objective-title">
         <img
           (click)="$event.stopPropagation()"
           [attr.data-testId]="'objective-state'"
@@ -19,7 +19,7 @@
           matTooltipPosition="above"
         />
         <h2 class="title fit-content">{{ objective.title }}</h2>
-      </section>
+      </div>
       <button
         #menuButton
         *ngIf="isWritable"