add accessibility style (font size change) toggle, host bind style to app component and all dialogs

frontend/src/app/app.component.html

@@ -1,3 +1,4 @@
+<div [class.accessibility-theme]="fontService.isLargeText()">
     <div class="wrapper" *ngIf="!showOnlyRouterOutlet">
         <app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
         <mat-sidenav-container fullscreen class="main-container">
@@ -19,3 +20,4 @@
         [nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
         role="alert"
     ></ngx-guided-tour>
+</div>

frontend/src/app/app.component.ts

@@ -1,7 +1,7 @@
 
 import { of as observableOf, Subscription } from 'rxjs';
 
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, computed, HostBinding, OnInit, Signal, signal, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { filter, map, switchMap } from 'rxjs/operators';
@@ -20,6 +20,7 @@ import { TimezoneService } from './core/services/timezone/timezone-service';
 import { BreadcrumbService } from './ui/misc/breadcrumb/breadcrumb.service';
 import { TenantHandlingService } from './core/services/tenant/tenant-handling.service';
 import { MatIconRegistry } from '@angular/material/icon';
+import { FontAccessibilityService } from './core/services/font-accessibility.service';
 
 
 declare const gapi: any;
@@ -40,6 +41,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 	cssConfigLoaded = false;
 
 	@ViewChild('sidenav') sidenav: MatSidenav;
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	constructor(
 		private router: Router,
@@ -59,6 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 		private breadcrumbService: BreadcrumbService,
 		private sanitizer: DomSanitizer,
 		public iconRegistry: MatIconRegistry,
+        protected fontService: FontAccessibilityService
 	) {
 		this.initializeServices();
 		this.matomoService.init();

frontend/src/app/core/core-service.module.ts

@@ -52,6 +52,7 @@ import { PlanStatusService } from './services/plan/plan-status.service';
 import { DescriptionStatusService } from './services/description-status/description-status.service';
 import { PlanWorkflowService } from './services/plan/plan-workflow.service';
 import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service';
+import { FontAccessibilityService } from './services/font-accessibility.service';
 //
 //
 // This is shared module that provides all the services. Its imported only once on the AppModule.
@@ -123,7 +124,8 @@ export class CoreServiceModule {
                 PlanStatusService,
                 DescriptionStatusService,
                 PlanWorkflowService,
-                DescriptionWorkflowService
+                DescriptionWorkflowService,
+                FontAccessibilityService
 			],
 		};
 	}

frontend/src/app/core/services/font-accessibility.service.ts

@@ -0,0 +1,22 @@
+import { Injectable, Signal, signal } from '@angular/core';
+
+@Injectable()
+export class FontAccessibilityService {
+
+    private _accessibleFontSignal = signal<boolean>(false);
+    get accessibleFontSignal(): Signal<boolean> {
+        return this._accessibleFontSignal;
+    }
+
+    constructor() { }
+
+    public isLargeText(): boolean {
+        return this.accessibleFontSignal();
+    }
+
+    public toggleFontSize(){
+        const nextValue = this.isLargeText() ? 'false' : 'true';
+        localStorage.setItem('largeText', nextValue);
+        this._accessibleFontSignal.set(!this._accessibleFontSignal())
+    }
+}

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
@@ -15,6 +15,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-description-template-preview-dialog-component',
@@ -23,7 +24,7 @@ import { takeUntil } from 'rxjs/operators';
 	providers: [DescriptionFormService],
 })
 export class DescriptionTemplatePreviewDialogComponent extends BaseComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	descriptionTemplateDefinitionFormGroup: UntypedFormGroup;
 	progressIndication = false;
 	editorModel: DescriptionEditorModel;
@@ -40,6 +41,7 @@ export class DescriptionTemplatePreviewDialogComponent extends BaseComponent imp
 		private language: TranslateService,
 		public visibilityRulesService: VisibilityRulesService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 
 @Component({
@@ -7,7 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./import-description-template.dialog.component.scss']
 })
 export class ImportDescriptionTemplateDialogComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	sizeError = false;
 	selectFile = false;
 	maxFileSize: number = 1048576;
@@ -15,7 +16,8 @@ export class ImportDescriptionTemplateDialogComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<ImportDescriptionTemplateDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) { }
 
 

frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 
 @Component({
@@ -7,6 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./import-plan-blueprint.dialog.component.scss']
 })
 export class ImportPlanBlueprintDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	sizeError = false;
 	selectFile = false;
@@ -15,7 +17,8 @@ export class ImportPlanBlueprintDialogComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<ImportPlanBlueprintDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) { }
 
 

frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts

@@ -1,7 +1,7 @@
 
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -16,6 +16,7 @@ import { UserInviteToTenantRequestEditorModel, UserTenantUsersInviteRequestEdito
 import { UserTenantUsersInviteRequest } from '@app/core/model/user/user';
 import { UserService } from '@app/core/services/user/user.service';
 import { AppRole } from '@app/core/common/enum/app-role';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-user-invite-to-tenant-dialog.component',
@@ -23,7 +24,7 @@ import { AppRole } from '@app/core/common/enum/app-role';
 	styleUrls: ['./user-invite-to-tenant-dialog.component.scss']
 })
 export class UserInviteToTenantDialogComponent extends BaseComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	editorModel: UserTenantUsersInviteRequestEditorModel;
 	formGroup: any;
 	inProgressSendButton = false;
@@ -40,6 +41,7 @@ export class UserInviteToTenantDialogComponent extends BaseComponent implements
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		private userService: UserService,
 		private formService: FormService,
+        protected fontService: FontAccessibilityService,
 	) {
 		super();
 	}

frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, SecurityContext, ViewChild } from '@angular/core';
+import { Component, computed, HostBinding, Inject, SecurityContext, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
@@ -27,6 +27,7 @@ import { MatSelectionList } from '@angular/material/list';
 import { PlanUser } from '@app/core/model/plan/plan';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 interface AnnotationPayloadItem {
 	isMention: boolean;
@@ -39,7 +40,7 @@ interface AnnotationPayloadItem {
 	styleUrls: ['./annotation-dialog.component.scss']
 })
 export class AnnotationDialogComponent extends BaseComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	annotationProtectionTypeEnumValues = this.enumUtils.getEnumValues<AnnotationProtectionType>(AnnotationProtectionType);
 	annotationProtectionTypeEnum = AnnotationProtectionType;
 
@@ -85,6 +86,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 		protected routerUtils: RouterUtilsService,
 		private configurationService: ConfigurationService,
 		private sanitizer: DomSanitizer,
+        protected fontService: FontAccessibilityService,
 	) {
 		super();
 		this.entityId = data.entityId;

frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts

@@ -1,6 +1,7 @@
-import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
+import { Component, computed, HostBinding, Inject, OnDestroy, OnInit } from "@angular/core";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { ConfigurationService } from "@app/core/services/configuration/configuration.service";
+import { FontAccessibilityService } from "@app/core/services/font-accessibility.service";
 import { Subscription, takeUntil } from "rxjs";
 
 @Component({
@@ -9,6 +10,7 @@ import { Subscription, takeUntil } from "rxjs";
   styleUrls: ['./merge-email-loader-dialog.component.scss'],
 })
 export class MergeEmailLoaderDialogComponent implements OnInit, OnDestroy {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
   confirmMergeAccountSubscription: Subscription;
   mergeAccountDelay: number = 60000;
@@ -20,6 +22,8 @@ export class MergeEmailLoaderDialogComponent implements OnInit, OnDestroy {
     private dialogRef: MatDialogRef<MergeEmailLoaderDialogComponent>,
     private configurationService: ConfigurationService,
     @Inject(MAT_DIALOG_DATA) public data: any,
+    protected fontService: FontAccessibilityService,
+
   ) {}
   
 

frontend/src/app/ui/dashboard/dashboard.component.html

@@ -6,7 +6,7 @@
 					<div class="col-12 col-xl-10">
 						<div class="row">
 							<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4">
-								<button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-RELEASE' | translate}}" (click)="dismissNewReleaseNotification()">
+								<button mat-icon-button [attr.aria-label]="'ALT-TEXT.CLOSE-RELEASE' | translate" (click)="dismissNewReleaseNotification()">
                                     <mat-icon>close</mat-icon>
                                 </button>
 								<div class="row new-releases-hint-container m-0">
@@ -27,7 +27,7 @@
 								</div>
 							</div>
 							<div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'">
-								<button mat-icon-button  aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
+								<button mat-icon-button  [attr.aria-label]="'ALT-TEXT.CLOSE-INTRO-CARD' | translate" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
                                     <mat-icon>close</mat-icon>
                                 </button>
 
@@ -62,25 +62,25 @@
 						<div *ngIf="this.hasPlans()" class="col">
 							<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
 							<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
-								<mat-tab aria-label="{{'DASHBOARD.ALL' | translate}}" label="{{'DASHBOARD.ALL' | translate}}">
+								<mat-tab [attr.aria-label]="'DASHBOARD.ALL' | translate" label="{{'DASHBOARD.ALL' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Recent"
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="{{'DASHBOARD.DRAFTS' | translate}}" label="{{'DASHBOARD.DRAFTS' | translate}}">
+								<mat-tab [attr.aria-label]="'DASHBOARD.DRAFTS' | translate" label="{{'DASHBOARD.DRAFTS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Drafts" 
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="{{'DASHBOARD.PLANS' | translate}}" label="{{'DASHBOARD.PLANS' | translate}}">
+								<mat-tab [attr.aria-label]="'DASHBOARD.PLANS' | translate" label="{{'DASHBOARD.PLANS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Plans" 
                                     ></app-recent-edited-activity>
 								</mat-tab>
-								<mat-tab aria-label="{{'DASHBOARD.DESCRIPTIONS' | translate}}" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
+								<mat-tab [attr.aria-label]="'DASHBOARD.DESCRIPTIONS' | translate" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
 									<app-recent-edited-activity 
                                         [currentType]="currentType" 
                                         [type]="ActivityListingType.Descriptions" 
@@ -168,7 +168,7 @@
 					<div class="col-12 col-xl">
 						<div class="row">
 							<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
-								<button mat-icon-button (click)="dismissIntroCard()" aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}">
+								<button mat-icon-button (click)="dismissIntroCard()" [attr.aria-label]="'ALT-TEXT.CLOSE-INTRO-CARD' | translate">
                                     <mat-icon>close</mat-icon>
                                 </button>
 								<div class="d-flex flex-column align-items-center non-auth-title-container">

frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts

@@ -1,6 +1,6 @@
 
 import { map } from 'rxjs/operators';
-import { Component } from "@angular/core";
+import { Component, computed, HostBinding } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { Inject } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
@@ -19,6 +19,7 @@ import { DescriptionTemplatesInSection, PlanBlueprint, PlanBlueprintDefinition,
 import { TenantLookup } from '@app/core/query/tenant.lookup';
 import { Tenant } from '@app/core/model/tenant/tenant';
 import { AuthService } from '@app/core/services/auth/auth.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'description-copy-dialog-component',
@@ -26,6 +27,7 @@ import { AuthService } from '@app/core/services/auth/auth.service';
 	styleUrls: ['./description-copy-dialog.component.scss'],
 })
 export class DescriptionCopyDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	sections: PlanBlueprintDefinitionSection[] = [];
 	descriptionDescriptionTemplateLabel: String;
@@ -91,6 +93,7 @@ export class DescriptionCopyDialogComponent {
 		public language: TranslateService,
 		private filterService: FilterService,
 		private authService: AuthService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) { }
 

frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts

@@ -1,8 +1,9 @@
-import { Component, Inject } from "@angular/core";
+import { Component, computed, HostBinding, Inject } from "@angular/core";
 import { UntypedFormGroup } from "@angular/forms";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { DescriptionTemplateFieldSet } from "@app/core/model/description-template/description-template";
 import { VisibilityRulesService } from "../../../visibility-rules/visibility-rules.service";
+import { FontAccessibilityService } from "@app/core/services/font-accessibility.service";
 
 @Component({
 	selector: 'app-description-form-fieldset-editor-dialog',
@@ -10,7 +11,7 @@ import { VisibilityRulesService } from "../../../visibility-rules/visibility-rul
 	templateUrl: 'form-fieldset-editor-dialog.component.html'
 })
 export class FormFieldSetEditorDialogComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	visibilityRulesService: VisibilityRulesService;
 	numberingText: string;
 	fieldSet: DescriptionTemplateFieldSet;
@@ -18,7 +19,8 @@ export class FormFieldSetEditorDialogComponent {
 
 	constructor(
 		private dialogRef: MatDialogRef<FormFieldSetEditorDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) {
 		this.fieldSet = data.fieldSet;
 		this.propertiesFormGroup = data.propertiesFormGroup;

frontend/src/app/ui/description/editor/new-description/new-description.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from "@angular/core";
+import { Component, computed, HostBinding, Inject, OnInit } from "@angular/core";
 import { UntypedFormGroup } from "@angular/forms";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { IsActive } from "@app/core/common/enum/is-active.enum";
@@ -18,6 +18,7 @@ import { Observable } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import { DescriptionEditorEntityResolver } from "../resolvers/description-editor-entity.resolver";
 import { DescriptionPrefillingRequestEditorModel } from "./new-description-editor.model";
+import { FontAccessibilityService } from "@app/core/services/font-accessibility.service";
 
 @Component({
 	selector: 'new-description-component',
@@ -25,7 +26,7 @@ import { DescriptionPrefillingRequestEditorModel } from "./new-description-edito
 	styleUrls: ['new-description.component.scss']
 })
 export class NewDescriptionDialogComponent extends BaseComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	progressIndication = false;
 	singlePrefillingSourceAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
 	prefillObjectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@@ -42,6 +43,7 @@ export class NewDescriptionDialogComponent extends BaseComponent implements OnIn
 		public prefillingSourceService: PrefillingSourceService,
 		private formService: FormService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any) {
 		super();
 

frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts

@@ -1,8 +1,9 @@
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
 import { DescriptionFilterComponent, DescriptionListingFilters } from '../description-filter.component';
 import { DescriptionLookup, ReferencesWithType } from '@app/core/query/description.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'description-filter-dialog-component',
@@ -11,7 +12,7 @@ import { DescriptionLookup, ReferencesWithType } from '@app/core/query/descripti
 })
 
 export class DescriptionFilterDialogComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	@ViewChild(DescriptionFilterComponent, { static: true }) filter: DescriptionFilterComponent;
 
 	filters: DescriptionListingFilters;
@@ -19,6 +20,7 @@ export class DescriptionFilterDialogComponent implements OnInit {
 	constructor(
 		public dialogRef: MatDialogRef<DescriptionFilterComponent>,
 		private analyticsService: AnalyticsService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: { 
 			isPublic: boolean, 
 			hasSelectedTenant: boolean,

frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { PlanStatusEnum } from '@app/core/common/enum/plan-status';
@@ -19,6 +19,7 @@ import { nameof } from 'ts-simple-nameof';
 import { AuthService } from '@app/core/services/auth/auth.service';
 import { TenantLookup } from '@app/core/query/tenant.lookup';
 import { Tenant } from '@app/core/model/tenant/tenant';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-start-new-description-dialog',
@@ -26,7 +27,7 @@ import { Tenant } from '@app/core/model/tenant/tenant';
 	styleUrls: ['./start-new-description-dialog.component.scss']
 })
 export class StartNewDescriptionDialogComponent extends BaseComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	public isDialog: boolean = false;
 	public formGroup: UntypedFormGroup;
 	public sections: PlanBlueprintDefinitionSection[] = [];
@@ -83,6 +84,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent {
 		private filterService: FilterService,
 		private dateTimeFormatPipe: DateTimeFormatPipe,
 		private authService: AuthService,
+        protected fontService: FontAccessibilityService
 	) {
 		super();
 		this.formGroup = data.formGroup;

frontend/src/app/ui/faq/dialog/faq-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-faq-dialog',
@@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./faq-dialog.component.scss']
 })
 export class FaqDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	public isDialog: boolean = false;
 
 	constructor(
 		public dialogRef: MatDialogRef<FaqDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		this.isDialog = data.isDialog;

frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-glossary-dialog',
@@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./glossary-dialog.component.scss']
 })
 export class GlossaryDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	public isDialog: boolean;
 
 	constructor(
 		public dialogRef: MatDialogRef<GlossaryDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		this.isDialog = data.isDialog;

frontend/src/app/ui/language/dialog/language-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-language-dialog',
@@ -7,11 +8,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./language-dialog.component.scss']
 })
 export class LanguageDialogComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	public isDialog: boolean;
 
 	constructor(
 		public dialogRef: MatDialogRef<LanguageDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		this.isDialog = data.isDialog;

frontend/src/app/ui/navbar/navbar.component.html

@@ -27,6 +27,15 @@
 				<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
 					<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
 				</li>
+                <li class="navbar-item-lg">
+                    <button mat-icon-button 
+                        (click)="toggleFontSize()" 
+                        [matTooltip]="toggleFontSizeTooltip" 
+                        [attr.aria-label]="toggleFontSizeTooltip"
+                    >
+                        <mat-icon>format_size</mat-icon>
+                    </button>
+                </li>
 				<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
 					<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
 				</li>
@@ -77,7 +86,7 @@
 			<mat-menu #toggleMenu="matMenu">
                 <ul class="list m-2">       
                     <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
-                        <button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
+                        <button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
                         <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
                             <mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
                             <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>

frontend/src/app/ui/navbar/navbar.component.ts

@@ -27,6 +27,8 @@ import { nameof } from 'ts-simple-nameof';
 import { StartNewPlanDialogComponent } from '../plan/new/start-new-plan-dialogue/start-new-plan-dialog.component';
 import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-navbar',
@@ -65,6 +67,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		private storageFileService: StorageFileService,
 		private sanitizer: DomSanitizer,
 		private analyticsService: AnalyticsService,
+        private fontService: FontAccessibilityService,
+        private language: TranslateService
 	) {
 		super();
 		this.location = location;
@@ -329,4 +333,12 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		}
 	}
 
+    get toggleFontSizeTooltip(): string {
+        return this.language.instant('NAV-BAR.TOGGLE-TEXT-SIZE') + this.language.instant(this.fontService.isLargeText() ? 'NAV-BAR.SMALLER' : 'NAV-BAR.LARGER') 
+    }
+
+    toggleFontSize() {
+        this.fontService.toggleFontSize();
+    }
+
 }

frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../core/services/auth/auth.service';
 import { Observable, Subscription, fromEvent } from 'rxjs';
 import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-user-dialog-component',
@@ -12,7 +13,7 @@ import { RouterUtilsService } from '@app/core/services/router/router-utils.servi
 	styleUrls: ['user-dialog.component.scss']
 })
 export class UserDialogComponent implements OnInit, OnDestroy  {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	public formGroup: UntypedFormGroup;
 
 	resizeObservable: Observable<Event>;
@@ -23,6 +24,7 @@ export class UserDialogComponent implements OnInit, OnDestroy  {
 		private router: Router,
 		public dialogRef: MatDialogRef<UserDialogComponent>,
 		private routerUtils: RouterUtilsService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) { }
 

frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ClonePlanPersist, Plan } from '@app/core/model/plan/plan';
@@ -11,6 +11,7 @@ import { PlanCloneDialogEditorModel } from './plan-clone-dialog.editor.model';
 import { PlanEditorEntityResolver } from '../plan-editor-blueprint/resolvers/plan-editor-enitity.resolver';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-clone-dialog',
@@ -18,6 +19,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 	styleUrls: ['./plan-clone-dialog.component.scss']
 })
 export class ClonePlanDialogComponent extends BaseComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	plan: Plan;
 	editorModel: PlanCloneDialogEditorModel;
@@ -30,6 +32,7 @@ export class ClonePlanDialogComponent extends BaseComponent {
 		private uiNotificationService: UiNotificationService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		private language: TranslateService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.ts

@@ -1,7 +1,7 @@
 
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -18,6 +18,7 @@ import { Guid } from '@common/types/guid';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 import { PlanEditorModel } from '../../plan-editor-blueprint/plan-editor.model';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-invitation-dialog-component',
@@ -25,7 +26,7 @@ import { PlanEditorModel } from '../../plan-editor-blueprint/plan-editor.model';
 	styleUrls: ['./plan-invitation-dialog.component.scss']
 })
 export class PlanInvitationDialogComponent extends BaseComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	planId: Guid;
 	editorModel: PlanEditorModel;
 	formGroup: UntypedFormGroup;
@@ -44,6 +45,7 @@ export class PlanInvitationDialogComponent extends BaseComponent implements OnIn
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		private planService: PlanService,
 		private formService: FormService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Inject, Component, ViewChild, OnInit } from '@angular/core';
+import { Inject, Component, ViewChild, OnInit, computed, HostBinding } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormGroup } from '@angular/forms';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
 import { PlanFilterComponent, PlanListingFilters } from '../plan-filter.component';
 import { ReferencesWithType } from '@app/core/query/description.lookup';
 import { PlanLookup } from '@app/core/query/plan.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'plan-filter-dialog-component',
@@ -13,13 +14,14 @@ import { PlanLookup } from '@app/core/query/plan.lookup';
 })
 
 export class PlanFilterDialogComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	@ViewChild(PlanFilterComponent, { static: true }) filter: PlanFilterComponent;
     filters: PlanListingFilters;
 
 	constructor(
 		public dialogRef: MatDialogRef<PlanFilterDialogComponent>,
 		private analyticsService: AnalyticsService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: { 
 			isPublic: boolean,
 			hasSelectedTenant: boolean,

frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts

@@ -1,9 +1,9 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { AbstractControl, FormArray, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Plan, PlanDescriptionTemplate, NewVersionPlanDescriptionPersist, NewVersionPlanPersist } from '@app/core/model/plan/plan';
+import { Plan, NewVersionPlanDescriptionPersist, NewVersionPlanPersist } from '@app/core/model/plan/plan';
 import { PlanService } from '@app/core/services/plan/plan.service';
-import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
 import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import { map, takeUntil } from 'rxjs/operators';
@@ -23,7 +23,7 @@ import { FormService } from '@common/forms/form-service';
 import { MatSelectionListChange } from '@angular/material/list';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Description } from '@app/core/model/description/description';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-new-version-dialog',
@@ -31,6 +31,7 @@ import { Description } from '@app/core/model/description/description';
 	styleUrls: ['./plan-new-version-dialog.component.scss']
 })
 export class NewVersionPlanDialogComponent extends BaseComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	plan: Plan;
 	editorModel: PlanNewVersionDialogEditorModel;
@@ -75,11 +76,11 @@ export class NewVersionPlanDialogComponent extends BaseComponent {
 		public dialogRef: MatDialogRef<NewVersionPlanDialogComponent>,
 		private planService: PlanService,
 		public planBlueprintService: PlanBlueprintService,
-		private uiNotificationService: UiNotificationService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		private language: TranslateService,
 		private filterService: FilterService,
 		private formService: FormService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { PlanService } from '@app/core/services/plan/plan.service';
@@ -11,6 +11,7 @@ import { PlanUploadDialogComponent } from '../upload-dialogue/plan-upload-dialog
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
 import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-start-new-plan',
@@ -18,6 +19,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
 	styleUrls: ['./start-new-plan-dialog.component.scss']
 })
 export class StartNewPlanDialogComponent extends BaseComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	public isDialog: boolean = false;
 
@@ -33,6 +35,7 @@ export class StartNewPlanDialogComponent extends BaseComponent {
 		private analyticsService: AnalyticsService,
 		private routerUtils: RouterUtilsService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
+        protected fontService: FontAccessibilityService,
 	) {
 		super();
 		this.isDialog = data.isDialog;

frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts

@@ -1,5 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
-import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
 import { PlanBlueprint, PlanBlueprintDefinitionSection } from '@app/core/model/plan-blueprint/plan-blueprint';
@@ -18,8 +17,8 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 import { TranslateService } from '@ngx-translate/core';
-import { Guid } from '@common/types/guid';
 import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'plan-upload-dialog',
@@ -27,6 +26,8 @@ import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/descrip
 	styleUrls: ['./plan-upload-dialog.component.scss']
 })
 export class PlanUploadDialogComponent extends BaseComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
+
 	planTitle: string;
 	planBlueprints: any[] = [];
 	files: File[] = [];
@@ -47,9 +48,7 @@ export class PlanUploadDialogComponent extends BaseComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<PlanUploadDialogComponent>,
-		private _service: PlanService,
 		private dialog: MatDialog,
-		private httpClient: HttpClient,
 		private analyticsService: AnalyticsService,
 		private formService: FormService,
 		public descriptionTemplateService: DescriptionTemplateService,
@@ -58,7 +57,7 @@ export class PlanUploadDialogComponent extends BaseComponent {
 		private storageFileStorage: StorageFileService,
 		private uiNotificationService: UiNotificationService,
 		private language: TranslateService,
-
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any,
 	) {
 		super();

frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { BaseComponent } from '@common/base/base.component';
 import { UserService } from '@app/core/services/user/user.service';
@@ -6,6 +6,7 @@ import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/sing
 import { map } from 'rxjs';
 import { PlanAssociatedUser } from '@app/core/model/user/user';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-contact-prefill-dialog',
@@ -13,6 +14,7 @@ import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 	styleUrls: ['./plan-contact-prefill-dialog.component.scss']
 })
 export class PlanContactPrefillDialogComponent extends BaseComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	label: string;
 	selectedUser: PlanAssociatedUser; 
@@ -23,7 +25,8 @@ export class PlanContactPrefillDialogComponent extends BaseComponent {
 		private userService: UserService,
 		public enumUtils: EnumUtils,
 		public dialogRef: MatDialogRef<PlanContactPrefillDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) {
 		super();
 		this.label = data.label;

frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts

@@ -1,6 +1,7 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Description } from '@app/core/model/description/description';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-delete-dialog',
@@ -8,11 +9,13 @@ import { Description } from '@app/core/model/description/description';
 	styleUrls: ['./plan-delete-dialog.component.scss']
 })
 export class PlanDeleteDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	descriptions: Description[];
 	constructor(
 		public dialogRef: MatDialogRef<PlanDeleteDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) {
 		this.descriptions = data.descriptions;
 	}

frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
 import { PlanAccessType } from '@app/core/common/enum/plan-access-type';
 import { Plan } from '@app/core/model/plan/plan';
 import { DescriptionService } from '@app/core/services/description/description.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { PlanService } from '@app/core/services/plan/plan.service';
 import { BaseComponent } from '@common/base/base.component';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
@@ -18,6 +19,7 @@ import { takeUntil } from 'rxjs/operators';
 	styleUrls: ['./plan-finalize-dialog.component.scss']
 })
 export class PlanFinalizeDialogComponent extends BaseComponent implements OnInit {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	plan: Plan;
 	isPlanValid: boolean;
@@ -35,6 +37,7 @@ export class PlanFinalizeDialogComponent extends BaseComponent implements OnInit
 		public descriptionService: DescriptionService,
 		private planService: PlanService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts

@@ -18,7 +18,6 @@ import { MatButtonToggleChange } from '@angular/material/button-toggle';
 	styleUrls: ['./plan-user-field.component.scss']
 })
 export class PlanUserFieldComponent extends BaseComponent implements OnInit {
-
 	@Input() form;
 	@Input() validationErrorModel: ValidationErrorModel;
 	@Input() label: string = null;
@@ -41,7 +40,7 @@ export class PlanUserFieldComponent extends BaseComponent implements OnInit {
 
 	constructor(
 		public enumUtils: EnumUtils,
-		public userService: UserService
+		public userService: UserService,
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts

@@ -1,9 +1,10 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
 import { ReferenceType, ReferenceTypeDefinition, ReferenceTypeField } from '@app/core/model/reference-type/reference-type';
 import { DefinitionPersist, FieldPersist, ReferencePersist } from '@app/core/model/reference/reference';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
 import { ReferenceService } from '@app/core/services/reference/reference.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -16,6 +17,8 @@ import { nameof } from 'ts-simple-nameof';
 	styleUrls: ['./reference-dialog-editor.component.scss']
 })
 export class ReferenceDialogEditorComponent extends BaseComponent implements OnInit {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
+
 	formGroup: UntypedFormGroup;
 	referenceType: ReferenceType;
 	systemFields: string[];
@@ -32,7 +35,8 @@ export class ReferenceDialogEditorComponent extends BaseComponent implements OnI
 		private fb: UntypedFormBuilder,
 		public dialogRef: MatDialogRef<ReferenceDialogEditorComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any,
-		private formService: FormService
+		private formService: FormService,
+        protected fontService: FontAccessibilityService,
 	) { 
 		super(); 
 		this.label = data.label;

frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css

@@ -12,7 +12,7 @@
 	border-radius: 0px;
 	cursor: pointer;
 	display: inline-flex;
-	font-size: small;
+	font-size: 13px;
 }
 
 .sidebar-footer .option:hover {

frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -2,7 +2,7 @@
     @for(footerItems of nestedFooterItems; track footerItems){
         <ul class="row horizontal-list">
             @for(item of footerItems; track item; let index=$index){
-                <li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
+                <li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath}" tabindex="0">
                     {{ item.title | translate}}
                 </li>
             }

frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -21,6 +21,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
 import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { AccessLevel, SidebarItem } from '@app/core/model/configuration-models/sidebar.model';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-sidebar-footer',
@@ -45,6 +46,7 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
 		private analyticsService: AnalyticsService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		private configurationService: ConfigurationService,
+        protected fontService: FontAccessibilityService
 	) {
 		super();
 	}

frontend/src/app/ui/sidebar/sidebar.component.ts

@@ -12,6 +12,7 @@ import { UserDialogComponent } from '../navbar/user-dialog/user-dialog.component
 import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { AccessLevel } from '@app/core/model/configuration-models/sidebar.model';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 enum RouteType {
 	System = 0,

frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-user-guide-dialog',
@@ -7,11 +8,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./user-guide-dialog.component.scss']
 })
 export class UserGuideDialogComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	public isDialog: boolean = false;
 
 	constructor(
 		public dialogRef: MatDialogRef<UserGuideDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		this.isDialog = data.isDialog;

frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts

@@ -1,6 +1,7 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-add-account-dialog-component',
@@ -8,7 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./add-account-dialog.component.scss'],
 })
 export class AddAccountDialogComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	descriptionTemplateDefinitionModel: any;
 	descriptionTemplateDefinitionFormGroup: UntypedFormGroup;
 	progressIndication = false;
@@ -17,6 +18,7 @@ export class AddAccountDialogComponent implements OnInit {
 	constructor(
 		private formBuilder: FormBuilder,
 		public dialogRef: MatDialogRef<AddAccountDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {	}
 

frontend/src/assets/i18n/baq.json

@@ -329,6 +329,9 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Hasi DKP berria",
 		"INAPP-NOTIFICATIONS": "All Notifications",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger",
 		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
 	},
 	"SIDE-BAR": {

frontend/src/assets/i18n/de.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Start new DMP",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "ALLGEMEINES",

frontend/src/assets/i18n/en.json

@@ -330,7 +330,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Start new Plan",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+        "READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+		"TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "GENERAL",

frontend/src/assets/i18n/es.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Iniciar un nuevo PGD",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "GENERAL",

frontend/src/assets/i18n/gr.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Ξεκινήστε νέο DMP",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "ΓΕΝΙΚΑ",

frontend/src/assets/i18n/hr.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Kreirajte novi Plan",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "OPĆENITO",

frontend/src/assets/i18n/pl.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Uruchom nowy DMP",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "OGÓLNY",

frontend/src/assets/i18n/pt.json

@@ -332,7 +332,9 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Criar novo PGD",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TO-SMALLER": " to smaller",
+        "TO-LARGER": " to larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "GERAL",

frontend/src/assets/i18n/sk.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Začať nový DMP",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "VŠEOBECNÉ INFORMÁCIE",

frontend/src/assets/i18n/sr.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Započnite kreiranje novog Plana",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "OPŠTE",

frontend/src/assets/i18n/tr.json

@@ -332,7 +332,10 @@
 	"NAV-BAR": {
 		"START-NEW-PLAN": "Yeni bir VYP yaz",
 		"INAPP-NOTIFICATIONS": "All Notifications",
-		"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
+		"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
+        "TOGGLE-TEXT-SIZE": "Toggle font size to  ",
+        "SMALLER": "smaller",
+        "LARGER": "larger"
 	},
 	"SIDE-BAR": {
 		"GENERAL": "GENEL",

frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts

@@ -1,6 +1,7 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -9,12 +10,14 @@ import { TranslateService } from '@ngx-translate/core';
 	styleUrls: ['./form-validation-errors-dialog.component.scss']
 })
 export class FormValidationErrorsDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	formGroup: UntypedFormGroup;
 	errorMessages: string[] = [];
 
 	constructor(public dialogRef: MatDialogRef<FormValidationErrorsDialogComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 		private language: TranslateService
 	) {
 		if (data.formGroup !== undefined && data.formGroup !== null) {

frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-confirmation-dialog',
@@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./confirmation-dialog.component.scss']
 })
 export class ConfirmationDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	agreePrivacyPolicyNames = false;
 
 	constructor(
 		public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 	}

frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
   selector: 'app-multiple-choice-dialog',
@@ -7,10 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./multiple-choice-dialog.component.scss']
 })
 export class MultipleChoiceDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
+
 	agreePrivacyPolicyNames = false;
 
 	constructor(
 		public dialogRef: MatDialogRef<MultipleChoiceDialogComponent>,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 	}

frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.ts

@@ -1,6 +1,6 @@
 import { fromEvent, Observable, Subscription } from "rxjs";
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, EventEmitter, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, computed, EventEmitter, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AuthService } from '@app/core/services/auth/auth.service';
@@ -17,6 +17,7 @@ import { InAppNotification } from "@notification-service/core/model/inapp-notifi
 import { RouterUtilsService } from "@app/core/services/router/router-utils.service";
 import { Guid } from "@common/types/guid";
 import moment from "moment";
+import { FontAccessibilityService } from "@app/core/services/font-accessibility.service";
 
 @Component({
 	selector: 'app-mine-inapp-notification-listing-dialog',
@@ -24,6 +25,8 @@ import moment from "moment";
 	styleUrls: ['./mine-inapp-notification-listing-dialog.component.scss']
 })
 export class MineInAppNotificationListingDialogComponent extends BaseComponent implements OnInit, OnDestroy {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
+
 	public inappNotifications = new Array<InAppNotification>();
 	public notificationInAppTrackingEnum = NotificationInAppTracking;
 
@@ -40,6 +43,7 @@ export class MineInAppNotificationListingDialogComponent extends BaseComponent i
 		private uiNotificationService: UiNotificationService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
 		public authService: AuthService,
+        protected fontService: FontAccessibilityService,
 	) {
 		super();
 	}

frontend/src/styles.scss

@@ -73,11 +73,20 @@ $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-ser
 	$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
 	$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
 	// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
-	$button: mat.m2-define-typography-level($font-size: 14px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+	$button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
 	// Line-height must be unit-less fraction of the font-size.
 	//   $input:         mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
 );
 
+$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
+    $subtitle-1:  mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
+    $subtitle-2:  mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
+	$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+	$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+	$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+    $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+);
+
 $mat-density: 0;
 // @include mat.elevation(
 //   $zValue: 12,
@@ -96,12 +105,32 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
 			warn: $mat-dark-theme-warn,
 		)));
 
+$mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
+accent: $mat-theme-accent,
+warn: $mat-theme-warn),
+typography: $mat-accessibility-typography,
+density: $mat-density));
+
 @include mat.all-component-themes($mat-core-theme);
 
 .dark-theme {
 	@include mat.all-component-colors($mat-dark-theme);
 }
 
+.accessibility-theme {
+    @include mat.all-component-themes($mat-accessibility-theme);
+    // change individual classes set in components' scss
+    .frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
+    .nav-row, .nav-subrow, .sidebar-footer .option, label.mdc-label {
+        font-size: max(1rem, 16px) !important;
+    }
+    .action-list-label, .actions-list, small {
+        font-size: max(1rem, 13px) !important;
+    }
+    .status-chip {
+        font-size: 14px;
+    }
+}
 
 
 // @import "@covalent/core/theming/all-theme";