119602: Add Accessibility Settings page

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>

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>

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));
+    });
+  }
+
+}

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}`;
 }

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' },
+    },
   ])
 ];
 

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({

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",