fix: Fix tabindex does not update accordingly with focused date

src/datepicker.ts

@@ -828,18 +828,20 @@ export class Datepicker extends LitElement {
 
       const calendarAriaId = `calendarcaption${ci}`;
       const midCalendarFullDate = calendar[1][1].fullDate;
-      const $newFocusedDate: Date = ci === 1 ?
-        computeNextFocusedDate({
-          disabledDaysSet,
-          disabledDatesSet,
-          hasAltKey: false,
-          keyCode: KEY_CODES_MAP.HOME,
-          focusedDate: $focusedDate,
-          selectedDate: $selectedDate,
-          minTime: +$min,
-          maxTime: +$max,
-        }) :
-        new Date('lol');
+      const isMidCalendar = ci === 1;
+      const $newFocusedDate: Date =
+        isMidCalendar && !this._isInVisibleMonth($focusedDate, $selectedDate) ?
+          computeNextFocusedDate({
+            disabledDaysSet,
+            disabledDatesSet,
+            hasAltKey: false,
+            keyCode: KEY_CODES_MAP.HOME,
+            focusedDate: $focusedDate,
+            selectedDate: $selectedDate,
+            minTime: +$min,
+            maxTime: +$max,
+          }) :
+          $focusedDate;
 
       return html`
       <div class="calendar-container" part="calendar">
@@ -879,12 +881,11 @@ export class Datepicker extends LitElement {
 
                   const curTime = +new Date(fullDate!);
                   const isCurrentDate = +$focusedDate === curTime;
-                  const shouldTab = ci === 1 && $newFocusedDate ?
-                    $newFocusedDate.getUTCDate() === Number(value) :
-                    false;
+                  const shouldTab = isMidCalendar && $newFocusedDate.getUTCDate() === Number(value);
 
                   return html`
                   <td
+                    tabindex="${shouldTab ? '0' : '-1'}"
                     class="${classMap({
                       'full-calendar__day': true,
                       'day--disabled': disabled,
@@ -893,7 +894,6 @@ export class Datepicker extends LitElement {
                     })}"
                     part="calendar-day"
                     role="gridcell"
-                    tabindex="${shouldTab ? '0' : '-1'}"
                     aria-disabled="${disabled ? 'true' : 'false'}"
                     aria-label="${label}"
                     aria-selected="${isCurrentDate ? 'true' : 'false'}"

src/tests/app-datepicker/keyboards.spec.ts

@@ -8,6 +8,7 @@ import { interaction } from '../helpers/interaction.js';
 import { prettyHtml } from '../helpers/pretty-html.js';
 import { toSelector } from '../helpers/to-selector.js';
 import {
+  deepStrictEqual,
   strictEqual,
 } from '../helpers/typed-assert.js';
 
@@ -583,4 +584,48 @@ describe('keyboards', () => {
     `);
   });
 
+  it(`updates 'tabindex' on all affected dates (ArrowLeft)`, async () => {
+    const focusedDateSelector = toSelector('.day--focused');
+    const getFocusedDate = (s: string): Promise<string> =>
+      browser.executeAsync(async (a, b, done) => {
+        const n = document.body.querySelector<Datepicker>(a)!;
+
+        done(n.shadowRoot?.querySelector<HTMLTableCellElement>(b)?.outerHTML ?? '');
+      }, DATEPICKER_NAME, s);
+
+    const initialFocusedDateContent = await getFocusedDate(focusedDateSelector);
+
+    await focusCalendarsContainer();
+    await browserKeys(KEY_CODES_MAP.ARROW_LEFT);
+
+    const [
+      oldFocusedDateContent,
+      newFocusedDateContent,
+    ]: [string, string] = await Promise.all([
+      getFocusedDate(toSelector(`[aria-label="Feb 20, 2020"]`)),
+      getFocusedDate(focusedDateSelector),
+    ]);
+
+    deepStrictEqual(
+      [
+        initialFocusedDateContent,
+        oldFocusedDateContent,
+      ].map(n => cleanHtml(n, { showTabindex: true })),
+      ['0', '-1'].map((n) => {
+        const isTab = '0' === n;
+
+        return prettyHtml(`
+        <td tabindex="${n}" class="full-calendar__day${isTab ? ' day--focused' : ''}" aria-disabled="false" aria-label="Feb 20, 2020" aria-selected="${isTab ? 'true' : 'false'}">
+          <div class="calendar-day">20</div>
+        </td>
+        `);
+      })
+    );
+    strictEqual(cleanHtml(newFocusedDateContent, { showTabindex: true }), prettyHtml`
+    <td tabindex="0" class="full-calendar__day day--focused" aria-disabled="false" aria-label="Feb 19, 2020" aria-selected="true">
+      <div class="calendar-day">19</div>
+    </td>
+    `);
+  });
+
 });