feat(datepicker): indicate selected day in aria label

fixes VPAT-3637

PR Type
Feature - Accessibility

What is the current behavior?
The currently selected date is not indicated to screen reader users.

What is the new behavior?
The aria-label of the day is now showing the word "Selected".

Does this PR introduce a breaking change?
No.

projects/angular/clarity.api.md

@@ -942,6 +942,8 @@ export interface ClrCommonStrings {
     // (undocumented)
     datepickerPreviousMonth: string;
     // (undocumented)
+    datepickerSelectedLabel: string;
+    // (undocumented)
     datepickerSelectMonthText: string;
     // (undocumented)
     datepickerSelectYearText: string;
@@ -2061,9 +2063,9 @@ export class ClrDatepickerViewManager {
 
 // @public (undocumented)
 export class ClrDay {
-    constructor(_dateNavigationService: DateNavigationService, _toggleService: ClrPopoverToggleService, dateFormControlService: DateFormControlService);
+    constructor(_dateNavigationService: DateNavigationService, _toggleService: ClrPopoverToggleService, dateFormControlService: DateFormControlService, commonStrings: ClrCommonStringsService);
     // (undocumented)
-    dayString: string;
+    get dayString(): string;
     // Warning: (ae-forgotten-export) The symbol "DayViewModel" needs to be exported by the entry point index.d.ts
     set dayView(day: DayViewModel);
     // (undocumented)

projects/angular/src/forms/datepicker/day.spec.ts

@@ -142,6 +142,16 @@ export default function () {
         expect(dayBtn.attributes['aria-label'].value).toEqual(dvm.dayModel.toDateString());
       });
 
+      it('sets the correct value for the aria-label attribute when the date is selected', () => {
+        const dayBtn: HTMLButtonElement = context.clarityElement.children[0];
+        const dvm: DayViewModel = context.clarityDirective.dayView;
+
+        context.testComponent.dayView.isSelected = true;
+
+        context.detectChanges();
+        expect(dayBtn.attributes['aria-label'].value).toEqual(`${dvm.dayModel.toDateString()} - Selected`);
+      });
+
       it('sets aria-selected when the date is selected', () => {
         const button: HTMLButtonElement = context.clarityElement.children[0];
         expect(button.attributes['aria-selected'].value).toBe('false');

projects/angular/src/forms/datepicker/day.ts

@@ -6,6 +6,7 @@
 
 import { Component, Input } from '@angular/core';
 
+import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { DayViewModel } from './model/day-view.model';
 import { DayModel } from './model/day.model';
@@ -36,12 +37,12 @@ import { DateNavigationService } from './providers/date-navigation.service';
 })
 export class ClrDay {
   private _dayView: DayViewModel;
-  public dayString: string;
 
   constructor(
     private _dateNavigationService: DateNavigationService,
     private _toggleService: ClrPopoverToggleService,
-    private dateFormControlService: DateFormControlService
+    private dateFormControlService: DateFormControlService,
+    private commonStrings: ClrCommonStringsService
   ) {}
 
   /**
@@ -51,13 +52,20 @@ export class ClrDay {
   @Input('clrDayView')
   public set dayView(day: DayViewModel) {
     this._dayView = day;
-    this.dayString = this._dayView.dayModel.toDateString();
   }
 
   public get dayView(): DayViewModel {
     return this._dayView;
   }
 
+  public get dayString(): string {
+    return this.dayView.isSelected
+      ? this.commonStrings.parse(this.commonStrings.keys.datepickerSelectedLabel, {
+          FULL_DATE: this._dayView.dayModel.toDateString(),
+        })
+      : this._dayView.dayModel.toDateString();
+  }
+
   /**
    * Updates the focusedDay in the DateNavigationService when the ClrDay is focused.
    */

projects/angular/src/utils/i18n/common-strings.default.ts

@@ -68,6 +68,7 @@ export const commonStringsDefault: ClrCommonStrings = {
   datepickerCurrentDecade: 'Current decade',
   datepickerSelectMonthText: 'Select month, the current month is {CALENDAR_MONTH}',
   datepickerSelectYearText: 'Select year, the current year is {CALENDAR_YEAR}',
+  datepickerSelectedLabel: '{FULL_DATE} - Selected',
   // Stack View
   stackViewChanged: 'Value changed.',
   // Responsive Nav

projects/angular/src/utils/i18n/common-strings.interface.ts

@@ -218,6 +218,7 @@ export interface ClrCommonStrings {
   datepickerCurrentDecade: string;
   datepickerSelectMonthText: string;
   datepickerSelectYearText: string;
+  datepickerSelectedLabel: string;
   /**
    * Stack View: Record has changed
    */