feat(datepicker): indicate current day with aria-current

vmware-clarity · Jul 27, 2022 · 388c065 · 388c065
1 parent 282f3f0
commit 388c065
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/projects/angular/src/forms/datepicker/day.spec.ts b/projects/angular/src/forms/datepicker/day.spec.ts
@@ -122,6 +122,20 @@ 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;

diff --git a/projects/angular/src/forms/datepicker/day.ts b/projects/angular/src/forms/datepicker/day.ts
@@ -25,6 +25,7 @@ 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-selected]="dayView.isSelected"
     >