138319: Fixed small accessibility issues

- Links with different destinations: the breadcrumbs & the header logo both point to the Home page but used different links
- The accessibility settings page didn't have a h1 & didn't link its labels & input fields correctly
- Add missing autocomplete attribute to feedback form & remove title on inputs
- Disabled autocomplete on search navbar

Author: alexandrevryghem

src/app/breadcrumbs/breadcrumbs.component.html

@@ -3,7 +3,7 @@
     <nav aria-label="breadcrumb" class="nav-breadcrumb">
       <ol class="container breadcrumb my-0">
         <ng-container
-        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
+        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/home'}"></ng-container>
         @for (bc of breadcrumbs; track bc; let last = $last) {
           <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
         }

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -1,14 +1,14 @@
 <div class="container">
-  <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
+  <h1>{{ 'info.accessibility-settings.title' | translate }}</h1>
 
   <form>
     <div class="form-group row">
-      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
+      <span aria-hidden="true" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
-      </label>
+      </span>
 
       <div class="col-sm-4">
-        <ui-switch [id]="'disableNotificationTimeOutInput'"
+        <ui-switch [ariaLabel]="'info.accessibility-settings.disableNotificationTimeOut.label' | translate"
                    [(ngModel)]="formValues.notificationTimeOutEnabled"
                    [ngModelOptions]="{ standalone: true }"
         ></ui-switch>
@@ -33,8 +33,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
           [ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues)}"
           [min]="1"
           [readOnly]="!formValues.notificationTimeOutEnabled"
-          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'notificationTimeOutHint'">
+          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('notificationTimeOut', formValues) }">
           {{ 'info.accessibility-settings.notificationTimeOut.invalid' | translate }}
         </div>
@@ -59,8 +58,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
         <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
           [ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues)}"
           [min]="1"
-          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'liveRegionTimeOutHint'">
+          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues) }">
           {{ 'info.accessibility-settings.liveRegionTimeOut.invalid' | translate }}
         </div>

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -6,7 +6,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
-          <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
+          <input autocomplete="email" id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
         </div>
       </div>
@@ -27,7 +27,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
-          <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
+          <textarea autocomplete="off" id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
         </div>
       </div>
 
@@ -44,7 +44,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-labe" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
-          <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
+          <input autocomplete="off" id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
         </div>
       </div>

src/app/search-navbar/search-navbar.component.html

@@ -1,8 +1,9 @@
-<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
+             autocomplete="off"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p1"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"