use Material focus trap, escape tab key navigation

blackbaud · Jan 30, 2024 · ccb9f2a · ccb9f2a
1 parent 117e11e
commit ccb9f2a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker-calendar-inner.component.ts b/libs/components/datetime/src/lib/modules/datepicker/datepicker-calendar-inner.component.ts
@@ -262,13 +262,12 @@ export class SkyDatepickerCalendarInnerComponent
     // const key = this.keys[event.which];
     const key = event.key?.toLowerCase();
 
-    if (!key || event.shiftKey /* || event.altKey */) {
+    if (!key || key === 'tab' || event.shiftKey /* || event.altKey */) {
       return;
     }
-    if (key !== 'tab') {
-      event.preventDefault();
-      event.stopPropagation();
-    }
+
+    event.preventDefault();
+    event.stopPropagation();
 
     if (key === 'enter' || key === 'space' || key === ' ') {
       if (this.isDisabled(this.activeDate)) {

diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker-calendar.component.html b/libs/components/datetime/src/lib/modules/datepicker/datepicker-calendar.component.html
@@ -8,7 +8,7 @@
     (calendarModeChange)="onCalendarModeChange($event)"
     (selectedDateChange)="onSelectedDateChange($event)"
   >
-    <div tabindex="0" (keydown)="datepicker?.onKeydown($event)">
+    <div autofocus tabindex="0" (keydown)="datepicker?.onKeydown($event)">
       <sky-daypicker
         *ngIf="datepicker?.datepickerMode === 'day'"
         [customDates]="customDates"

diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.html b/libs/components/datetime/src/lib/modules/datepicker/datepicker.component.html
@@ -51,6 +51,7 @@
     #calendarRef
   >
     <sky-datepicker-calendar
+      cdkTrapFocus
       [customDates]="customDates"
       [isDaypickerWaiting]="isDaypickerWaiting"
       [maxDate]="maxDate"

diff --git a/libs/components/datetime/src/lib/modules/datepicker/datepicker.module.ts b/libs/components/datetime/src/lib/modules/datepicker/datepicker.module.ts
@@ -1,3 +1,4 @@
+import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -34,6 +35,7 @@ import { SkyYearPickerComponent } from './yearpicker.component';
     SkyDayPickerButtonComponent,
   ],
   imports: [
+    A11yModule,
     CommonModule,
     FormsModule,
     SkyIconModule,