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
bkd-mba-fbi · Jul 27, 2023 · e2e4757 · e2e4757
1 parent d95448a
commit e2e4757
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 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
@@ -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
@@ -4,13 +4,15 @@
   </button>
   <button
     type="button"
+    [attr.aria-label]="'dashboard.timetable.previousDay' | translate"
     class="btn btn-secondary previous-day"
     (click)="gotoPreviousDay()"
   >
     <span class="material-icons">chevron_left</span>
   </button>
   <button
     type="button"
+    [attr.aria-label]="'dashboard.timetable.nextDay' | translate"
     class="btn btn-secondary next-day"
     (click)="gotoNextDay()"
   >

diff --git a/...pp/my-notifications/components/my-notifications-show/my-notifications-show.component.html b/...pp/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
@@ -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
@@ -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
@@ -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",