Merge pull request 'OZG-5833-Barrierefreiheit-Layoutanpassungen' (#709) from...

Merge pull request 'OZG-5833-Barrierefreiheit-Layoutanpassungen' (#709) from OZG-5833-Barrierefreiheit-Layoutanpassungen into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/709


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/navigation/src/lib/build-info/build-info.component.scss

@@ -46,7 +46,7 @@ p {
   white-space: nowrap;
   font-style: normal;
   font-weight: 400;
-  font-size: 11px;
+  font-size: 0.6875rem;
   color: #999;
 
   &.version {

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-mail-form.component.scss

@@ -49,8 +49,7 @@
   margin-bottom: 4px;
 
   .label {
-    font-size: 10.5px;
-    opacity: 0.6;
+    font-size: 0.75rem;
   }
 
   .value {

alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail/postfach-mail-date/postfach-mail-date.component.scss

@@ -22,6 +22,6 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 .date {
-  font-size: 13px;
+  font-size: 0.875rem;
   white-space: nowrap;
 }

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page-mail-list/postfach-page-mail-list.component.scss

@@ -32,7 +32,7 @@
     .subject {
       display: flex;
       align-items: center;
-      font-size: 16px;
+      font-size: 1rem;
       font-weight: 400;
       margin: 2px 0;
       position: relative;
@@ -52,7 +52,7 @@
     }
 
     .created-at {
-      font-size: 13px;
+      font-size: 0.875rem;
       position: absolute;
       right: 0;
       top: 0;

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html

@@ -27,8 +27,10 @@
   <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite"></ozgcloud-back-button>
 </ozgcloud-subnavigation>
 
-<div class="l-scroll-area--full">
-  <alfa-vorgang-in-postfach-breadcrumb-container></alfa-vorgang-in-postfach-breadcrumb-container>
+<div class="l-scroll-area--full flex flex-col">
+  <h1 data-test-id="postfach-mail-heading" class="pl-7 pt-4 text-lg font-medium">
+    Nachrichten zum Vorgang
+  </h1>
   <alfa-postfach-page-mail-list
     [postfachMailListStateResource]="postfachMailListStateResource"
     data-test-id="postfach-mail-list"

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.spec.ts

@@ -21,10 +21,9 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import { BackButtonComponent, SubnavigationComponent } from '@alfa-client/ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
-import { BackButtonComponent, SubnavigationComponent } from '@alfa-client/ui';
-import { VorgangInPostfachBreadcrumbContainerComponent } from '@alfa-client/vorgang-shared-ui';
 import { MockComponent } from 'ng-mocks';
 import { PostfachPageMailListComponent } from './postfach-page-mail-list/postfach-page-mail-list.component';
 import { PostfachPageComponent } from './postfach-page.component';
@@ -41,7 +40,6 @@ describe('PostfachPageComponent', () => {
         MockComponent(BackButtonComponent),
         MockComponent(SubnavigationComponent),
         MockComponent(PostfachPageMailListComponent),
-        MockComponent(VorgangInPostfachBreadcrumbContainerComponent),
       ],
     }).compileComponents();
   });

alfa-client/libs/ui/src/lib/ui/download-button/download-button.component.html

@@ -8,5 +8,5 @@
   [color]="'primary'"
 >
   <mat-icon>save_alt</mat-icon>
-  <span>{{ text }}</span>
+  <span class="text-sm">{{ text }}</span>
 </a>

alfa-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss

@@ -43,7 +43,7 @@ ozgcloud-expansion-panel {
     margin-bottom: 0;
     font-weight: 500;
     margin-left: 8px;
-    font-size: 16px;
+    font-size: 1rem;
   }
 
   .mat-expansion-panel-body {

alfa-client/libs/ui/src/lib/ui/fixed-dialog/_fixed-dialog.theme.scss

@@ -33,7 +33,7 @@
       margin: 0;
       padding: 0 4px 0 16px;
       color: #fff;
-      font-size: 16px;
+      font-size: 1rem;
       font-weight: normal;
       justify-content: space-between;
       align-items: center;
@@ -52,7 +52,7 @@
       padding: 0;
     }
     .mat-mdc-form-field-error {
-      font-size: 12px;
+      font-size: 0.75rem;
     }
     .mdc-dialog__content {
       line-height: 20px;

alfa-client/libs/ui/src/lib/ui/http-error-dialog/connection-timeout-retry-dialog/connection-timeout-retry-dialog.component.scss

@@ -23,13 +23,13 @@
  */
 h1 {
   font-weight: normal;
-  font-size: 24px;
+  font-size: 1.5rem;
   display: flex;
   align-items: center;
 
   .mat-icon {
     margin-right: 8px;
-    font-size: 30px;
+    font-size: 1.875rem;
     width: 30px;
     height: 30px;
   }

alfa-client/libs/ui/src/lib/ui/http-error-dialog/connection-timeout-retry-fail-dialog/connection-timeout-retry-fail-dialog.component.scss

@@ -23,13 +23,13 @@
  */
 h2 {
   font-weight: normal;
-  font-size: 24px;
+  font-size: 1.5rem;
   display: flex;
   align-items: center;
 
   .mat-icon {
     margin-right: 8px;
-    font-size: 30px;
+    font-size: 1.875rem;
     width: 30px;
     height: 30px;
   }

alfa-client/libs/ui/src/lib/ui/mattooltip/mattooltip.default.ts

@@ -4,4 +4,6 @@ export const matTooltipDefaultOptions: MatTooltipDefaultOptions = {
   showDelay: 1500,
   hideDelay: 0,
   touchendHideDelay: 1500,
+  positionAtOrigin: true,
+  disableTooltipInteractivity: true,
 };

alfa-client/libs/ui/src/lib/ui/menu-item/menu-item.component.html

@@ -6,7 +6,7 @@
 </ng-template>
 
 <div>
-  <div class="headline">{{ headline }}</div>
-  <div class="text">{{ text }}</div>
+  <div class="text-base font-medium">{{ headline }}</div>
+  <div class="mb-3 text-sm font-normal">{{ text }}</div>
   <ng-content></ng-content>
 </div>

alfa-client/libs/ui/src/lib/ui/menu-item/menu-item.component.scss

@@ -15,17 +15,6 @@ ozgcloud-svgicon-big {
   margin-right: 1rem;
 }
 
-.headline {
-  font-weight: 500;
-  font-size: 16px;
-}
-
-.text {
-  font-weight: 400;
-  font-size: 14px;
-  margin-bottom: 10px;
-}
-
 :host-context(.dark) {
   color: #fff;
   background-color: #393939;

alfa-client/libs/ui/src/lib/ui/notification/internal-server-error-dialog/internal-server-error-dialog.component.scss

@@ -27,7 +27,7 @@ h1 {
 
   .mat-icon {
     margin-right: 8px;
-    font-size: 30px;
+    font-size: 1.875rem;
     width: 30px;
     height: 30px;
   }

alfa-client/libs/ui/src/lib/ui/open-url-button/open-url-button.component.html

@@ -10,5 +10,5 @@
   class="button"
 >
   <mat-icon>open_in_new</mat-icon>
-  <span>{{ text }}</span>
+  <span class="text-sm">{{ text }}</span>
 </a>

alfa-client/libs/ui/src/lib/ui/ozgcloud-button/shared/ozgcloud-button-content/ozgcloud-button-content.component.html

@@ -16,7 +16,7 @@
 >
 </mat-icon>
 
-<span *ngIf="text" data-test-class="button-with-spinner-text">{{ text }}</span>
+<span *ngIf="text" class="text-sm" data-test-class="button-with-spinner-text">{{ text }}</span>
 
 <ozgcloud-spinner [diameter]="22" padding="0" [stateResource]="stateResource" [show]="showSpinner">
 </ozgcloud-spinner>

alfa-client/libs/ui/src/lib/ui/slide-toggle/slide-toggle.component.html

@@ -29,5 +29,5 @@
   [matTooltip]="toolTip"
   [checked]="checked"
   (change)="valueChanged.emit($event.checked)"
-  >{{ label }}
+  ><span class="text-sm">{{ label }}</span>
 </mat-slide-toggle>

alfa-client/libs/user-profile/src/lib/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html

@@ -38,6 +38,6 @@
 <ozgcloud-menu #accountMenu data-test-id="account-menu">
   <button mat-menu-item (click)="logoutEmitter.emit()" data-test-id="logout-button">
     <mat-icon>logout</mat-icon>
-    <span>Abmelden</span>
+    <span class="text-base">Abmelden</span>
   </button>
 </ozgcloud-menu>

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss

@@ -50,7 +50,7 @@
 .hinweis {
   grid-area: hinweis;
   padding-left: 16px;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 ozgcloud-stroked-button-with-spinner {