From b72ce73931ace11de9c8cb3f8aed4abbf73e1d08 Mon Sep 17 00:00:00 2001
From: Andreas Awouters <andreas.awouters@atmire.com>
Date: Tue, 22 Oct 2024 14:34:35 +0200
Subject: [PATCH] 119602: Add Accessibility Settings page

---
 src/app/footer/footer.component.html          |  4 ++
 .../accessibility-settings.component.html     | 26 ++++++++++
 .../accessibility-settings.component.ts       | 47 +++++++++++++++++++
 src/app/info/info-routing-paths.ts            |  5 ++
 src/app/info/info-routing.module.ts           | 16 ++++++-
 src/app/info/info.module.ts                   |  4 +-
 src/assets/i18n/en.json5                      | 20 ++++++++
 7 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 src/app/info/accessibility-settings/accessibility-settings.component.html
 create mode 100644 src/app/info/accessibility-settings/accessibility-settings.component.ts

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 13d84e6e2e..d3534706e8 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -79,6 +79,10 @@
           <a class="text-white"
              routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
         </li>
+        <li>
+          <a class="text-white"
+             routerLink="info/accessibility">{{ 'footer.link.accessibility' | translate }}</a>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/app/info/accessibility-settings/accessibility-settings.component.html b/src/app/info/accessibility-settings/accessibility-settings.component.html
new file mode 100644
index 0000000000..6550c6a288
--- /dev/null
+++ b/src/app/info/accessibility-settings/accessibility-settings.component.html
@@ -0,0 +1,26 @@
+<div class="container">
+  <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
+
+  <form>
+    <div *ngFor="let setting of accessibilitySettingsOptions" class="form-group row">
+      <label [for]="setting + 'Input'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.' + setting + '.label' | translate }}
+      </label>
+
+      <div class="col-sm-10">
+        <input [type]="getInputType(setting)" [id]="setting + 'Input'" class="form-control"
+               [(ngModel)]="formValues[setting]" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="setting + 'Hint'">
+
+        <small [id]="setting + 'Hint'" class="form-text text-muted">
+          {{ 'info.accessibility-settings.' + setting + '.hint' | translate }}
+        </small>
+      </div>
+    </div>
+
+    <button type="submit" (click)="saveSettings()" class="btn btn-primary">
+      {{ 'info.accessibility-settings.submit' | translate }}
+    </button>
+  </form>
+
+</div>
diff --git a/src/app/info/accessibility-settings/accessibility-settings.component.ts b/src/app/info/accessibility-settings/accessibility-settings.component.ts
new file mode 100644
index 0000000000..97e3ddb321
--- /dev/null
+++ b/src/app/info/accessibility-settings/accessibility-settings.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../core/auth/auth.service';
+import {
+  AccessibilitySetting,
+  AccessibilitySettingsService,
+  AccessibilitySettings
+} from '../../accessibility/accessibility-settings.service';
+import { take } from 'rxjs';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'ds-accessibility-settings',
+  templateUrl: './accessibility-settings.component.html'
+})
+export class AccessibilitySettingsComponent implements OnInit {
+
+  protected accessibilitySettingsOptions: AccessibilitySetting[];
+
+  protected formValues: AccessibilitySettings = { };
+
+  constructor(
+    protected authService: AuthService,
+    protected settingsService: AccessibilitySettingsService,
+    protected notificationsService: NotificationsService,
+    protected translateService: TranslateService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.accessibilitySettingsOptions = this.settingsService.getAllAccessibilitySettingKeys();
+    this.settingsService.getAll().pipe(take(1)).subscribe(currentSettings => {
+      this.formValues = currentSettings;
+    });
+  }
+
+  getInputType(setting: AccessibilitySetting): string {
+    return this.settingsService.getInputType(setting);
+  }
+
+  saveSettings() {
+    this.settingsService.setSettings(this.formValues).pipe(take(1)).subscribe(location => {
+      this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.save-notification.' + location));
+    });
+  }
+
+}
diff --git a/src/app/info/info-routing-paths.ts b/src/app/info/info-routing-paths.ts
index a18de2c611..5210bd7062 100644
--- a/src/app/info/info-routing-paths.ts
+++ b/src/app/info/info-routing-paths.ts
@@ -3,6 +3,7 @@ import { getInfoModulePath } from '../app-routing-paths';
 export const END_USER_AGREEMENT_PATH = 'end-user-agreement';
 export const PRIVACY_PATH = 'privacy';
 export const FEEDBACK_PATH = 'feedback';
+export const ACCESSIBILITY_SETTINGS_PATH = 'accessibility';
 
 export function getEndUserAgreementPath() {
     return getSubPath(END_USER_AGREEMENT_PATH);
@@ -16,6 +17,10 @@ export function getFeedbackPath() {
     return getSubPath(FEEDBACK_PATH);
 }
 
+export function getAccessibilitySettingsPath() {
+    return getSubPath(ACCESSIBILITY_SETTINGS_PATH);
+}
+
 function getSubPath(path: string) {
     return `${getInfoModulePath()}/${path}`;
 }
diff --git a/src/app/info/info-routing.module.ts b/src/app/info/info-routing.module.ts
index 4c497461e7..45079ba498 100644
--- a/src/app/info/info-routing.module.ts
+++ b/src/app/info/info-routing.module.ts
@@ -1,12 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { PRIVACY_PATH, END_USER_AGREEMENT_PATH, FEEDBACK_PATH } from './info-routing-paths';
+import {
+  PRIVACY_PATH,
+  END_USER_AGREEMENT_PATH,
+  FEEDBACK_PATH,
+  ACCESSIBILITY_SETTINGS_PATH
+} from './info-routing-paths';
 import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
 import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
 import { FeedbackGuard } from '../core/feedback/feedback.guard';
 import { environment } from '../../environments/environment';
+import { AccessibilitySettingsComponent } from './accessibility-settings/accessibility-settings.component';
 
 
 const imports = [
@@ -17,7 +23,13 @@ const imports = [
       resolve: { breadcrumb: I18nBreadcrumbResolver },
       data: { title: 'info.feedback.title', breadcrumbKey: 'info.feedback' },
       canActivate: [FeedbackGuard]
-    }
+    },
+    {
+      path: ACCESSIBILITY_SETTINGS_PATH,
+      component: AccessibilitySettingsComponent,
+      resolve: { breadcrumb: I18nBreadcrumbResolver },
+      data: { title: 'info.accessibility-settings.title', breadcrumbKey: 'info.accessibility-settings' },
+    },
   ])
 ];
 
diff --git a/src/app/info/info.module.ts b/src/app/info/info.module.ts
index ccc4af0a7d..d01ded1af0 100644
--- a/src/app/info/info.module.ts
+++ b/src/app/info/info.module.ts
@@ -13,6 +13,7 @@ import { FeedbackFormComponent } from './feedback/feedback-form/feedback-form.co
 import { ThemedFeedbackFormComponent } from './feedback/feedback-form/themed-feedback-form.component';
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
 import { FeedbackGuard } from '../core/feedback/feedback.guard';
+import { AccessibilitySettingsComponent } from './accessibility-settings/accessibility-settings.component';
 
 
 const DECLARATIONS = [
@@ -25,7 +26,8 @@ const DECLARATIONS = [
   FeedbackComponent,
   FeedbackFormComponent,
   ThemedFeedbackFormComponent,
-  ThemedFeedbackComponent
+  ThemedFeedbackComponent,
+  AccessibilitySettingsComponent,
 ];
 
 @NgModule({
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6c91bae4c1..1316c8d3cf 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1618,6 +1618,8 @@
 
   "footer.copyright": "copyright © 2002-{{ year }}",
 
+  "footer.link.accessibility": "Accessibility settings",
+
   "footer.link.dspace": "DSpace software",
 
   "footer.link.lyrasis": "LYRASIS",
@@ -1840,6 +1842,24 @@
 
   "home.top-level-communities.help": "Select a community to browse its collections.",
 
+  "info.accessibility-settings.breadcrumbs": "Accessibility settings",
+
+  "info.accessibility-settings.liveRegionTimeOut.label": "Live region time-out",
+
+  "info.accessibility-settings.liveRegionTimeOut.hint": "The duration in milliseconds after which a message in the live region disappears.",
+
+  "info.accessibility-settings.notificationTimeOut.label": "Notification time-out",
+
+  "info.accessibility-settings.notificationTimeOut.hint": "The duration in milliseconds after which a notification disappears. Set to 0 for notifications to remain indefinitely.",
+
+  "info.accessibility-settings.save-notification.cookie": "Successfully saved settings locally.",
+
+  "info.accessibility-settings.save-notification.metadata": "Successfully saved settings on the user profile.",
+
+  "info.accessibility-settings.submit": "Save accessibility settings",
+
+  "info.accessibility-settings.title": "Accessibility settings",
+
   "info.end-user-agreement.accept": "I have read and I agree to the End User Agreement",
 
   "info.end-user-agreement.accept.error": "An error occurred accepting the End User Agreement",