From 4170a63dbf7d6d6ecf6bccc18746c593e3ab310a Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Wed, 25 Sep 2024 12:17:26 +0300
Subject: [PATCH] larger font size > add dynamic accessibility class to listing
 filter menus

---
 .../listing/filters/status-listing-filters.component.html | 2 +-
 .../listing/filters/status-listing-filters.component.ts   | 6 ++++--
 .../description-status-listing-filters.component.html     | 2 +-
 .../description-status-listing-filters.component.ts       | 6 ++++--
 .../description-template-listing-filters.component.html   | 2 +-
 .../description-template-listing-filters.component.ts     | 6 ++++--
 ...scription-template-type-listing-filters.component.html | 2 +-
 ...description-template-type-listing-filters.component.ts | 6 ++++--
 .../filters/lock-listing-filters.component.html           | 2 +-
 .../filters/lock-listing-filters.component.ts             | 6 ++++--
 .../filters/language-listing-filters.component.html       | 2 +-
 .../listing/filters/language-listing-filters.component.ts | 6 ++++--
 .../filters/plan-blueprint-listing-filters.component.html | 2 +-
 .../filters/plan-blueprint-listing-filters.component.ts   | 6 ++++--
 .../plan-status-listing-filters.component.html            | 2 +-
 .../plan-status-listing-filters.component.ts              | 7 ++++---
 .../prefilling-source-listing-filters.component.html      | 2 +-
 .../prefilling-source-listing-filters.component.ts        | 6 ++++--
 .../filters/reference-type-listing-filters.component.html | 2 +-
 .../filters/reference-type-listing-filters.component.ts   | 5 ++++-
 .../filters/reference-listing-filters.component.html      | 2 +-
 .../filters/reference-listing-filters.component.ts        | 8 +++++---
 .../listing/filters/tenant-listing-filters.component.html | 2 +-
 .../listing/filters/tenant-listing-filters.component.ts   | 5 ++++-
 .../filters/usage-limit-listing-filters.component.html    | 2 +-
 .../filters/usage-limit-listing-filters.component.ts      | 5 ++++-
 .../listing/filters/user-listing-filters.component.html   | 2 +-
 .../listing/filters/user-listing-filters.component.ts     | 5 ++++-
 .../notification-template-listing-filters.component.html  | 2 +-
 .../notification-template-listing-filters.component.ts    | 5 ++++-
 .../filters/notification-listing-filters.component.html   | 2 +-
 .../filters/notification-listing-filters.component.ts     | 5 ++++-
 ...mine-inapp-notification-listing-filters.component.html | 2 +-
 .../mine-inapp-notification-listing-filters.component.ts  | 5 ++++-
 34 files changed, 86 insertions(+), 46 deletions(-)

diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
index 6c79fbd36..e49f62d0d 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
+++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts
index fb1b42173..87a1f457e 100644
--- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts
+++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts
@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
 import { nameof } from 'ts-simple-nameof';
 import { StatusFilter } from '@annotation-service/core/query/status.lookup';
 import { InternalStatus } from '@annotation-service/core/enum/internal-status.enum';
 import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/enum-utils.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-status-listing-filters',
@@ -12,7 +13,7 @@ import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/
 	styleUrls: ['./status-listing-filters.component.scss']
 })
 export class StatusListingFiltersComponent extends BaseComponent implements OnInit, OnChanges {
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	@Input() readonly filter: StatusFilter;
 	@Output() filterChange = new EventEmitter<StatusFilter>();
 	internalStatusEnumValues = this.enumUtils.getEnumValues<InternalStatus>(InternalStatus)
@@ -23,6 +24,7 @@ export class StatusListingFiltersComponent extends BaseComponent implements OnIn
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: AnnotationServiceEnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
index 5e07a6636..6d9fd8c29 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts
index e56cf5623..910300c99 100644
--- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts
@@ -1,6 +1,7 @@
-import { Component, effect, EventEmitter, input, Output } from '@angular/core';
+import { Component, computed, effect, EventEmitter, HostBinding, input, Output } from '@angular/core';
 import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
 import { DescriptionStatusFilter } from '@app/core/query/description-status.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
@@ -11,6 +12,7 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
   styleUrl: './description-status-listing-filters.component.scss'
 })
 export class DescriptionStatusListingFiltersComponent extends BaseComponent{
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
     readonly filter = input<DescriptionStatusFilter>();
 	@Output() filterChange = new EventEmitter<DescriptionStatusFilter>();
 
@@ -19,7 +21,7 @@ export class DescriptionStatusListingFiltersComponent extends BaseComponent{
 
     internalStatusEnum = this.enumUtils.getEnumValues<DescriptionStatusEnum>(DescriptionStatusEnum);
 
-    constructor(protected enumUtils: EnumUtils){
+    constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService){
         super();
         effect(() => {
             const newFilters = this.filter();
diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
index e4e3d74cd..51a357427 100644
--- a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts
index 7ea3bc8e1..ef8edb855 100644
--- a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts
@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { DescriptionTemplateStatus } from '@app/core/common/enum/description-template-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { DescriptionTemplateFilter } from '@app/core/query/description-template.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { Guid } from '@common/types/guid';
@@ -21,10 +22,11 @@ export class DescriptionTemplateListingFiltersComponent extends BaseComponent im
 
 	// * State
 	internalFilters: DescriptionTemplateListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
index a18761565..875f8a61c 100644
--- a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts
index cd136e6da..45507bd1d 100644
--- a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts
@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { DescriptionTemplateTypeStatus } from '@app/core/common/enum/description-template-type-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { DescriptionTemplateTypeFilter } from '@app/core/query/description-template-type.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -20,10 +21,11 @@ export class DescriptionTemplateTypeListingFiltersComponent extends BaseComponen
 
 	// * State
 	internalFilters: DescriptionTemplateTypeListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
index 514d5263e..8b7bcfb2b 100644
--- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts
index ef99b84e5..bddfc7f11 100644
--- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts
@@ -1,7 +1,8 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { LockTargetType } from '@app/core/common/enum/lock-target-type';
 import { LockFilter } from '@app/core/query/lock.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { UserService } from '@app/core/services/user/user.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -24,11 +25,12 @@ export class LockListingFiltersComponent extends BaseComponent implements OnInit
 
 	// * State
 	internalFilters: LockListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
 		public userService: UserService,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
index 2b6dc4ac8..b787a743a 100644
--- a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts
index 4f0881c85..0603d4d2a 100644
--- a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { TenantFilter } from '@app/core/query/tenant.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,11 @@ export class LanguageListingFiltersComponent extends BaseComponent implements On
 
 	// * State
 	internalFilters: LanguageListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
index 5f680095c..b1188c33a 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts
index e578e40aa..977baf6f6 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts
@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { PlanBlueprintStatus } from '@app/core/common/enum/plan-blueprint-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PlanBlueprintFilter } from '@app/core/query/plan-blueprint.lookup';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-blueprint-listing-filters',
@@ -20,10 +21,11 @@ export class PlanBlueprintListingFiltersComponent extends BaseComponent implemen
 
 	// * State
 	internalFilters: PlanBlueprintListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
index 76e9e1f8b..445b4849d 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts
index 3c40652a2..77f73187e 100644
--- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts
@@ -1,7 +1,8 @@
-import { Component, effect, EventEmitter, input, Input, Output } from '@angular/core';
+import { Component, computed, effect, EventEmitter, input, Input, Output } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PlanStatusEnum } from '@app/core/common/enum/plan-status';
 import { PlanStatusFilter } from '@app/core/query/plan-status.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 
@@ -17,8 +18,8 @@ export class PlanStatusListingFiltersComponent extends BaseComponent {
 	internalFilters: PlanStatusListingFilters = this._getEmptyFilters();
 	appliedFilterCount: number = 0;
 	internalStatusEnum = this.enumUtils.getEnumValues<PlanStatusEnum>(PlanStatusEnum);
-
-	constructor(protected enumUtils: EnumUtils) {
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
+	constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService) {
 		super();
 		effect(() => {
 			const newFilters = this.filter();
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
index e07e3cae0..20a0eaf9e 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts
index ff8f023b2..d84b3a93c 100644
--- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PrefillingSourceFilter } from '@app/core/query/prefilling-source.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,11 @@ export class PrefillingSourceListingFiltersComponent extends BaseComponent imple
 
 	// * State
 	internalFilters: PrefillingSourceListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
index 282fc732b..73a1c337f 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts
index 4b42ca888..a1c61a66e 100644
--- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { ReferenceTypeFilter } from '@app/core/query/reference-type.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,12 @@ export class ReferenceTypeListingFiltersComponent extends BaseComponent implemen
 
 	// * State
 	internalFilters: ReferenceTypeListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
index 2d5f37137..03a48ee88 100644
--- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts
index 5dd9be919..806a57ef2 100644
--- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts
@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
 import { ReferenceFilter } from '@app/core/query/reference.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -22,11 +23,12 @@ export class ReferenceListingFiltersComponent extends BaseComponent implements O
 
 	// * State
 	internalFilters: ReferenceListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
-		public referenceTypeService: ReferenceTypeService
+		public referenceTypeService: ReferenceTypeService,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
index 66020bab0..285701d9b 100644
--- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'TENANT-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts
index 4212f7d56..aa2b4cb2e 100644
--- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { TenantFilter } from '@app/core/query/tenant.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,12 @@ export class TenantListingFiltersComponent extends BaseComponent implements OnIn
 
 	// * State
 	internalFilters: TenantListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
index f6bd2fba0..796a79c3f 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()"(click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'USAGE-LIMIT-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts
index 01bc688eb..a6c5f6fee 100644
--- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts
@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric';
 import { UsageLimitFilter } from '@app/core/query/usage-limit.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -20,10 +21,12 @@ export class UsageLimitListingFiltersComponent extends BaseComponent implements
 
 	// * State
 	internalFilters: UsageLimitListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
index d0bfa6b86..8248bbeaf 100644
--- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
+++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'USER-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts
index 7c149e1ac..e0a0c26d4 100644
--- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts
+++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts
@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { UserRoleLookup } from '@app/core/query/user-role.lookup';
 import { UserFilter } from '@app/core/query/user.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -24,10 +25,12 @@ export class UserListingFiltersComponent extends BaseComponent implements OnInit
 
 	// * State
 	internalFilters: UserListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
index d903a2bfa..aad2e3a48 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.ts b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.ts
index b21894e08..72c636747 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.ts
+++ b/frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { NotificationTemplateFilter } from '@notification-service/core/query/notification-template.lookup';
 import { NotificationServiceEnumUtils } from '@notification-service/core/formatting/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -7,6 +7,7 @@ import { NotificationTemplateChannel } from '@notification-service/core/enum/not
 import { NotificationTemplateKind } from '@notification-service/core/enum/notification-template-kind.enum';
 import { NotificationType } from '@notification-service/core/enum/notification-type.enum';
 import { nameof } from 'ts-simple-nameof';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-notification-template-listing-filters',
@@ -20,6 +21,7 @@ export class NotificationTemplateListingFiltersComponent extends BaseComponent i
 	notificationTemplateKindEnumValues = this.enumUtils.getEnumValues<NotificationTemplateKind>(NotificationTemplateKind)
 	notificationTemplateChannelEnumValues = this.enumUtils.getEnumValues<NotificationTemplateChannel>(NotificationTemplateChannel);
 	notificationTypeEnumValues = this.enumUtils.getEnumValues<NotificationType>(NotificationType);
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	// * State
 	internalFilters: NotificationTemplateListingFilters = this._getEmptyFilters();
@@ -27,6 +29,7 @@ export class NotificationTemplateListingFiltersComponent extends BaseComponent i
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: NotificationServiceEnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
index 31991bcbc..1a6ec100a 100644
--- a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
index b452f110d..3a0cc7489 100644
--- a/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
+++ b/frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
@@ -1,5 +1,5 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { NotificationFilter } from '@notification-service/core/query/notification.lookup';
 import { UserService } from '@app/core/services/user/user.service';
 import { NotificationServiceEnumUtils } from '@notification-service/core/formatting/enum-utils.service';
@@ -13,6 +13,7 @@ import { NotificationTrackingProcess } from '@notification-service/core/enum/not
 import { NotificationTrackingState } from '@notification-service/core/enum/notification-tracking-state.enum';
 import { NotificationType } from '@notification-service/core/enum/notification-type.enum';
 import { nameof } from 'ts-simple-nameof';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-notification-listing-filters',
@@ -31,6 +32,7 @@ export class NotificationListingFiltersComponent extends BaseComponent implement
 	userAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
 
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	// * State
 	internalFilters: NotificationListingFilters = this._getEmptyFilters();
@@ -39,6 +41,7 @@ export class NotificationListingFiltersComponent extends BaseComponent implement
 	constructor(
 		public enumUtils: NotificationServiceEnumUtils,
 		private userService: UserService,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {
diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
index 29c00ed1a..428bdd472 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
diff --git a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.ts b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.ts
index e82f640aa..782630b02 100644
--- a/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.ts
+++ b/frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.ts
@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, OnChanges, computed } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 import { NotificationServiceEnumUtils } from '@notification-service/core/formatting/enum-utils.service';
 import { InAppNotificationFilter } from '@notification-service/core/query/inapp-notification.lookup';
 import { nameof } from 'ts-simple-nameof';
 import { NotificationInAppTracking } from '@notification-service/core/enum/notification-inapp-tracking.enum';
 import { NotificationType } from '@notification-service/core/enum/notification-type.enum';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 @Component({
 	selector: 'app-mine-inapp-notification-listing-filters',
 	templateUrl: './mine-inapp-notification-listing-filters.component.html',
@@ -20,10 +21,12 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 
 	// * State
 	internalFilters: InAppNotificationListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: NotificationServiceEnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {