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/src/forms/datepicker/day.spec.ts

@@ -122,12 +122,36 @@ export default function () {
         expect(context.clarityDirective.selectDay).toHaveBeenCalled();
       });
 
+      it('sets arria-current on the button correctly', function () {
+        const button: HTMLButtonElement = context.clarityElement.children[0];
+
+        context.testComponent.dayView.isTodaysDate = true;
+
+        context.detectChanges();
+        expect(button.attributes['aria-current'].value).toBe('date');
+
+        context.testComponent.dayView.isTodaysDate = false;
+
+        context.detectChanges();
+        expect(button.attributes['aria-current'].value).toBe('false');
+      });
+
       it('sets the correct value for the aria-label attribute', () => {
         const dayBtn: HTMLButtonElement = context.clarityElement.children[0];
         const dvm: DayViewModel = context.clarityDirective.dayView;
         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';
@@ -25,7 +26,9 @@ import { DateNavigationService } from './providers/date-navigation.service';
       [attr.tabindex]="dayView.tabIndex"
       (click)="selectDay()"
       (focus)="onDayViewFocus()"
+      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
       [attr.aria-label]="dayString"
+      [attr.aria-current]="dayView.isTodaysDate"
       [attr.aria-selected]="dayView.isSelected"
     >
       {{ dayView.dayModel.date }}
@@ -35,12 +38,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
   ) {}
 
   /**
@@ -50,13 +53,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
    */