fix(Calendar): handle keyboard navigation with disabled dates (#1757)

epr3 · web-flow · commit d7d88b57bddf · 2025-03-26T21:45:35.000+08:00
diff --git a/packages/core/src/Calendar/Calendar.test.ts b/packages/core/src/Calendar/Calendar.test.ts
@@ -520,7 +520,7 @@ describe('calendar', async () => {
     const { getByTestId, user } = setup({
       calendarProps: {
         placeholder: calendarDate,
-        isDateUnavailable: (date) => {
+        isDateUnavailable: (date: DateValue) => {
           return date.day === 3
         },
       },
@@ -534,6 +534,43 @@ describe('calendar', async () => {
     expect(thirdDayInMonth).not.toHaveAttribute('data-selected')
   })
 
+  it('handles disabled dates appropriately', async () => {
+    const { getByTestId, user } = setup({
+      calendarProps: {
+        placeholder: calendarDate,
+        isDateDisabled: (date: DateValue) => {
+          return date.day === 3
+        },
+      },
+    })
+
+    const thirdDayInMonth = getByTestId('date-1-3')
+    expect(thirdDayInMonth).toHaveTextContent('3')
+    expect(thirdDayInMonth).toHaveAttribute('data-disabled')
+    expect(thirdDayInMonth).toHaveAttribute('aria-disabled', 'true')
+    await user.click(thirdDayInMonth)
+    expect(thirdDayInMonth).not.toHaveFocus()
+
+    const secondDayInMonth = getByTestId('date-1-2')
+    secondDayInMonth.focus()
+
+    expect(secondDayInMonth).toHaveFocus()
+    await user.keyboard(kbd.ARROW_RIGHT)
+    expect(getByTestId('date-1-4')).toHaveFocus()
+    await user.keyboard(kbd.ARROW_LEFT)
+    expect(secondDayInMonth).toHaveFocus()
+
+    const tenthDayOfMonth = getByTestId('date-1-10')
+    tenthDayOfMonth.focus()
+    expect(tenthDayOfMonth).toHaveFocus()
+
+    await user.keyboard(kbd.ARROW_UP)
+    expect(getByTestId('date-12-27')).toHaveFocus()
+
+    await user.keyboard(kbd.ARROW_DOWN)
+    expect(getByTestId('date-1-10')).toHaveFocus()
+  })
+
   it('doesnt allow focus or interaction when `disabled` is `true`', async () => {
     const { getByTestId, user } = setup({
       calendarProps: {
diff --git a/packages/core/src/Calendar/CalendarCellTrigger.vue b/packages/core/src/Calendar/CalendarCellTrigger.vue
@@ -10,6 +10,7 @@ import {
 import { computed, nextTick } from 'vue'
 import { useKbd } from '@/shared'
 import { getDaysInMonth, toDate } from '@/date'
+import { getSelectableCells } from './utils'
 
 export interface CalendarCellTriggerProps extends PrimitiveProps {
   /** The date value provided to the cell trigger */
@@ -83,9 +84,6 @@ const isFocusedDate = computed(() => {
 })
 const isSelectedDate = computed(() => rootContext.isDateSelected(props.day))
 
-const SELECTOR
-  = '[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])'
-
 function changeDate(date: DateValue) {
   if (rootContext.readonly.value)
     return
@@ -103,82 +101,105 @@ function handleArrowKey(e: KeyboardEvent) {
   e.preventDefault()
   e.stopPropagation()
   const parentElement = rootContext.parentElement.value!
-  const allCollectionItems: HTMLElement[] = parentElement
-    ? Array.from(parentElement.querySelectorAll(SELECTOR))
-    : []
-  const index = allCollectionItems.indexOf(currentElement.value)
-  let newIndex = index
   const indexIncrementation = 7
   const sign = rootContext.dir.value === 'rtl' ? -1 : 1
   switch (e.code) {
     case kbd.ARROW_RIGHT:
-      newIndex += sign
+      shiftFocus(currentElement.value, sign)
       break
     case kbd.ARROW_LEFT:
-      newIndex -= sign
+      shiftFocus(currentElement.value, -sign)
       break
     case kbd.ARROW_UP:
-      newIndex -= indexIncrementation
+      shiftFocus(currentElement.value, -indexIncrementation)
       break
     case kbd.ARROW_DOWN:
-      newIndex += indexIncrementation
+      shiftFocus(currentElement.value, indexIncrementation)
       break
     case kbd.ENTER:
     case kbd.SPACE_CODE:
       changeDate(props.day)
-      return
-    default:
-      return
   }
 
-  if (newIndex >= 0 && newIndex < allCollectionItems.length) {
-    allCollectionItems[newIndex].focus()
-    return
-  }
+  function shiftFocus(node: HTMLElement, add: number) {
+    const allCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
+    if (!allCollectionItems.length)
+      return
+
+    const index = allCollectionItems.indexOf(node)
+    const newIndex = index + add
 
-  if (newIndex < 0) {
-    if (rootContext.isPrevButtonDisabled())
+    if (newIndex >= 0 && newIndex < allCollectionItems.length) {
+      if (allCollectionItems[newIndex].hasAttribute('data-disabled')) {
+        shiftFocus(allCollectionItems[newIndex], add)
+      }
+      allCollectionItems[newIndex].focus()
       return
-    rootContext.prevPage()
-    nextTick(() => {
-      const newCollectionItems: HTMLElement[] = parentElement
-        ? Array.from(parentElement.querySelectorAll(SELECTOR))
-        : []
-      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+    }
+
+    if (newIndex < 0) {
+      if (rootContext.isPrevButtonDisabled())
+        return
+      rootContext.prevPage()
+      nextTick(() => {
+        const newCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
+        if (!newCollectionItems.length)
+          return
+        if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
         // Placeholder is set to first month of the new page
-        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+          const numberOfDays = getDaysInMonth(rootContext.placeholder.value)
+          const computedIndex = numberOfDays - Math.abs(newIndex)
+          if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+            shiftFocus(newCollectionItems[computedIndex], add)
+          }
+          newCollectionItems[
+            computedIndex
+          ].focus()
+          return
+        }
+        const computedIndex = newCollectionItems.length - Math.abs(newIndex)
+        if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+          shiftFocus(newCollectionItems[computedIndex], add)
+        }
         newCollectionItems[
-          numberOfDays - Math.abs(newIndex)
+          computedIndex
         ].focus()
-        return
-      }
-      newCollectionItems[
-        newCollectionItems.length - Math.abs(newIndex)
-      ].focus()
-    })
-    return
-  }
-
-  if (newIndex >= allCollectionItems.length) {
-    if (rootContext.isNextButtonDisabled())
+      })
       return
-    rootContext.nextPage()
-    nextTick(() => {
-      const newCollectionItems: HTMLElement[] = parentElement
-        ? Array.from(parentElement.querySelectorAll(SELECTOR))
-        : []
+    }
 
-      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
-        // Placeholder is set to first month of the new page
-        const numberOfDays = getDaysInMonth(
-          rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),
-        )
-        newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus()
+    if (newIndex >= allCollectionItems.length) {
+      if (rootContext.isNextButtonDisabled())
         return
-      }
+      rootContext.nextPage()
+      nextTick(() => {
+        const newCollectionItems: HTMLElement[] = getSelectableCells(parentElement)
+        if (!newCollectionItems.length)
+          return
 
-      newCollectionItems[newIndex - allCollectionItems.length].focus()
-    })
+        if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+        // Placeholder is set to first month of the new page
+          const numberOfDays = getDaysInMonth(
+            rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),
+          )
+
+          const computedIndex = newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)
+
+          if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+            shiftFocus(newCollectionItems[computedIndex], add)
+          }
+          newCollectionItems[computedIndex].focus()
+          return
+        }
+
+        const computedIndex = newIndex - allCollectionItems.length
+        if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+          shiftFocus(newCollectionItems[computedIndex], add)
+        }
+
+        newCollectionItems[computedIndex].focus()
+      })
+    }
   }
 }
 </script>
diff --git a/packages/core/src/Calendar/utils.ts b/packages/core/src/Calendar/utils.ts
@@ -0,0 +1,5 @@
+export const SELECTOR
+  = '[data-reka-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])'
+export function getSelectableCells(calendar: HTMLElement): HTMLElement[] {
+  return Array.from(calendar.querySelectorAll(SELECTOR)) ?? []
+}
diff --git a/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue b/packages/core/src/RangeCalendar/RangeCalendarCellTrigger.vue
