@react-aria/calendar 3.0.0-nightly.3180 → 3.0.0

package/src/useCalendarBase.ts

@@ -11,22 +11,36 @@
  */
 
 import {announce} from '@react-aria/live-announcer';
-import {CalendarAria} from './types';
-import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
+import {AriaButtonProps} from '@react-types/button';
 import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {DOMProps} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils';
+import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
+import {HTMLAttributes, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
-import {useRef} from 'react';
+
+export interface CalendarAria {
+  /** Props for the calendar grouping element. */
+  calendarProps: HTMLAttributes<HTMLElement>,
+  /** Props for the next button. */
+  nextButtonProps: AriaButtonProps,
+  /** Props for the previous button. */
+  prevButtonProps: AriaButtonProps,
+  /** Props for the error message element, if any. */
+  errorMessageProps: HTMLAttributes<HTMLElement>,
+  /** A description of the visible date range, for use in the calendar title. */
+  title: string
+}
 
 export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarState | RangeCalendarState): CalendarAria {
   let formatMessage = useMessageFormatter(intlMessages);
-  let calendarId = useId(props.id);
+  let domProps = filterDOMProps(props);
 
-  let visibleRangeDescription = useVisibleRangeDescription(state.visibleRange.start, state.visibleRange.end, state.timeZone);
+  let title = useVisibleRangeDescription(state.visibleRange.start, state.visibleRange.end, state.timeZone, false);
+  let visibleRangeDescription = useVisibleRangeDescription(state.visibleRange.start, state.visibleRange.end, state.timeZone, true);
 
   // Announce when the visible date range changes
   useUpdateEffect(() => {
@@ -45,10 +59,15 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
     // handle an update to the caption that describes the currently selected range, to announce the new value
   }, [selectedDateDescription]);
 
-  let descriptionProps = useDescription(visibleRangeDescription);
+  let errorMessageId = useSlotId([Boolean(props.errorMessage), props.validationState]);
 
-  // Label the child grid elements by the group element if it is labelled.
-  calendarIds.set(state, props['aria-label'] || props['aria-labelledby'] ? calendarId : null);
+  // Pass the label to the child grid elements.
+  hookData.set(state, {
+    ariaLabel: props['aria-label'],
+    ariaLabelledBy: props['aria-labelledby'],
+    errorMessageId,
+    selectedDateDescription
+  });
 
   // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
   let nextFocused = useRef(false);
@@ -65,12 +84,16 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
     state.setFocused(true);
   }
 
+  let labelProps = useLabels({
+    id: props['id'],
+    'aria-label': [props['aria-label'], visibleRangeDescription].filter(Boolean).join(', '),
+    'aria-labelledby': props['aria-labelledby']
+  });
+
   return {
-    calendarProps: mergeProps(descriptionProps, {
+    calendarProps: mergeProps(domProps, labelProps, {
       role: 'group',
-      id: calendarId,
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby']
+      'aria-describedby': props['aria-describedby'] || undefined
     }),
     nextButtonProps: {
       onPress: () => state.focusNextPage(),
@@ -86,6 +109,9 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
       onFocus: () => previousFocused.current = true,
       onBlur: () => previousFocused.current = false
     },
-    title: visibleRangeDescription
+    errorMessageProps: {
+      id: errorMessageId
+    },
+    title
   };
 }

package/src/useCalendarCell.ts

@@ -12,13 +12,14 @@
 
 import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {focusWithoutScrolling} from '@react-aria/utils';
+import {focusWithoutScrolling, getScrollParent, scrollIntoView, useDescription} from '@react-aria/utils';
+import {getEraFormat, hookData} from './utils';
+import {getInteractionModality, usePress} from '@react-aria/interactions';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeProps} from '@react-aria/utils';
 import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
-import {usePress} from '@react-aria/interactions';
 
 export interface AriaCalendarCellProps {
   /** The date that this cell represents. */
@@ -30,7 +31,7 @@ export interface AriaCalendarCellProps {
   isDisabled?: boolean
 }
 
-interface CalendarCellAria {
+export interface CalendarCellAria {
   /** Props for the grid cell element (e.g. `<td>`). */
   cellProps: HTMLAttributes<HTMLElement>,
   /** Props for the button element within the cell. */
@@ -61,6 +62,8 @@ interface CalendarCellAria {
    * For example, dates before the first day of a month in the same week.
    */
   isOutsideVisibleRange: boolean,
+  /** Whether the cell is part of an invalid selection. */
+  isInvalid: boolean,
   /** The day number formatted according to the current locale. */
   formattedDate: string
 }
@@ -71,13 +74,14 @@ interface CalendarCellAria {
  */
 export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria {
   let {date, isDisabled} = props;
+  let {errorMessageId, selectedDateDescription} = hookData.get(state);
   let formatMessage = useMessageFormatter(intlMessages);
   let dateFormatter = useDateFormatter({
     weekday: 'long',
     day: 'numeric',
     month: 'long',
     year: 'numeric',
-    era: date.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    era: getEraFormat(date),
     timeZone: state.timeZone
   });
   let isSelected = state.isSelected(date);
@@ -85,6 +89,15 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   isDisabled = isDisabled || state.isCellDisabled(date);
   let isUnavailable = state.isCellUnavailable(date);
   let isSelectable = !isDisabled && !isUnavailable;
+  let isInvalid = state.validationState === 'invalid' && (
+    'highlightedRange' in state
+      ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0
+      : state.value && isSameDay(state.value, date)
+  );
+
+  if (isInvalid) {
+    isSelected = true;
+  }
 
   // For performance, reuse the same date object as before if the new date prop is the same.
   // This allows subsequent useMemo results to be reused.
@@ -100,26 +113,45 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   // aria-label should be localize Day of week, Month, Day and Year without Time.
   let isDateToday = isToday(date, state.timeZone);
   let label = useMemo(() => {
+    let label = '';
+
+    // If this is a range calendar, add a description of the full selected range
+    // to the first and last selected date.
+    if (
+      'highlightedRange' in state &&
+      state.value &&
+      !state.anchorDate &&
+      (isSameDay(date, state.value.start) || isSameDay(date, state.value.end))
+    ) {
+      label = selectedDateDescription + ', ';
+    }
+
+    label += dateFormatter.format(nativeDate);
     if (isDateToday) {
       // If date is today, set appropriate string depending on selected state:
-      return formatMessage(isSelected ? 'todayDateSelected' : 'todayDate', {
-        date: nativeDate
+      label = formatMessage(isSelected ? 'todayDateSelected' : 'todayDate', {
+        date: label
       });
     } else if (isSelected) {
       // If date is selected but not today:
-      return formatMessage('dateSelected', {
-        date: nativeDate
+      label = formatMessage('dateSelected', {
+        date: label
       });
     }
 
-    return dateFormatter.format(nativeDate);
-  }, [dateFormatter, nativeDate, formatMessage, isSelected, isDateToday]);
+    if (state.minValue && isSameDay(date, state.minValue)) {
+      label += ', ' + formatMessage('minimumDate');
+    } else if (state.maxValue && isSameDay(date, state.maxValue)) {
+      label += ', ' + formatMessage('maximumDate');
+    }
+
+    return label;
+  }, [dateFormatter, nativeDate, formatMessage, isSelected, isDateToday, date, state, selectedDateDescription]);
 
   // When a cell is focused and this is a range calendar, add a prompt to help
   // screenreader users know that they are in a range selection mode.
+  let rangeSelectionPrompt = '';
   if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
-    let rangeSelectionPrompt = '';
-
     // If selection has started add "click to finish selecting range"
     if (state.anchorDate) {
       rangeSelectionPrompt = formatMessage('finishRangeSelectionPrompt');
@@ -127,13 +159,10 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     } else {
       rangeSelectionPrompt = formatMessage('startRangeSelectionPrompt');
     }
-
-    // Append to aria-label
-    if (rangeSelectionPrompt) {
-      label = `${label} (${rangeSelectionPrompt})`;
-    }
   }
 
+  let descriptionProps = useDescription(rangeSelectionPrompt);
+
   let isAnchorPressed = useRef(false);
   let isRangeBoundaryPressed = useRef(false);
   let touchDragTimerRef = useRef(null);
@@ -152,7 +181,9 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       if ('highlightedRange' in state && !state.anchorDate && (e.pointerType === 'mouse' || e.pointerType === 'touch')) {
         // Allow dragging the start or end date of a range to modify it
         // rather than starting a new selection.
-        if (state.highlightedRange) {
+        // Don't allow dragging when invalid, or weird jumping behavior may occur as date ranges
+        // are constrained to available dates. The user will need to select a new range in this case.
+        if (state.highlightedRange && !isInvalid) {
           if (isSameDay(date, state.highlightedRange.start)) {
             state.setAnchorDate(state.highlightedRange.end);
             state.setFocusedDate(date);
@@ -253,6 +284,14 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   useEffect(() => {
     if (isFocused && ref.current) {
       focusWithoutScrolling(ref.current);
+
+      // Scroll into view if navigating with a keyboard, otherwise
+      // try not to shift the view under the user's mouse/finger.
+      // Only scroll the direct scroll parent, not the whole page, so
+      // we don't scroll to the bottom when opening date picker popover.
+      if (getInteractionModality() !== 'pointer') {
+        scrollIntoView(getScrollParent(ref.current) as HTMLElement, ref.current);
+      }
     }
   }, [isFocused, ref]);
 
@@ -268,7 +307,8 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     cellProps: {
       role: 'gridcell',
       'aria-disabled': !isSelectable || null,
-      'aria-selected': isSelectable ? isSelected : null
+      'aria-selected': isSelected || null,
+      'aria-invalid': isInvalid || null
     },
     buttonProps: mergeProps(pressProps, {
       onFocus() {
@@ -280,6 +320,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       role: 'button',
       'aria-disabled': !isSelectable || null,
       'aria-label': label,
+      'aria-invalid': isInvalid || null,
+      'aria-describedby': [
+        isInvalid ? errorMessageId : null,
+        descriptionProps['aria-describedby']
+      ].filter(Boolean).join(' ') || undefined,
       onPointerEnter(e) {
         // Highlight the date on hover or drag over a date when selecting a range.
         if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) {
@@ -305,6 +350,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     isDisabled,
     isUnavailable,
     isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
+    isInvalid,
     formattedDate
   };
 }

package/src/useCalendarGrid.ts

@@ -10,15 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, startOfWeek} from '@internationalized/date';
-import {CalendarGridAria} from './types';
-import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
+import {CalendarDate, startOfWeek, today} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {KeyboardEvent} from 'react';
-import {mergeProps, useDescription, useLabels} from '@react-aria/utils';
+import {hookData, useVisibleRangeDescription} from './utils';
+import {HTMLAttributes, KeyboardEvent, useMemo} from 'react';
+import {mergeProps, useLabels} from '@react-aria/utils';
 import {useDateFormatter, useLocale} from '@react-aria/i18n';
 
-interface CalendarGridProps {
+export interface AriaCalendarGridProps {
   /**
    * The first date displayed in the calendar grid.
    * Defaults to the first visible date in the calendar.
@@ -33,12 +32,21 @@ interface CalendarGridProps {
   endDate?: CalendarDate
 }
 
+export interface CalendarGridAria {
+  /** Props for the date grid element (e.g. `<table>`). */
+  gridProps: HTMLAttributes<HTMLElement>,
+  /** Props for the grid header element (e.g. `<thead>`). */
+  headerProps: HTMLAttributes<HTMLElement>,
+  /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
+  weekDays: string[]
+}
+
 /**
  * Provides the behavior and accessibility implementation for a calendar grid component.
  * A calendar grid displays a single grid of days within a calendar or range calendar which
  * can be keyboard navigated and selected by the user.
  */
-export function useCalendarGrid(props: CalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
+export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
   let {
     startDate = state.visibleRange.start,
     endDate = state.visibleRange.end
@@ -55,30 +63,27 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
         break;
       case 'PageUp':
         e.preventDefault();
-        if (e.shiftKey) {
-          state.focusPreviousSection();
-        } else {
-          state.focusPreviousPage();
-        }
+        e.stopPropagation();
+        state.focusPreviousSection(e.shiftKey);
         break;
       case 'PageDown':
         e.preventDefault();
-        if (e.shiftKey) {
-          state.focusNextSection();
-        } else {
-          state.focusNextPage();
-        }
+        e.stopPropagation();
+        state.focusNextSection(e.shiftKey);
         break;
       case 'End':
         e.preventDefault();
-        state.focusPageEnd();
+        e.stopPropagation();
+        state.focusSectionEnd();
         break;
       case 'Home':
         e.preventDefault();
-        state.focusPageStart();
+        e.stopPropagation();
+        state.focusSectionStart();
         break;
       case 'ArrowLeft':
         e.preventDefault();
+        e.stopPropagation();
         if (direction === 'rtl') {
           state.focusNextDay();
         } else {
@@ -87,10 +92,12 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
         break;
       case 'ArrowUp':
         e.preventDefault();
+        e.stopPropagation();
         state.focusPreviousRow();
         break;
       case 'ArrowRight':
         e.preventDefault();
+        e.stopPropagation();
         if (direction === 'rtl') {
           state.focusPreviousDay();
         } else {
@@ -99,6 +106,7 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
         break;
       case 'ArrowDown':
         e.preventDefault();
+        e.stopPropagation();
         state.focusNextRow();
         break;
       case 'Escape':
@@ -111,32 +119,27 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
     }
   };
 
-  let selectedDateDescription = useSelectedDateDescription(state);
-  let descriptionProps = useDescription(selectedDateDescription);
-  let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone);
+  let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);
 
+  let {ariaLabel, ariaLabelledBy} = hookData.get(state);
   let labelProps = useLabels({
-    'aria-label': visibleRangeDescription,
-    'aria-labelledby': calendarIds.get(state)
+    'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
+    'aria-labelledby': ariaLabelledBy
   });
 
   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) => {
-    let date = weekStart.add({days: index});
-    let dateDay = date.toDate(state.timeZone);
-    let narrow = dayFormatter.format(dateDay);
-    let long = dayFormatterLong.format(dateDay);
-    return {
-      narrow,
-      long
-    };
-  });
+  let weekDays = useMemo(() => {
+    let weekStart = startOfWeek(today(state.timeZone), locale);
+    return [...new Array(7).keys()].map((index) => {
+      let date = weekStart.add({days: index});
+      let dateDay = date.toDate(state.timeZone);
+      return dayFormatter.format(dateDay);
+    });
+  }, [locale, state.timeZone, dayFormatter]);
 
   return {
-    gridProps: mergeProps(descriptionProps, labelProps, {
+    gridProps: mergeProps(labelProps, {
       role: 'grid',
       'aria-readonly': state.isReadOnly || null,
       'aria-disabled': state.isDisabled || null,
@@ -145,6 +148,11 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
       onFocus: () => state.setFocused(true),
       onBlur: () => state.setFocused(false)
     }),
+    headerProps: {
+      // Column headers are hidden to screen readers to make navigating with a touch screen reader easier.
+      // The day names are already included in the label of each cell, so there's no need to announce them twice.
+      'aria-hidden': true
+    },
     weekDays
   };
 }

package/src/useRangeCalendar.ts

@@ -10,12 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarAria} from './types';
+import {CalendarAria, useCalendarBase} from './useCalendarBase';
 import {DateValue, RangeCalendarProps} from '@react-types/calendar';
 import {RangeCalendarState} from '@react-stately/calendar';
 import {RefObject, useRef} from 'react';
-import {useCalendarBase} from './useCalendarBase';
-import {useEvent, useId} from '@react-aria/utils';
+import {useEvent} from '@react-aria/utils';
 
 /**
  * Provides the behavior and accessibility implementation for a range calendar component.
@@ -23,8 +22,6 @@ import {useEvent, useId} from '@react-aria/utils';
  */
 export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<HTMLElement>): CalendarAria {
   let res = useCalendarBase(props, state);
-  res.nextButtonProps.id = useId();
-  res.prevButtonProps.id = useId();
 
   // We need to ignore virtual pointer events from VoiceOver due to these bugs.
   // https://bugs.webkit.org/show_bug.cgi?id=222627
@@ -33,7 +30,8 @@ export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<
   // We need to match that here otherwise this will fire before the press event in
   // useCalendarCell, causing range selection to not work properly.
   let isVirtualClick = useRef(false);
-  useEvent(useRef(window), 'pointerdown', e => {
+  let windowRef = useRef(typeof window !== 'undefined' ? window : null);
+  useEvent(windowRef, 'pointerdown', e => {
     isVirtualClick.current = e.width === 0 && e.height === 0;
   });
 
@@ -53,16 +51,23 @@ 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.closest('[role="button"]')) &&
-      !document.getElementById(res.nextButtonProps.id)?.contains(target) &&
-      !document.getElementById(res.prevButtonProps.id)?.contains(target)
+      body &&
+      body.contains(document.activeElement) &&
+      (!body.contains(target) || !target.closest('button, [role="button"]'))
     ) {
       state.selectFocusedDate();
     }
   };
 
-  useEvent(useRef(window), 'pointerup', endDragging);
-  useEvent(useRef(window), 'pointercancel', endDragging);
+  useEvent(windowRef, 'pointerup', endDragging);
+  useEvent(windowRef, 'pointercancel', endDragging);
+
+  // Also stop range selection on blur, e.g. tabbing away from the calendar.
+  res.calendarProps.onBlur = e => {
+    if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) {
+      state.selectFocusedDate();
+    }
+  };
 
   // Prevent touch scrolling while dragging
   useEvent(ref, 'touchmove', e => {

package/src/utils.ts

@@ -10,14 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, endOfMonth, isSameDay, startOfMonth} from '@internationalized/date';
+import {CalendarDate, DateFormatter, endOfMonth, isSameDay, startOfMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {FormatMessage, useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
-export const calendarIds = new WeakMap<CalendarState | RangeCalendarState, string>();
+interface HookData {
+  ariaLabel: string,
+  ariaLabelledBy: string,
+  errorMessageId: string,
+  selectedDateDescription: string
+}
+
+export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
+
+export function getEraFormat(date: CalendarDate): 'short' | undefined {
+  return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
+}
 
 export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
   let formatMessage = useMessageFormatter(intlMessages);
@@ -29,6 +40,15 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
     start = end = state.value;
   }
 
+  let dateFormatter = useDateFormatter({
+    weekday: 'long',
+    month: 'long',
+    year: 'numeric',
+    day: 'numeric',
+    era: getEraFormat(start) || getEraFormat(end),
+    timeZone: state.timeZone
+  });
+
   let anchorDate = 'anchorDate' in state ? state.anchorDate : null;
   return useMemo(() => {
     // No message if currently selecting a range, or there is nothing highlighted.
@@ -36,26 +56,34 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
       // Use a single date message if the start and end dates are the same day,
       // otherwise include both dates.
       if (isSameDay(start, end)) {
-        return formatMessage('selectedDateDescription', {date: start.toDate(state.timeZone)});
+        let date = dateFormatter.format(start.toDate(state.timeZone));
+        return formatMessage('selectedDateDescription', {date});
       } else {
-        return formatMessage('selectedRangeDescription', {start: start.toDate(state.timeZone), end: end.toDate(state.timeZone)});
+        let dateRange = formatRange(dateFormatter, formatMessage, start, end, state.timeZone);
+
+        return formatMessage('selectedRangeDescription', {dateRange});
       }
     }
     return '';
-  }, [start, end, anchorDate, state.timeZone, formatMessage]);
+  }, [start, end, anchorDate, state.timeZone, formatMessage, dateFormatter]);
 }
 
-export function useVisibleRangeDescription(startDate: CalendarDate, endDate: CalendarDate, timeZone: string) {
+export function useVisibleRangeDescription(startDate: CalendarDate, endDate: CalendarDate, timeZone: string, isAria: boolean) {
+  let formatMessage = useMessageFormatter(intlMessages);
+  let era: any = getEraFormat(startDate) || getEraFormat(endDate);
   let monthFormatter = useDateFormatter({
     month: 'long',
     year: 'numeric',
-    era: startDate.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    era,
     calendar: startDate.calendar.identifier,
     timeZone
   });
 
   let dateFormatter = useDateFormatter({
-    dateStyle: 'long',
+    month: 'long',
+    year: 'numeric',
+    day: 'numeric',
+    era,
     calendar: startDate.calendar.identifier,
     timeZone
   });
@@ -67,10 +95,43 @@ export function useVisibleRangeDescription(startDate: CalendarDate, endDate: Cal
       if (isSameDay(endDate, endOfMonth(startDate))) {
         return monthFormatter.format(startDate.toDate(timeZone));
       } else if (isSameDay(endDate, endOfMonth(endDate))) {
-        return monthFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
+        return isAria
+          ? formatRange(monthFormatter, formatMessage, startDate, endDate, timeZone)
+          : monthFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
       }
     }
 
-    return dateFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
-  }, [startDate, endDate, monthFormatter, dateFormatter, timeZone]);
+    return isAria
+      ? formatRange(dateFormatter, formatMessage, startDate, endDate, timeZone)
+      : dateFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
+  }, [startDate, endDate, monthFormatter, dateFormatter, formatMessage, timeZone, isAria]);
+}
+
+function formatRange(dateFormatter: DateFormatter, formatMessage: FormatMessage, start: CalendarDate, end: CalendarDate, timeZone: string) {
+  let parts = dateFormatter.formatRangeToParts(start.toDate(timeZone), end.toDate(timeZone));
+
+  // Find the separator between the start and end date. This is determined
+  // by finding the last shared literal before the end range.
+  let separatorIndex = -1;
+  for (let i = 0; i < parts.length; i++) {
+    let part = parts[i];
+    if (part.source === 'shared' && part.type === 'literal') {
+      separatorIndex = i;
+    } else if (part.source === 'endRange') {
+      break;
+    }
+  }
+
+  // Now we can combine the parts into start and end strings.
+  let startValue = '';
+  let endValue = '';
+  for (let i = 0; i < parts.length; i++) {
+    if (i < separatorIndex) {
+      startValue += parts[i].value;
+    } else if (i > separatorIndex) {
+      endValue += parts[i].value;
+    }
+  }
+
+  return formatMessage('dateRange', {startDate: startValue, endDate: endValue});
 }