test: improve tests

src/__tests__/date-picker/app-date-picker.test.ts

@@ -310,6 +310,7 @@ describe(appDatePickerName, () => {
 
   it('selects new date', async () => {
     const testValue = '2020-02-02';
+    const testValueDate = new Date(testValue);
     const el = await fixture<AppDatePicker>(
       html`<app-date-picker
         .max=${'2020-03-03'}
@@ -318,6 +319,9 @@ describe(appDatePickerName, () => {
       ></app-date-picker>`
     );
 
+    expect(el.valueAsDate).deep.equal(testValueDate);
+    expect(el.valueAsNumber).equal(+testValueDate);
+
     const newSelectedDate = new Date(
       new Date(testValue).setUTCDate(15)
     );
@@ -347,20 +351,21 @@ describe(appDatePickerName, () => {
     const selectedDate = calendar?.query<HTMLTableCellElement>(
       elementSelectors.selectedCalendarDay
     );
-
-    expect(selectedDate).exist;
-    expect(selectedDate?.getAttribute('aria-label')).equal(
-      newSelectedDateLabel
-    );
-    expect(selectedDate?.fullDate).deep.equal(newSelectedDate);
-
     const expectedDateUpdatedEvent: CustomEventDetail['date-updated']['detail'] = {
       isKeypress: false,
       value: toDateString(newSelectedDate),
       valueAsDate: newSelectedDate,
       valueAsNumber: +newSelectedDate,
     };
 
+    expect(el.valueAsDate).deep.equal(newSelectedDate);
+    expect(el.valueAsNumber).equal(+newSelectedDate);
+
+    expect(selectedDate).exist;
+    expect(selectedDate?.getAttribute('aria-label')).equal(
+      newSelectedDateLabel
+    );
+    expect(selectedDate?.fullDate).deep.equal(newSelectedDate);
     expect(dateUpdatedEvent.detail).deep.equal(expectedDateUpdatedEvent);
   });
 

src/__tests__/month-calendar/app-month-calendar.test.ts

@@ -16,6 +16,7 @@ import { appMonthCalendarName } from '../../month-calendar/constants';
 import type { MonthCalendarData } from '../../month-calendar/typings';
 import type { CustomEventDetail, InferredFromSet } from '../../typings';
 import { messageFormatter } from '../test-utils/message-formatter';
+import { queryDeepActiveElement } from '../test-utils/query-deep-active-element';
 
 describe(appMonthCalendarName, () => {
   const locale = 'en-US';
@@ -55,14 +56,14 @@ describe(appMonthCalendarName, () => {
   };
   const elementSelectors = {
     calendarCaption: '.calendar-caption',
-    calendarTable: '.calendar-table',
-    monthCalendar: '.month-calendar',
     calendarDay: 'td.calendar-day',
-    tabbableCalendarDay: 'td.calendar-day[tabindex="0"]',
-    selectedCalendarDay: 'td.calendar-day[aria-selected="true"]',
-    disabledCalendarDay: 'td.calendar-day[aria-disabled="true"]',
     calendarDayWeekNumber: 'th.calendar-day.week-number',
+    calendarTable: '.calendar-table',
+    disabledCalendarDay: 'td.calendar-day[aria-disabled="true"]',
     hiddenCalendarDay: 'td.calendar-day[aria-hidden="true"]',
+    monthCalendar: '.month-calendar',
+    selectedCalendarDay: 'td.calendar-day[aria-selected="true"]',
+    tabbableCalendarDay: 'td.calendar-day[tabindex="0"]',
   } as const;
 
   type A = [string, MonthCalendarData | undefined, boolean];
@@ -163,7 +164,7 @@ describe(appMonthCalendarName, () => {
   type A3 = [
     'click' | 'keydown',
     (Partial<Record<
-      'down' | 'press',
+      'down' | 'up' | 'press',
       InferredFromSet<typeof confirmKeySet> | InferredFromSet<typeof navigationKeySetGrid>
     >>)[],
     Date
@@ -174,13 +175,15 @@ describe(appMonthCalendarName, () => {
       'keydown',
       [
         { down: 'ArrowDown' },
+        { up: 'ArrowDown' },
       ],
       data.date,
     ],
     [
       'keydown',
       [
         { down: 'ArrowDown' },
+        { up: 'ArrowDown' },
         { press: ' ' },
       ],
       data.date,
@@ -189,6 +192,7 @@ describe(appMonthCalendarName, () => {
       'keydown',
       [
         { down: 'ArrowDown' },
+        { up: 'ArrowDown' },
         { press: 'Enter' },
       ],
       data.date,
@@ -260,6 +264,39 @@ describe(appMonthCalendarName, () => {
     );
   });
 
+  it(
+    'tabs new element',
+    async () => {
+      const el = await fixture<AppMonthCalendar>(
+        html`<app-month-calendar .data=${data}></app-month-calendar>`
+      );
+
+      const calendarTable = el.query<HTMLTableElement>(elementSelectors.calendarTable);
+
+      expect(calendarTable).exist;
+
+      calendarTable?.focus();
+
+      let activeElement = queryDeepActiveElement();
+
+      expect(activeElement?.isEqualNode(calendarTable)).true;
+
+      await sendKeys({ down: 'Tab' } as SendKeysPayload);
+      await sendKeys({ up: 'Tab' } as SendKeysPayload);
+
+      activeElement = queryDeepActiveElement();
+
+      const selectedDate = el.query<HTMLTableCellElement>(
+        `${elementSelectors.calendarDay}[aria-label="${
+          formatters.fullDateFormat(calendarInit.date)
+        }"]`
+      );
+
+      expect(activeElement).exist;
+      expect(activeElement?.isEqualNode(selectedDate)).true;
+    }
+  );
+
   type A4 = [Partial<MonthCalendarData>, string];
   const cases4: A4[] = [
     [{}, elementSelectors.calendarTable],

src/__tests__/test-utils/query-deep-active-element.ts

@@ -0,0 +1,14 @@
+export function queryDeepActiveElement(
+): HTMLElement | null {
+  let element = document.activeElement as HTMLElement | null;
+
+  while (element?.shadowRoot) {
+    const shadowElement = element.shadowRoot.activeElement as HTMLElement | null;
+
+    if (shadowElement) {
+      element = shadowElement;
+    }
+  }
+
+  return element;
+}

src/month-calendar/month-calendar.ts

@@ -123,6 +123,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
         class=calendar-table
         part=table
         role=grid
+        tabindex=-1
       >
         ${
           showCaption && secondMonthSecondCalendarDayFullDate ? html`
@@ -192,7 +193,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
       `;
     }
 
-    return html`<div class="month-calendar" part="calendar">${calendarContent}</div>`;
+    return html`<div class=month-calendar part=calendar>${calendarContent}</div>`;
   }
 
   protected $renderCalendarDay({