enhh/calendar accessibility translations

src/app/features/calendar/calendar.component.html

@@ -6,9 +6,9 @@
       <app-button
         theme="black"
         matButtonType="mat-icon-button"
-        [tooltip]="'Add Event' | translate"
+        [tooltip]="translations.calendar.controls.add_event.title | translate"
         [tooltipDirection]="TooltipDirection.Above"
-        [ariaLabel]="'Add Event'"
+        [ariaLabel]="eventFormActive ? (translations.calendar.controls.add_event.aria_off | translate) : (translations.calendar.controls.add_event.aria_on | translate)"
         [disabled]="loading"
         [clickFunc]="toggleEventForm"
       >
@@ -19,9 +19,9 @@
       <app-button
         theme="black"
         matButtonType="mat-icon-button"
-        [tooltip]="searchActive ? ('Close Search' | translate) : ('Search' | translate)"
+        [tooltip]="searchActive ? (translations.calendar.controls.search.close| translate) : (translations.calendar.controls.search.title | translate)"
         [tooltipDirection]="TooltipDirection.Above"
-        [ariaLabel]="searchActive ? ('Close Search' | translate) : ('Search' | translate)"
+        [ariaLabel]="searchActive ? (translations.calendar.controls.search.aria_close | translate) : (translations.calendar.controls.search.aria_open | translate)"
         [disabled]="loading"
         [clickFunc]="toggleSearch"
       >
@@ -47,12 +47,13 @@
       <!-- Month/Year Select -->
       <div class="date-picker">
         <mat-form-field>
-          <mat-label>{{ 'Select a Month' | translate }}</mat-label>
+          <mat-label>{{ translations.calendar.controls.date_picker.month.title | translate }}</mat-label>
           <mat-select
             [(ngModel)]="selectedMonth"
             (selectionChange)="dateSelectChange()"
             [disabled]="loading"
-            [matTooltip]="'Select a Month' | translate"
+            [matTooltip]="translations.calendar.controls.date_picker.month.title | translate"
+            [ariaLabel]="translations.calendar.controls.date_picker.month.aria | translate"
             [matTooltipPosition]="TooltipDirection.Above"
             disableRipple
           >
@@ -65,12 +66,13 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>{{ 'Select a Year' | translate }}</mat-label>
+          <mat-label>{{ translations.calendar.controls.date_picker.year.title | translate }}</mat-label>
           <mat-select
             [(ngModel)]="selectedYear"
             (selectionChange)="dateSelectChange()"
             [disabled]="loading"
-            [matTooltip]="'Select a Year' | translate"
+            [matTooltip]="translations.calendar.controls.date_picker.year.title | translate"
+            [ariaLabel]="translations.calendar.controls.date_picker.year.aria | translate"
             [matTooltipPosition]="TooltipDirection.Above"
             disableRipple
           >
@@ -162,6 +164,8 @@
     </app-button>
 
     <!-- Cancel -->
-    <app-button theme="secondary-2" [disabled]="loading" [clickFunc]="toggleEventForm"> Cancel </app-button>
+    <app-button theme="secondary-2" [disabled]="loading" [clickFunc]="toggleEventForm">
+      {{ translations.calendar.controls.cancel | translate }}
+    </app-button>
   </div>
 </mat-card>

src/app/features/calendar/components/calendar-events/calendar-events.component.html

@@ -1,9 +1,15 @@
 <mat-card>
   <mat-card-header>
-    <span>{{ isToday(calendarDate.date) ? "Today's Events" : 'Events on ' + (calendarDate.date | localizedDate) }}</span>
+    <span>{{ isToday(calendarDate.date) ? (translations.calendar.events.title.today | translate) : (translations.calendar.events.title.not_today | translate) + (calendarDate.date | localizedDate) }}</span>
 
     <!-- Add Event -->
-    <app-button theme="black" matButtonType="mat-icon-button" [tooltip]="'Add Event' | translate" [ariaLabel]="'Add Event'" (click)="createEvent()">
+    <app-button 
+      theme="black" 
+      matButtonType="mat-icon-button" 
+      [tooltip]="translations.calendar.controls.add_event.title | translate" 
+      [ariaLabel]="translations.calendar.controls.add_event.title | translate" 
+      (click)="createEvent()"
+    >
       <i class="fa-solid fa-calendar-plus fa-lg"></i>
     </app-button>
   </mat-card-header>
@@ -57,7 +63,13 @@
 
         <div class="actions">
           <!-- Edit -->
-          <app-button theme="black" matButtonType="mat-icon-button" [tooltip]="'Edit Event' | translate" [ariaLabel]="'Edit Event' | translate" (click)="editEvent(event)">
+          <app-button 
+            theme="black" 
+            matButtonType="mat-icon-button" 
+            [tooltip]="translations.calendar.events.actions.edit.title | translate" 
+            [ariaLabel]="translations.calendar.events.actions.edit.aria | translate" 
+            (click)="editEvent(event)"
+          >
             <i class="fa-solid fa-pen-to-square"></i>
           </app-button>
 
@@ -66,16 +78,18 @@
             theme="black"
             class="delete-btn"
             matButtonType="mat-icon-button"
-            [tooltip]="'Delete Event' | translate"
-            [ariaLabel]="'Delete Event' | translate"
+            [tooltip]="translations.calendar.events.actions.delete.title | translate"
+            [ariaLabel]="translations.calendar.events.actions.delete.aria | translate"
             (click)="deleteEvent(event)"
           >
             <i class="fa-solid fa-trash-can"></i>
           </app-button>
         </div>
       </div>
     } @empty {
-      <div class="empty">There are no events.</div>
+      <div class="empty">
+        {{ translations.calendar.events.none | translate }}
+      </div>
     }
   </mat-card-content>
 </mat-card>

src/app/features/calendar/components/calendar-events/calendar-events.component.ts

@@ -2,6 +2,9 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, Iterab
 import { ICalendarDate } from '../../interfaces/calendar-date.interface';
 import { Event } from 'src/app/features/events/models/event';
 import { isToday } from 'date-fns';
+import { Translations } from 'src/app/core/services/translations.service';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-calendar-events',
@@ -21,6 +24,7 @@ export class CalendarEventsComponent implements DoCheck {
   private iterableDifferEvents: IterableDiffer<Event>;
 
   constructor(
+    public translations: Translations,
     private iterableDiffers: IterableDiffers,
     private changeDetectorRef: ChangeDetectorRef
   ) {

src/app/features/calendar/components/calendar-search/calendar-search.component.html

@@ -5,12 +5,17 @@
       [name]="'calendarSearch'"
       formControlName="calendarSearch"
       [control]="form.controls['calendarSearch'] | formControl"
-      [label]="''"
-      [placeholder]="'Search My Calendar'"
+      [label]="translations.calendar.search.search_input.label | translate"
+      [placeholder]="translations.calendar.search.search_input.placeholder | translate"
       [required]="false"
     >
     </app-input>
-    <mat-slide-toggle [checked]="showAll" (change)="setShowAll($event)" color="secondary"> Show All </mat-slide-toggle>
+    <mat-slide-toggle [checked]="showAll" 
+                      (change)="setShowAll($event)" 
+                      [ariaLabel]="showAll ? (translations.calendar.search.show_all.aria_off| translate) : (translations.calendar.search.show_all.aria_on| translate)"
+                      color="secondary">
+      {{ translations.calendar.search.show_all.title | translate }}
+    </mat-slide-toggle>
   </form>
   <mat-accordion #accordian="matAccordion">
     @for (event of pagedEvents; track $index) {
@@ -40,12 +45,12 @@
     } @empty {
       <div class="empty">
         @if (search !== '') {
-          There are {{ showAll ? 'no events' : 'no events in ' + (this.date | localizedDate: 'MMMM YYYY' | titlecase) }} that match your search.
+          {{ translations.calendar.search.results.none | translate }}
         } @else {
-          Begin typing to search for events.
+          {{ translations.calendar.search.results.placeholder | translate }}
         }
       </div>
     }
   </mat-accordion>
-  <mat-paginator #paginator="matPaginator" [length]="filteredEvents.length" [pageSize]="5" [pageSizeOptions]="[5, 10]" (page)="pageEvent($event)" aria-label="Select page"> </mat-paginator>
+  <mat-paginator #paginator="matPaginator" [length]="filteredEvents.length" [pageSize]="5" [pageSizeOptions]="[5, 10]" (page)="pageEvent($event)" [ariaLabel]="translations.calendar.paginator.aria | translate"> </mat-paginator>
 </mat-card>

src/app/features/calendar/components/calendar-search/calendar-search.component.scss

@@ -21,6 +21,9 @@
           .mat-mdc-form-field-subscript-wrapper {
             display: none;
           }
+          mat-label {
+            display: none;
+          }
         }
       }
 

src/app/features/calendar/components/calendar-search/calendar-search.component.ts

@@ -70,6 +70,7 @@ export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck {
       this.translatePaginator();
     });
 
+    this.translatePaginator();
     this.onEventsChange();
   }
 
@@ -109,6 +110,7 @@ export class CalendarSearchComponent implements OnInit, OnDestroy, DoCheck {
     const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
     const endIndex = startIndex + pageEvent.pageSize;
     this.pagedEvents = this.filteredEvents.slice(startIndex, endIndex);
+    this.accordion.closeAll();
   }
 
   // TODO: If show all off, only search for the selected month's events

src/assets/i18n/translations.en.ts

@@ -389,31 +389,51 @@ export default {
                 "sun": "Sun"
             }
         },
-        "views": {
-            "day": "Day",
-            "week": "Week",
-            "month": "Month"
-        },
         "controls": {
+            "add_event": {
+                "title": "Add Event",
+                "aria_on": "Click to open the event form to add an event.",
+                "aria_off": "Click to close the event form."
+            },
+            "search": {
+                "title": "Search",
+                "close": "Close Search",
+                "aria_open": "Click to open the search pane.",
+                "aria_close": "Click to close the search pane."
+            },
             "next": {
-                "title_day": "Next day",
-                "title_week": "Next week",
                 "title_month": "Next month",
-                "aria_day": "Click to navigate to the next day.",
-                "aria_week": "Click to navigate to the next week.",
                 "aria_month": "Click to navigate to the next month."
             },
             "previous": {
-                "title_day": "Previous day",
-                "title_week": "Previous week",
                 "title_month": "Previous month",
-                "aria_day": "Click to navigate to the previous day.",
-                "aria_week": "Click to navigate to the previous week.",
                 "aria_month": "Click to navigate to the previous month."
             },
-            "viewBtn": {
-                "title": "Switch View",
-                "aria": "Current view: "
+            "date_picker": {
+                "month": {
+                    "title": "Select a month",
+                    "aria": "Open the month select drop down menu"
+                },
+                "year": {
+                    "title": "Select a year",
+                    "aria": "Open the year select drop down menu"
+                }
+            },
+            "cancel": "Cancel"
+        },
+        "search": {
+            "search_input": {
+                "label": "Search Events",
+                "placeholder": "Search My Calendar"
+            },
+            "show_all": {
+                "title": "Show All",
+                "aria_on": "Toggle to close show all events",
+                "aria_off": "Toggle to show all events"
+            },
+            "results": {
+                "none": "There are no events that match your search.",
+                "placeholder": "Begin typing to search for events."
             }
         },
         "paginator": {
@@ -422,7 +442,25 @@ export default {
             "prev_page": "Previous page",
             "first_page": "First page",
             "last_page": "Last page",
-            "range_label": "{{ start }} - {{ end }} of {{ total }}"
+            "range_label": "{{ start }} - {{ end }} of {{ total }}",
+            "aria": "Select a page"
+        },
+        "events": {
+            "title": {
+                "today": "Today's Events",
+                "not_today": "Events on "
+            },
+            "actions": {
+                "edit": {
+                    "title": "Edit Event",
+                    "aria": "Click to edit the event."
+                },
+                "delete": {
+                    "title": "Delete Event",
+                    "aria": "Click to delete the event."
+                }
+            },
+            "none": "There are no events."
         }
     },
     "duration": {

src/assets/i18n/translations.fr.ts

@@ -390,31 +390,51 @@ const fr: typeof import('./translations.en').default = {
                 "sun": "Dim"
             }
         },
-        "views": {
-            "day": "Jour",
-            "week": "Semaine",
-            "month": "Mois"
-        },
         "controls": {
+            "add_event": {
+                "title": "Ajouter un évènement",
+                "aria_on": "Cliquez pour ouvrir le formulaire d'événement pour ajouter un événement.",
+                "aria_off": "Cliquez pour fermer le formulaire d'événement."
+            },
+            "search": {
+                "title": "Recherche",
+                "close": "Fermer la recherche",
+                "aria_open": "Cliquez pour ouvrir le volet de recherche.",
+                "aria_close": "Cliquez pour fermer le volet de recherche."
+            },
             "next": {
-                "title_day": "Suivant jour",
-                "title_week": "Suivant semaine",
                 "title_month": "Suivant mois",
-                "aria_day": "Cliquez pour accéder au suivant jour.",
-                "aria_week": "Cliquez pour accéder au suivant semaine.",
                 "aria_month": "Cliquez pour accéder au suivant mois."
             },
             "previous": {
-                "title_day": "Précédent jour",
-                "title_week": "Précédent semaine",
                 "title_month": "Précédent mois",
-                "aria_day": "Cliquez pour accéder au précédent jour.",
-                "aria_week": "Cliquez pour accéder au précédent semaine.",
                 "aria_month": "Cliquez pour accéder au précédent mois."
             },
-            "viewBtn": {
-                "title": "Changer de vue",
-                "aria": "Vue actuelle: "
+            "date_picker": {
+                "month": {
+                    "title": "Sélectionnez un mois",
+                    "aria": "Ouvrez le menu déroulant de sélection du mois"
+                },
+                "year": {
+                    "title": "Sélectionnez une année",
+                    "aria": "Ouvrez le menu déroulant de sélection de l'année"
+                }
+            },
+            "cancel": "Annuler"
+        },
+        "search": {
+            "search_input": {
+                "label": "Rechercher des événements",
+                "placeholder": "Rechercher dans mon calendrier"
+            },
+            "show_all": {
+                "title": "Afficher tout",
+                "aria_on": "Basculer pour fermer afficher tous les événements",
+                "aria_off": "Basculer pour afficher tous les événements"
+            },
+            "results": {
+                "none": "Aucun événement ne correspond à votre recherche.",
+                "placeholder": "Commencez à taper pour rechercher des événements."
             }
         },
         "paginator": {
@@ -423,7 +443,25 @@ const fr: typeof import('./translations.en').default = {
             "prev_page": "Page précédente",
             "first_page": "Première page",
             "last_page": "Dernière page",
-            "range_label": "{{ start }} - {{ end }} à {{ total }}"
+            "range_label": "{{ start }} - {{ end }} à {{ total }}",
+            "aria": "Sélectionner une page"
+        },
+        "events": {
+            "title": {
+                "today": "Les événements d'aujourd'hui",
+                "not_today": "Événements sur "
+            },
+            "actions": {
+                "edit": {
+                    "title": "Modifier l'événement",
+                    "aria": "Cliquez pour modifier l'événement."
+                },
+                "delete": {
+                    "title": "Supprimer l'événement",
+                    "aria": "Cliquez pour supprimer l'événement."
+                }
+            },
+            "none": "Il n'y a aucun événement."
         }
     },
     "duration": {