From e2e47572e8c766c00fc28b00f3e517272e102a72 Mon Sep 17 00:00:00 2001
From: caebr <asti@puzzle.ch>
Date: Thu, 27 Jul 2023 16:00:45 +0200
Subject: [PATCH] Improve ux and a11y #580

* Prevent focus from being cropped at the left #580
* Add alt text for timetable navigation buttons #580
* Translate alt text #580
* Wrap notification icon in button to make it accessible #580
---
 .../dashboard-action/dashboard-action.component.scss      | 5 +++++
 .../dashboard-timetable.component.html                    | 2 ++
 .../my-notifications-show.component.html                  | 8 +++++---
 .../my-profile-show/my-profile-show.component.html        | 2 +-
 src/assets/locales/de-CH.json                             | 2 ++
 src/assets/locales/fr-CH.json                             | 2 ++
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/components/dashboard-action/dashboard-action.component.scss b/src/app/dashboard/components/dashboard-action/dashboard-action.component.scss
index a6c2a1bb5..f26267311 100644
--- a/src/app/dashboard/components/dashboard-action/dashboard-action.component.scss
+++ b/src/app/dashboard/components/dashboard-action/dashboard-action.component.scss
@@ -15,6 +15,11 @@ a:hover {
   background: $sand-hover;
 }
 
+a:focus-visible {
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
 div {
   display: flex;
   justify-content: space-between;
diff --git a/src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.html b/src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.html
index 1ba7df927..1dfc0cb73 100644
--- a/src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.html
+++ b/src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.html
@@ -4,6 +4,7 @@
   </button>
   <button
     type="button"
+    [attr.aria-label]="'dashboard.timetable.previousDay' | translate"
     class="btn btn-secondary previous-day"
     (click)="gotoPreviousDay()"
   >
@@ -11,6 +12,7 @@
   </button>
   <button
     type="button"
+    [attr.aria-label]="'dashboard.timetable.nextDay' | translate"
     class="btn btn-secondary next-day"
     (click)="gotoNextDay()"
   >
diff --git a/src/app/my-notifications/components/my-notifications-show/my-notifications-show.component.html b/src/app/my-notifications/components/my-notifications-show/my-notifications-show.component.html
index c78238eff..5eb0d6e45 100644
--- a/src/app/my-notifications/components/my-notifications-show/my-notifications-show.component.html
+++ b/src/app/my-notifications/components/my-notifications-show/my-notifications-show.component.html
@@ -6,10 +6,12 @@
     isAuthenticated: (isAuthenticated$ | async)
   } as data"
 >
-  <div
+  <button
+    type="button"
+    [attr.aria-label]="'my-notifications.title' | translate"
     (click)="toggleNotificationsPopup()"
     id="notifications-button"
-    class="btn notifications-button p-0 m-0"
+    class="btn btn-link notifications-button p-0 m-0"
   >
     <span
       class="notifications-bell"
@@ -40,7 +42,7 @@
       "
       >{{ data.notificationsCount }}</span
     >
-  </div>
+  </button>
   <div
     class="notifications-popup border"
     id="notifications-popup"
diff --git a/src/app/my-profile/components/my-profile-show/my-profile-show.component.html b/src/app/my-profile/components/my-profile-show/my-profile-show.component.html
index 362ae8730..1037217e8 100644
--- a/src/app/my-profile/components/my-profile-show/my-profile-show.component.html
+++ b/src/app/my-profile/components/my-profile-show/my-profile-show.component.html
@@ -71,7 +71,7 @@ <h1>{{ 'my-profile.title' | translate }}</h1>
               <a
                 class="btn btn-primary btn-icon float-end me-2"
                 routerLink="edit"
-                aria-label="edit"
+                [attr.aria-label]="'my-profile.edit.title' | translate"
               >
                 <i class="material-icons">edit</i>
               </a>
diff --git a/src/assets/locales/de-CH.json b/src/assets/locales/de-CH.json
index 535fc51cd..bdc7c8e4d 100644
--- a/src/assets/locales/de-CH.json
+++ b/src/assets/locales/de-CH.json
@@ -57,6 +57,8 @@
       "title": "Stundenplan",
       "no-entries": "Am gewählten Tag sind keine Stundenplaneinträge vorhanden.",
       "today": "Heute",
+      "nextDay": "nächster Tag",
+      "previousDay": "vorheriger Tag",
       "subscribe-calendar": "Kalender abonnieren",
       "table": {
         "time": "Zeit",
diff --git a/src/assets/locales/fr-CH.json b/src/assets/locales/fr-CH.json
index 0b46ec87f..8fa916109 100644
--- a/src/assets/locales/fr-CH.json
+++ b/src/assets/locales/fr-CH.json
@@ -57,6 +57,8 @@
       "title": "Horaire",
       "no-entries": "Aucune entrée d'horaire n'est disponible à la date sélectionnée.",
       "today": "Aujourd'hui",
+      "nextDay": "jour suivant",
+      "previousDay": "jour précédent",
       "subscribe-calendar": "S'abonner au calendrier",
       "table": {
         "time": "Heure",