Bug fixes for DatePicker and Calendar (#2964)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/calendar/index.css

@@ -90,7 +90,7 @@ governing permissions and limitations under the License.
   justify-content: flex-end;
   height: 100%;
 
-  width: var(--spectrum-calendar-day-width);
+  width: 100%;
 
   border-bottom: none !important; /* override abbr styling from normalize.css */
 
@@ -207,6 +207,7 @@ governing permissions and limitations under the License.
         height: 2px;
         transform: rotate(-16deg);
         border-radius: 1px;
+        background: currentColor;
       }
     }
   }

packages/@adobe/spectrum-css-temp/components/calendar/skin.css

@@ -120,9 +120,5 @@ governing permissions and limitations under the License.
     &.is-today {
       --background: transparent;
     }
-
-    & .spectrum-Calendar-dateText span:after {
-      background: var(--spectrum-global-color-gray-600);
-    }
   }
 }

packages/@internationalized/date/src/calendars/BuddhistCalendar.ts

@@ -35,16 +35,22 @@ export class BuddhistCalendar extends GregorianCalendar {
   }
 
   toJulianDay(date: AnyCalendarDate) {
-    return super.toJulianDay(
-      new CalendarDate(
-        date.year + BUDDHIST_ERA_START,
-        date.month,
-        date.day
-      )
-    );
+    return super.toJulianDay(toGregorian(date));
   }
 
   getEras() {
     return ['BE'];
   }
+
+  getDaysInMonth(date: AnyCalendarDate): number {
+    return super.getDaysInMonth(toGregorian(date));
+  }
+}
+
+function toGregorian(date: AnyCalendarDate) {
+  return new CalendarDate(
+    date.year + BUDDHIST_ERA_START,
+    date.month,
+    date.day
+  );
 }

packages/@internationalized/date/src/calendars/JapaneseCalendar.ts

@@ -146,6 +146,10 @@ export class JapaneseCalendar extends GregorianCalendar {
     return years;
   }
 
+  getDaysInMonth(date: AnyCalendarDate): number {
+    return super.getDaysInMonth(toGregorian(date));
+  }
+
   getMinimumMonthInYear(date: AnyCalendarDate): number {
     let start = getMinimums(date);
     return start ? start[1] : 1;

packages/@internationalized/date/src/calendars/TaiwanCalendar.ts

@@ -52,13 +52,7 @@ export class TaiwanCalendar extends GregorianCalendar {
   }
 
   toJulianDay(date: AnyCalendarDate) {
-    return super.toJulianDay(
-      new CalendarDate(
-        gregorianYear(date),
-        date.month,
-        date.day
-      )
-    );
+    return super.toJulianDay(toGregorian(date));
   }
 
   getEras() {
@@ -72,4 +66,16 @@ export class TaiwanCalendar extends GregorianCalendar {
   getYearsToAdd(date: Mutable<AnyCalendarDate>, years: number) {
     return date.era === 'before_minguo' ? -years : years;
   }
+
+  getDaysInMonth(date: AnyCalendarDate): number {
+    return super.getDaysInMonth(toGregorian(date));
+  }
+}
+
+function toGregorian(date: AnyCalendarDate) {
+  return new CalendarDate(
+    gregorianYear(date),
+    date.month,
+    date.day
+  );
 }

packages/@internationalized/date/tests/conversion.test.js

@@ -165,6 +165,14 @@ describe('CalendarDate conversion', function () {
         date = new CalendarDate(2020, 4, 30);
         expect(toCalendar(date, new JapaneseCalendar())).toEqual(new CalendarDate(new JapaneseCalendar(), 'reiwa', 2, 4, 30));
       });
+
+      it('returns the correct number of days for leap and non-leap years', function () {
+        let date = new CalendarDate(new JapaneseCalendar(), 'reiwa', 4, 2, 5);
+        expect(date.calendar.getDaysInMonth(date)).toBe(28);
+
+        date = new CalendarDate(new JapaneseCalendar(), 'reiwa', 2, 2, 5);
+        expect(date.calendar.getDaysInMonth(date)).toBe(29);
+      });
     });
 
     describe('taiwan', function () {

packages/@react-aria/calendar/src/useCalendarGrid.ts

@@ -120,8 +120,8 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
     'aria-labelledby': calendarIds.get(state)
   });
 
-  let dayFormatter = useDateFormatter({weekday: 'narrow'});
-  let dayFormatterLong = useDateFormatter({weekday: 'long'});
+  let dayFormatter = useDateFormatter({weekday: 'narrow', timeZone: state.timeZone});
+  let dayFormatterLong = useDateFormatter({weekday: 'long', timeZone: state.timeZone});
   let {locale} = useLocale();
   let weekStart = startOfWeek(state.visibleRange.start, locale);
   let weekDays = [...new Array(7).keys()].map((index) => {

packages/@react-aria/calendar/src/useRangeCalendar.ts

@@ -53,7 +53,7 @@ export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<
     let target = e.target as HTMLElement;
     let body = document.getElementById(res.calendarProps.id);
     if (
-      (!body.contains(target) || target.getAttribute('role') !== 'button') &&
+      (!body.contains(target) || !target.closest('[role="button"]')) &&
       !document.getElementById(res.nextButtonProps.id)?.contains(target) &&
       !document.getElementById(res.prevButtonProps.id)?.contains(target)
     ) {

packages/@react-aria/calendar/src/utils.ts

@@ -50,12 +50,14 @@ export function useVisibleRangeDescription(startDate: CalendarDate, endDate: Cal
     month: 'long',
     year: 'numeric',
     era: startDate.calendar.identifier !== 'gregory' ? 'long' : undefined,
-    calendar: startDate.calendar.identifier
+    calendar: startDate.calendar.identifier,
+    timeZone
   });
 
   let dateFormatter = useDateFormatter({
     dateStyle: 'long',
-    calendar: startDate.calendar.identifier
+    calendar: startDate.calendar.identifier,
+    timeZone
   });
 
   return useMemo(() => {

packages/@react-aria/datepicker/src/useDateField.ts

@@ -13,7 +13,6 @@
 import {AriaDatePickerProps, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DateFieldState} from '@react-stately/datepicker';
-import {focusManagerSymbol} from './useDateRangePicker';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 import {mergeProps, useDescription} from '@react-aria/utils';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -36,13 +35,19 @@ interface DateFieldAria {
 
 // Data that is passed between useDateField and useDateSegment.
 interface HookData {
+  ariaLabel: string,
   ariaLabelledBy: string,
   ariaDescribedBy: string,
   focusManager: FocusManager
 }
 
 export const hookData = new WeakMap<DateFieldState, HookData>();
 
+// Private props that we pass from useDatePicker/useDateRangePicker.
+// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
+export const roleSymbol = '__role_' + Date.now();
+export const focusManagerSymbol = '__focusManager_' + Date.now();
+
 /**
  * Provides the behavior and accessibility implementation for a date field component.
  * A date field allows users to enter and edit date and time values using a keyboard.
@@ -64,19 +69,41 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
 
   let descProps = useDescription(state.formatValue({month: 'long'}));
 
-  let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-  let describedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
+  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
+  let describedBy = props[roleSymbol] === 'presentation'
+    ? fieldProps['aria-describedby']
+    : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
   let propsFocusManager = props[focusManagerSymbol];
   let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);
 
+  // Pass labels and other information to segments.
   hookData.set(state, {
-    ariaLabelledBy: segmentLabelledBy,
+    ariaLabel: props['aria-label'],
+    ariaLabelledBy: [props['aria-labelledby'], labelProps.id].filter(Boolean).join(' ') || undefined,
     ariaDescribedBy: describedBy,
     focusManager
   });
 
   let autoFocusRef = useRef(props.autoFocus);
 
+  // When used within a date picker or date range picker, the field gets role="presentation"
+  // rather than role="group". Since the date picker/date range picker already has a role="group"
+  // with a label and description, and the segments are already labeled by this as well, this
+  // avoids very verbose duplicate announcements.
+  let fieldDOMProps: HTMLAttributes<HTMLElement>;
+  if (props[roleSymbol] === 'presentation') {
+    fieldDOMProps = {
+      role: 'presentation'
+    };
+  } else {
+    fieldDOMProps = mergeProps(fieldProps, {
+      role: 'group',
+      'aria-disabled': props.isDisabled || undefined,
+      'aria-describedby': describedBy
+    });
+  }
+
   useEffect(() => {
     if (autoFocusRef.current) {
       focusManager.focusFirst();
@@ -91,11 +118,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
         focusManager.focusFirst();
       }
     },
-    fieldProps: mergeProps(fieldProps, descProps, groupProps, focusWithinProps, {
-      role: 'group',
-      'aria-disabled': props.isDisabled || undefined,
-      'aria-describedby': describedBy
-    }),
+    fieldProps: mergeProps(fieldDOMProps, groupProps, focusWithinProps),
     descriptionProps,
     errorMessageProps
   };