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/apps/alfa-e2e/src/e2e/main-tests/postfach-mail/postfach-mail.cy.ts

@@ -111,6 +111,7 @@ describe('PostfachMail', () => {
   };
 
   const vorgangWithoutPostfach: VorgangE2E = createVorgangWithoutPostfachId();
+
   function createVorgangWithoutPostfachId(): VorgangE2E {
     return {
       ...buildVorgang(objectIds[2], 'VorgangWithoutPostfachId'),
@@ -523,8 +524,8 @@ describe('PostfachMail', () => {
         exist(postfachMailPage.getSubnavigation().getBackButton());
       });
 
-      it('should show breadcrumb', () => {
-        contains(postfachMailPage.getBreadcrump(), vorgangWithReply.aktenzeichen);
+      it('should show Nachrichten heading', () => {
+        contains(postfachMailPage.getHeading(), postfachMailPage.getHeadingText());
       });
     });
 

alfa-client/apps/alfa-e2e/src/e2e/main-tests/postfach-mail/postfach-mail.filtered-by-organisationseinheit.cy.ts

@@ -92,7 +92,7 @@ describe('PostfachNachrichten filtered by organisationseinheit', () => {
       visitUrl(authorizedUrl);
       waitForSpinnerToDisappear();
 
-      exist(postfachMailPage.getBreadcrump());
+      exist(postfachMailPage.getHeading());
     });
 
     it('should not open postfachNachrichten page', () => {
@@ -100,7 +100,7 @@ describe('PostfachNachrichten filtered by organisationseinheit', () => {
       visitUrl(forbiddenUrl);
       waitForSpinnerToDisappear();
 
-      notExist(postfachMailPage.getBreadcrump());
+      notExist(postfachMailPage.getHeading());
     });
 
     it('should show snackbar', () => {
@@ -125,7 +125,7 @@ describe('PostfachNachrichten filtered by organisationseinheit', () => {
       visitUrl(authorizedUrl);
       waitForSpinnerToDisappear();
 
-      exist(postfachMailPage.getBreadcrump());
+      exist(postfachMailPage.getHeading());
     });
 
     it('should not open postfachNachrichten page', () => {
@@ -133,7 +133,7 @@ describe('PostfachNachrichten filtered by organisationseinheit', () => {
       visitUrl(forbiddenUrl);
       waitForSpinnerToDisappear();
 
-      notExist(postfachMailPage.getBreadcrump());
+      notExist(postfachMailPage.getHeading());
     });
 
     it('should show snackbar', () => {

alfa-client/apps/alfa-e2e/src/page-objects/postfach-mail.component.po.ts

@@ -26,10 +26,11 @@ import { PostfachMailSubnavigation } from '../components/postfach/postfach-mail-
 import { PostfachMailListItem } from '../components/postfach/postfach-mail.e2e.component';
 
 export class PostfachMailPage {
-  private readonly breadcrump: string = 'postfach-breadcrump';
   private readonly root: string = 'postfach-mail-list';
   private readonly downloadButton: string = 'postfach-pdf-export-button';
   private readonly mailText: string = 'postfach-outgoing-nachricht';
+  private readonly heading: string = 'postfach-mail-heading';
+  private readonly headingText: string = 'Nachrichten zum Vorgang';
 
   private readonly subnavigation: PostfachMailSubnavigation = new PostfachMailSubnavigation();
 
@@ -41,8 +42,12 @@ export class PostfachMailPage {
     return this.subnavigation;
   }
 
-  getBreadcrump() {
-    return cy.getTestElement(this.breadcrump);
+  getHeading() {
+    return cy.getTestElement(this.heading);
+  }
+
+  getHeadingText() {
+    return this.headingText;
   }
 
   getListItem(subject: string): PostfachMailListItem {

alfa-client/apps/alfa/src/app/app.component.html

@@ -28,7 +28,7 @@
     <alfa-header-container [apiRootStateResource]="apiRoot"></alfa-header-container>
 
     <div class="relative ml-4 mt-16 flex flex-grow items-start justify-between">
-      <main class="mat-app-background"><router-outlet></router-outlet></main>
+      <div class="mat-app-background relative grow"><router-outlet></router-outlet></div>
 
       <section class="mat-app-background right-nav">
         <alfa-build-info

alfa-client/apps/alfa/src/app/app.component.scss

@@ -41,13 +41,6 @@
   border-left: 1rem solid $background;
 }
 
-main {
-  position: relative;
-  flex-grow: 1;
-  max-width: calc(100vw - 2.25rem);
-  background-color: #fff;
-}
-
 .right-nav {
   flex-shrink: 0;
   position: sticky;

alfa-client/apps/alfa/src/styles/abstracts/_variables.scss

@@ -75,6 +75,6 @@ $alfaDarkTheme: mat.define-dark-theme(
   )
 );
 
-$default-font-size: 16px;
+$default-font-size: 1rem;
 
 $iconHeight: 24px;

alfa-client/apps/alfa/src/styles/layout/_main.scss

@@ -36,7 +36,7 @@
     // TODO Wofür ist der box-shadow?
     // box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), inset 1px 0 0 rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.08);
     position: relative;
-    display: block;
+    display: flex;
     min-height: calc(100vh - $header-height - $navigation-height);
     background-color: #fff;
   }

alfa-client/apps/alfa/src/styles/main.scss

@@ -57,7 +57,6 @@
 @import 'libs/wiedervorlage/src/lib/wiedervorlage-list-in-vorgang-list-container/wiedervorlage-list-in-vorgang-list-container.theme';
 @import 'libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang/user-profile-in-vorgang.theme';
 @import 'libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.theme';
-@import 'libs/vorgang-shared-ui/src/lib/vorgang-nummer/vorgang-nummer.component.theme';
 @import 'libs/ui/src/lib/icon/postfach-icon/postfach-icon.component.theme';
 @import 'libs/ui/src/lib/ui/button-toggle/button-toogle.theme';
 @import 'libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/_vorgang-filter-item.theme.scss';
@@ -83,3 +82,27 @@ body.dark {
   @include mat.all-component-colors($alfaDarkTheme);
   @include custom-components-theme($alfaDarkTheme);
 }
+
+body {
+  --mdc-filled-text-field-label-text-size: 1rem;
+  --mdc-form-field-label-text-size: 12rem;
+}
+
+// Material Datepicker font-sizes
+.mat-datepicker-content {
+  .mat-button, .mat-fab, .mat-icon-button, .mat-mini-fab, .mat-raised-button,th,td {
+       font-size: 1rem
+   }
+ }
+
+.mdc-text-field__input {
+  font-size: 1rem !important;
+}
+
+.mat-calendar-table-header th {
+  font-size: 0.875rem !important;
+}
+
+.mdc-button__label {
+  font-size: 0.875rem !important;
+}
\ No newline at end of file

alfa-client/apps/alfa/src/styles/material/_autocomplete.scss

@@ -46,7 +46,7 @@
 
     .mat-mdc-option {
       border-top: 1px solid rgba(0, 0, 0, 0.08);
-      font-size: 14px;
+      font-size: 0.875rem;
       padding: 0.5rem 1rem;
       margin-bottom: 0 !important;
 

alfa-client/apps/alfa/src/styles/material/_dialog.scss

@@ -5,9 +5,9 @@
   $color-config: mat.get-color-config($theme);
   $primary-palette: map.get($color-config, 'primary');
 
-  h1 {
+  h1.mat-mdc-dialog-title {
     color: mat.get-color-from-palette($primary-palette) !important;
-    font-size: 24px !important;
+    font-size: 1.5rem !important;
     font-weight: normal !important;
   }
 

alfa-client/apps/alfa/src/styles/material/_expansion-panel.scss

@@ -43,7 +43,7 @@
       margin-bottom: 0;
       font-weight: 500;
       margin-left: 16px;
-      font-size: 16px;
+      font-size: 1rem;
     }
 
     .mat-expansion-panel-body {
@@ -57,7 +57,7 @@
 
       h3 {
         color: inherit;
-        font-size: 14px !important;
+        font-size: 0.875rem !important;
         font-weight: 500 !important;
         margin-left: 0;
       }
@@ -93,7 +93,7 @@
   background-color: inherit;
   box-shadow: none;
   border-radius: 0;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 :host-context(.dark) .mat-expansion-panel {

alfa-client/apps/alfa/src/styles/material/_menu.scss

@@ -19,5 +19,6 @@ alfa-help-menu {
     height: 40px;
     width: auto;
     padding: 0.5rem;
+    font-size: 0.875rem;
   }
 }

alfa-client/apps/alfa/src/styles/material/_tabs.scss

@@ -35,3 +35,6 @@
     margin-right: 0 !important;
   }
 }
+.mat-mdc-tab .mdc-tab__text-label {
+  font-size: 0.875rem;
+}
\ No newline at end of file

alfa-client/apps/alfa/src/styles/material/_tooltip.scss

 .mat-tooltip {
-  font-size: 12px !important;
+  font-size: 0.75rem !important;
   padding-top: 2px !important;
   padding-bottom: 2px !important;
   margin-top: 2px !important;

alfa-client/libs/binary-file/src/lib/binary-file-container/binary-file-container.component.scss

@@ -25,5 +25,5 @@
   position: relative;
   max-width: 100%;
   padding: 4px 0;
-  font-size: 14px;
+  font-size: 0.875rem;
 }

alfa-client/libs/binary-file/src/lib/binary-file-container/binary-file/binary-file.component.scss

@@ -89,7 +89,7 @@
 }
 
 .size {
-  font-size: 12px;
+  font-size: 0.75rem;
   flex-shrink: 0;
   margin-right: 4px;
 

alfa-client/libs/historie/src/lib/historie-container/historie-list/historie-item-header/historie-item-header.component.scss

@@ -26,7 +26,7 @@
   white-space: nowrap;
   align-items: center;
   min-height: 44px;
-  font-size: 14px;
+  font-size: 0.875rem;
   width: 100%;
 }
 

alfa-client/libs/historie/src/lib/historie-container/historie-list/historie-item-vorgang-created/historie-item-vorgang-created.component.scss

@@ -29,7 +29,7 @@
   display: block;
   margin-top: 0.5rem;
   min-height: 44px;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 p {

alfa-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-list-in-vorgang/kommentar-list-item-in-vorgang/kommentar-list-item-in-vorgang.component.html

@@ -24,7 +24,7 @@
 
 -->
 
-<div *ngIf="!editMode" class="plain-text">
+<div *ngIf="!editMode" class="plain-text text-sm">
   <button
     [attr.data-test-id]="'kommentar-item-' + (kommentar.text | convertForDataTest)"
     (click)="edit()"
@@ -36,7 +36,7 @@
         [kommentar]="kommentar"
         data-test-class="kommentar-created-by"
       ></alfa-user-profile-in-kommentar-container>
-      <span data-test-id="kommentar-created-at" class="date">{{
+      <span data-test-id="kommentar-created-at" class="date text-sm">{{
         kommentar.createdAt | formatDateWithTimePipe: false
       }}</span>
     </div>

alfa-client/libs/kommentar/src/lib/kommentar-list-in-vorgang-container/kommentar-list-in-vorgang/kommentar-list-item-in-vorgang/kommentar-list-item-in-vorgang.component.scss

@@ -54,7 +54,6 @@ button {
 
   .date {
     flex-shrink: 0;
-    font-size: 13px;
   }
 }