From e180ee01c408006becf8f0b9b2d3d4163e09f05b Mon Sep 17 00:00:00 2001
From: Manuel <moeri@puzzle.ch>
Date: Wed, 30 Oct 2024 13:24:08 +0100
Subject: [PATCH] Resolve conversations and implement changes from talking with
 paco

---
 .../action-plan/action-plan.component.html    |  2 +-
 .../check-in-form-metric.component.html       |  6 +++---
 .../check-in-form-ordinal.component.html      |  2 +-
 .../check-in-form.component.html              | 10 ++++++----
 .../key-result-form.component.html            |  6 +++---
 .../keyresult-detail.component.html           | 20 +++++++++----------
 .../keyresult-type.component.html             | 12 +++++------
 .../keyresult/keyresult.component.html        |  6 +++---
 .../objective/objective.component.spec.ts     |  1 -
 .../custom/scoring/scoring.component.html     |  8 ++++----
 .../complete-dialog.component.html            |  4 ++--
 .../objective-form.component.html             |  6 +++---
 12 files changed, 42 insertions(+), 41 deletions(-)

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 2cc04bac89..ef1918fb33 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.html
+++ b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -1,5 +1,5 @@
 <section class="d-flex flex-column gap-2 col-12">
-  <h4 for="actionlist" class="text-black">Action Plan (optional)</h4>
+  <label class="text-black" for="actionlist">Action Plan (optional)</label>
   <div
     cdkDropList
     *ngIf="control?.getValue()"
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 4376c3c2ac..c1a7bee1cd 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,7 +1,7 @@
 <div class="input-style gap-2 col-12">
   <div class="d-flex flex-wrap gap-between">
     <div class="d-flex flex-column gap-2" id="new-value">
-      <h4 class="text-black" for="value">Neuer Wert</h4>
+      <label class="text-black" for="value">Neuer Wert</label>
       <form [formGroup]="dialogForm" class="d-flex align-items-center">
         <input
           class="value-field"
@@ -15,8 +15,8 @@ <h4 class="text-black" for="value">Neuer Wert</h4>
     </div>
 
     <div *ngIf="checkIn.value" class="d-flex flex-column gap-2" id="old-value" [attr.data-testId]="'old-checkin-value'">
-      <h4 class="text-black">Letzter Wert</h4>
-      <p class="value-field disabled-field d-flex justify-content-start text-black">
+      <label class="text-black" for="last-value">Letzter Wert</label>
+      <p class="value-field disabled-field d-flex justify-content-start text-black" id="last-value">
         {{ checkIn.value }} {{ generateUnitLabel() }}
       </p>
     </div>
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 7c1669c4d4..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
@@ -1,6 +1,6 @@
 <form [formGroup]="dialogForm">
   <div class="input-style gap-2 col-12">
-    <h4 class="text-black">Erreichte Zone wählen:</h4>
+    <label class="text-black">Erreichte Zone wählen:</label>
     <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">
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 8267910695..3dff6c0a34 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
@@ -26,12 +26,13 @@ <h4 class="text-black mb-1">Action Plan:</h4>
       </div>
 
       <div class="input-style gap-2 col-12">
-        <h4 class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional):</h4>
+        <label class="text-black" for="change-info">Kommentar/ Veränderung seit letztem Check-in (optional):</label>
         <textarea
           [attr.data-testId]="'changeInfo'"
           [ngClass]="formInputCheck(dialogForm, 'changeInfo')"
           class="big-dialog-form-field"
           formControlName="changeInfo"
+          id="change-info"
         ></textarea>
         <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'changeInfo')">
           <span>{{ getErrorMessage("MAX_VALUE", "Kommentar / Veränderung", 4096) }}</span>
@@ -52,12 +53,13 @@ <h4 class="text-black">Kommentar/ Veränderung seit letztem Check-in (optional):
       ></app-check-in-form-ordinal>
 
       <div class="input-style gap-2 col-12">
-        <h4 class="text-black">Massnahmen (optional):</h4>
+        <label class="text-black" for="initiatives">Massnahmen (optional):</label>
         <textarea
           [attr.data-testId]="'initiatives'"
           [ngClass]="formInputCheck(dialogForm, 'initiatives')"
           class="w-100 big-dialog-form-field"
           formControlName="initiatives"
+          id="initiatives"
         ></textarea>
         <mat-error *ngIf="hasFormFieldErrors(dialogForm, 'initiatives')">
           <span>{{ getErrorMessage("MAX_VALUE", "Massnahmen", 4096) }}</span>
@@ -65,13 +67,13 @@ <h4 class="text-black">Massnahmen (optional):</h4>
       </div>
 
       <div class="d-flex flex-column justify-content-start gap-2 col-12">
-        <h4 class="text-black confidence-label">
+        <label class="text-black confidence-label">
           Confidence um Target Zone
           <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
             ({{ calculateTarget(kr) | unitValueTransformation: kr.unit }})
           </span>
           zu erreichen:
-        </h4>
+        </label>
         <app-confidence [checkIn]="checkIn" [edit]="true" class="w-100"></app-confidence>
       </div>
     </form>
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 4b9ea36003..7e2dff1621 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
@@ -1,7 +1,7 @@
 <div class="d-flex justify-content-between align-items-center p-2 ps-0">
   <form [formGroup]="keyResultForm" class="d-flex flex-column flex-wrap container p-0">
     <div class="input-style gap-2 col-12">
-      <h4 class="text-black" for="title">Titel</h4>
+      <label class="text-black" for="title">Titel</label>
       <textarea
         [attr.data-testId]="'titleInput'"
         class="big-dialog-form-field"
@@ -23,7 +23,7 @@ <h4 class="text-black" for="title">Titel</h4>
     </div>
 
     <div class="input-style gap-2 col-12">
-      <h4 class="text-black">Owner</h4>
+      <label class="text-black" for="owner">Owner</label>
       <input
         (keydown.enter)="$event.preventDefault()"
         [ngClass]="invalidOwner() ? 'dialog-form-field-error' : 'dialog-form-field'"
@@ -44,7 +44,7 @@ <h4 class="text-black">Owner</h4>
     </div>
 
     <div class="input-style gap-2 col-12">
-      <h4 for="description" class="text-black">Beschreibung (optional)</h4>
+      <label class="text-black" for="description">Beschreibung (optional)</label>
       <textarea
         [attr.data-testId]="'descriptionInput'"
         class="big-dialog-form-field"
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
index c7a3d7839e..e9b6f7c449 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -22,7 +22,7 @@ <h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
         <section class="scoring-section">
           <app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
           <span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
-            Confidence
+            <h4>Confidence</h4>
             <app-confidence
               [checkIn]="keyResult.lastCheckIn!"
               [edit]="false"
@@ -34,10 +34,10 @@ <h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
         <section class="d-flex gap-4 flex-row mt-2">
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
             <div class="d-flex justify-content-start w-100 metric-label-div">
-              <h5 class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
+              <p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
                 Baseline: {{ keyResultMetric.baseline | unitValueTransformation: keyResultMetric.unit.toString() }}
-              </h5>
-              <h5
+              </p>
+              <p
                 *ngIf="keyResultMetric.lastCheckIn as lastCheckIn"
                 class="keyResult-detail-attribute-show rounded-5 p-2 metric-col d-flex justify-content-center gap-1"
                 [ngClass]="{
@@ -49,30 +49,30 @@ <h5 class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-
                 <span>
                   {{ +lastCheckIn.value | unitValueTransformation: keyResultMetric.unit.toString() }}
                 </span>
-              </h5>
-              <h5 class="keyResult-detail-attribute-show rounded-5 p-2 metric-col d-flex justify-content-center">
+              </p>
+              <p class="keyResult-detail-attribute-show rounded-5 p-2 metric-col d-flex justify-content-center">
                 Stretch Goal:
                 {{ keyResultMetric.stretchGoal | unitValueTransformation: keyResultMetric.unit.toString() }}
-              </h5>
+              </p>
             </div>
           </ng-container>
 
           <ng-container *ngIf="keyResult.keyResultType == 'ordinal' && castToOrdinal(keyResult) as keyResultOrdinal">
             <div class="d-flex justify-content-between w-100 ordinal-div mb-4">
               <div class="ordinal-col h-auto">
-                <h5 class="ordinal-zone-title">Commit</h5>
+                <h4 class="ordinal-zone-title">Commit</h4>
                 <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.commitZone }}
                 </p>
               </div>
               <div class="ordinal-col h-auto">
-                <h5 class="ordinal-zone-title">Target</h5>
+                <h4 class="ordinal-zone-title">Target</h4>
                 <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.targetZone }}
                 </p>
               </div>
               <div class="ordinal-col h-auto">
-                <h5 class="ordinal-zone-title">Stretch</h5>
+                <h4 class="ordinal-zone-title">Stretch</h4>
                 <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.stretchZone }}
                 </p>
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 1cea4dbb7f..a45700df22 100644
--- a/frontend/src/app/components/keyresult-type/keyresult-type.component.html
+++ b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
@@ -34,7 +34,7 @@
       <div class="d-flex flex-row">
         <div class="flex-fill input-alignments">
           <div class="input-style gap-2">
-            <h4 class="text-black" for="unit">Einheit</h4>
+            <label class="text-black" for="unit">Einheit</label>
             <select
               class="unit-dropdown bg-white menu-option"
               [ngClass]="formInputCheck(keyResultForm, 'unit')"
@@ -52,7 +52,7 @@ <h4 class="text-black" for="unit">Einheit</h4>
           </div>
 
           <div class="input-style gap-2">
-            <h4 class="text-black" for="baseline">Baseline</h4>
+            <label class="text-black" for="baseline">Baseline</label>
             <input
               [attr.data-testId]="'baseline'"
               class="metric-fields"
@@ -66,7 +66,7 @@ <h4 class="text-black" for="baseline">Baseline</h4>
           </div>
 
           <div class="input-style gap-2">
-            <h4 class="text-black" for="stretchGoal">Stretch Goal</h4>
+            <label class="text-black" for="stretchGoal">Stretch Goal</label>
             <input
               [attr.data-testId]="'stretchGoal'"
               class="metric-fields"
@@ -90,7 +90,7 @@ <h4 class="text-black" for="stretchGoal">Stretch Goal</h4>
       <div class="d-flex flex-row">
         <div class="flex-fill input-alignments">
           <div class="input-style gap-2">
-            <h4 class="text-black" for="commitZone">Commit Zone</h4>
+            <label class="text-black" for="commitZone">Commit Zone</label>
             <textarea
               class="ordinal-input-fields"
               [ngClass]="formInputCheck(keyResultForm, 'commitZone')"
@@ -104,7 +104,7 @@ <h4 class="text-black" for="commitZone">Commit Zone</h4>
           </div>
 
           <div class="input-style gap-2">
-            <h4 class="text-black" for="targetZone">Target Zone</h4>
+            <label class="text-black" for="targetZone">Target Zone</label>
             <textarea
               [attr.data-testId]="'targetZone'"
               class="ordinal-input-fields"
@@ -118,7 +118,7 @@ <h4 class="text-black" for="targetZone">Target Zone</h4>
           </div>
 
           <div class="input-style gap-2">
-            <h4 class="text-black" for="stretchZone">Stretch Goal</h4>
+            <label class="text-black" for="stretchZone">Stretch Goal</label>
             <textarea
               [attr.data-testId]="'stretchZone'"
               class="ordinal-input-fields"
diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
index f9fc9e82f4..557a003d64 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.html
+++ b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -5,11 +5,11 @@
   class="key-result rounded-2 p-3 w-100 focus-outline"
   tabindex="0"
 >
-  <h4 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h4>
+  <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 align-items-center flex-wrap keyResult-overview-attribute">
-      <h5 class="me-1 text-nowrap me-2">Letztes Check-in</h5>
+      <h4 class="me-1 text-nowrap me-2">Letztes Check-in</h4>
       <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn != null">{{
         keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT
       }}</span>
@@ -17,7 +17,7 @@ <h5 class="me-1 text-nowrap me-2">Letztes Check-in</h5>
     </div>
 
     <div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
-      <h5>Confidence</h5>
+      <h4>Confidence</h4>
       <app-confidence
         [edit]="false"
         [isDetail]="false"
diff --git a/frontend/src/app/components/objective/objective.component.spec.ts b/frontend/src/app/components/objective/objective.component.spec.ts
index fec7cb202f..c429f95f77 100644
--- a/frontend/src/app/components/objective/objective.component.spec.ts
+++ b/frontend/src/app/components/objective/objective.component.spec.ts
@@ -19,7 +19,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { ScoringComponent } from '../../shared/custom/scoring/scoring.component';
 import { ConfidenceComponent } from '../confidence/confidence.component';
 import { ReactiveFormsModule } from '@angular/forms';
-// @ts-ignore
 import * as de from '../../../assets/i18n/de.json';
 import { TranslateTestingModule } from 'ngx-translate-testing';
 import { ObjectiveMin } from '../../shared/types/model/ObjectiveMin';
diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.html b/frontend/src/app/shared/custom/scoring/scoring.component.html
index 94d70112ba..498be6c26d 100644
--- a/frontend/src/app/shared/custom/scoring/scoring.component.html
+++ b/frontend/src/app/shared/custom/scoring/scoring.component.html
@@ -2,13 +2,13 @@
   <div class="scoring-container d-flex flex-row">
     <div class="flex-fill">
       <span class="okr-score-label">
-        <h5 class="text-center text-small">Fail</h5>
+        <h4 class="text-center text-small">Fail</h4>
       </span>
       <span class="okr-score-label okr-score-commit">
-        <h5 class="text-center text-small">Commit</h5>
+        <h4 class="text-center text-small">Commit</h4>
       </span>
       <span class="okr-score-label">
-        <h5 class="text-center text-small">Target</h5>
+        <h4 class="text-center text-small">Target</h4>
       </span>
       <div
         [ngStyle]="{ display: stretched ? 'none' : 'flex' }"
@@ -40,7 +40,7 @@ <h5 class="text-center text-small">Target</h5>
     </div>
 
     <div class="okr-stretch d-flex flex-column align-items-center mb-1">
-      <h5 class="text-center text-small">Stretch</h5>
+      <h4 class="text-center text-small">Stretch</h4>
       <img
         [src]="'assets/icons/star-' + iconPath + '-icon.svg'"
         [attr.data-testId]="'stretch'"
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
index 992d336a6b..7ba4975dc6 100644
--- a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
+++ b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -11,7 +11,7 @@ <h4 class="fs-6 text-black">Objective</h4>
 
     <form [formGroup]="completeForm">
       <div class="input-style gap-2 col-12">
-        <h4 class="text-black">Bewertung</h4>
+        <label class="text-black">Bewertung</label>
         <div class="d-flex gap-3">
           <button
             class="successful w-50 valuation-card card-hover-successful"
@@ -43,7 +43,7 @@ <h4 class="text-black">Bewertung</h4>
       </div>
 
       <div class="input-style gap-2 col-12">
-        <h4 for="comment" class="text-black">Kommentar (optional)</h4>
+        <label class="text-black" for="comment">Kommentar (optional)</label>
         <textarea
           class="big-dialog-form-field"
           formControlName="comment"
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
index 4bce926b56..28e461b3bf 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -24,7 +24,7 @@
     <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 p-0">
         <div class="input-style gap-2 col-12">
-          <h4 class="text-black" for="title">Titel</h4>
+          <label class="text-black" for="title">Titel</label>
           <textarea
             [attr.data-testId]="'title'"
             class="big-dialog-form-field"
@@ -37,7 +37,7 @@ <h4 class="text-black" for="title">Titel</h4>
           </mat-error>
         </div>
         <div class="input-style gap-2 col-12">
-          <h4 class="text-black" for="title">Beschreibung (optional)</h4>
+          <label class="text-black" for="title">Beschreibung (optional)</label>
           <textarea
             [attr.data-testId]="'description'"
             formControlName="description"
@@ -51,7 +51,7 @@ <h4 class="text-black" for="title">Beschreibung (optional)</h4>
 
         <div class="d-flex row mb-1">
           <div class="d-flex flex-column gap-2 col-6">
-            <h4 class="text-black" for="quarter">Quartal</h4>
+            <label class="text-black" for="quarter">Quartal</label>
             <select
               class="custom-select bg-white w-100"
               formControlName="quarter"