@react-aria/datepicker 3.0.0-nightly.3175 → 3.0.0-rc.1

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePickerGroup.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateRangePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateField.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDisplayNames.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateSegment.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/index.ts","packages/@react-aria/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useDatePicker} from './useDatePicker';\nexport {useDateSegment} from './useDateSegment';\nexport {useDateField, useTimeField} from './useDateField';\nexport {useDateRangePicker} from './useDateRangePicker';\nexport * from './useDisplayNames';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePickerGroup.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateField.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDisplayNames.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateSegment.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateRangePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/index.ts","packages/@react-aria/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useDatePicker} from './useDatePicker';\nexport {useDateSegment} from './useDateSegment';\nexport {useDateField, useTimeField} from './useDateField';\nexport {useDateRangePicker} from './useDateRangePicker';\nexport {useDisplayNames} from './useDisplayNames';\n\nexport type {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';\nexport type {AriaDateFieldProps, DateFieldAria} from './useDateField';\nexport type {DatePickerAria} from './useDatePicker';\nexport type {DateRangePickerAria} from './useDateRangePicker';\nexport type {DateSegmentAria} from './useDateSegment';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.3175+91ca94fe5",
+  "version": "3.0.0-rc.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,27 +18,27 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.6-nightly.3175+91ca94fe5",
-    "@internationalized/number": "3.0.6-nightly.3175+91ca94fe5",
-    "@react-aria/focus": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-aria/i18n": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-aria/interactions": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-aria/label": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-aria/spinbutton": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-aria/utils": "3.0.0-nightly.1476+91ca94fe5",
-    "@react-stately/datepicker": "3.0.0-nightly.3175+91ca94fe5",
-    "@react-types/button": "3.4.5-nightly.3175+91ca94fe5",
-    "@react-types/calendar": "3.0.0-nightly.3175+91ca94fe5",
-    "@react-types/datepicker": "3.0.0-nightly.3175+91ca94fe5",
-    "@react-types/dialog": "3.3.5-nightly.3175+91ca94fe5",
-    "@react-types/shared": "3.0.0-nightly.1476+91ca94fe5"
+    "@internationalized/message": "^3.0.7",
+    "@internationalized/number": "^3.1.1",
+    "@react-aria/focus": "^3.6.0",
+    "@react-aria/i18n": "^3.4.0",
+    "@react-aria/interactions": "^3.9.0",
+    "@react-aria/label": "^3.3.0",
+    "@react-aria/spinbutton": "^3.1.0",
+    "@react-aria/utils": "^3.13.0",
+    "@react-stately/datepicker": "3.0.0-rc.1",
+    "@react-types/button": "^3.5.0",
+    "@react-types/calendar": "3.0.0-rc.1",
+    "@react-types/datepicker": "3.0.0-rc.1",
+    "@react-types/dialog": "^3.4.0",
+    "@react-types/shared": "^3.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91ca94fe52840b7a32b961ec08208f5fbdf65697"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/index.ts

@@ -14,4 +14,10 @@ export {useDatePicker} from './useDatePicker';
 export {useDateSegment} from './useDateSegment';
 export {useDateField, useTimeField} from './useDateField';
 export {useDateRangePicker} from './useDateRangePicker';
-export * from './useDisplayNames';
+export {useDisplayNames} from './useDisplayNames';
+
+export type {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';
+export type {AriaDateFieldProps, DateFieldAria} from './useDateField';
+export type {DatePickerAria} from './useDatePicker';
+export type {DateRangePickerAria} from './useDateRangePicker';
+export type {DateSegmentAria} from './useDateSegment';

package/src/useDateField.ts

@@ -12,19 +12,20 @@
 
 import {AriaDatePickerProps, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
-import {DatePickerFieldState} from '@react-stately/datepicker';
-import {focusManagerSymbol} from './useDateRangePicker';
+import {DateFieldState} from '@react-stately/datepicker';
+import {filterDOMProps, mergeProps, useDescription} from '@react-aria/utils';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
-import {mergeProps, useDescription} from '@react-aria/utils';
-import {useDateFormatter} from '@react-aria/i18n';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useMessageFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-interface DateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
+export interface AriaDateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
 
-interface DateFieldAria {
+export interface DateFieldAria {
    /** Props for the field's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
    /** Props for the field grouping element. */
@@ -37,48 +38,78 @@ 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<DatePickerFieldState, HookData>();
+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.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export function useDateField<T extends DateValue>(props: DateFieldProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
+export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>, state: DateFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'
   });
 
-  let groupProps = useDatePickerGroup(state, ref);
-
   let {focusWithinProps} = useFocusWithin({
     onBlurWithin() {
       state.confirmPlaceholder();
     }
   });
 
-  let formatter = useDateFormatter(state.getFormatOptions({month: 'long'}));
-  let descProps = useDescription(state.value ? formatter.format(state.dateValue) : null);
+  let formatMessage = useMessageFormatter(intlMessages);
+  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+  let field = state.maxGranularity === 'hour' ? 'time' : 'date';
+  let description = state.value ? formatMessage(message, {[field]: state.formatValue({month: 'long'})}) : '';
+  let descProps = useDescription(description);
 
-  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]);
+  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');
 
+  // 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();
@@ -86,6 +117,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     autoFocusRef.current = false;
   }, [focusManager]);
 
+  let domProps = filterDOMProps(props);
   return {
     labelProps: {
       ...labelProps,
@@ -93,11 +125,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(domProps, fieldDOMProps, groupProps, focusWithinProps),
     descriptionProps,
     errorMessageProps
   };
@@ -108,6 +136,6 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeField<T extends TimeValue>(props: AriaTimeFieldProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
+export function useTimeField<T extends TimeValue>(props: AriaTimeFieldProps<T>, state: DateFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
   return useDateField(props, state, ref);
 }

package/src/useDatePicker.ts

@@ -16,15 +16,16 @@ import {AriaDialogProps} from '@react-types/dialog';
 import {CalendarProps} from '@react-types/calendar';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
-import {HTMLAttributes, RefObject} from 'react';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {HTMLAttributes, RefObject, useMemo} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId} from '@react-aria/utils';
+import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DatePickerAria {
+export interface DatePickerAria {
   /** Props for the date picker's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
   /** Props for the grouping element containing the date field and button. */
@@ -62,11 +63,15 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
 
   let {locale} = useLocale();
-  let descProps = useDescription(state.formatValue(locale, {month: 'long'}));
+  let date = state.formatValue(locale, {month: 'long'});
+  let description = date ? formatMessage('selectedDateDescription', {date}) : '';
+  let descProps = useDescription(description);
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  let domProps = filterDOMProps(props);
+  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
 
   return {
-    groupProps: mergeProps(groupProps, descProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-labelledby': labelledBy,
@@ -75,12 +80,13 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
     fieldProps: {
       ...fieldProps,
+      [roleSymbol]: 'presentation',
+      'aria-describedby': ariaDescribedBy,
       value: state.value,
       onChange: state.setValue,
       minValue: props.minValue,
@@ -100,7 +106,6 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     buttonProps: {
       ...descProps,
       id: buttonId,
-      excludeFromTabOrder: true,
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
@@ -120,7 +125,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isDateUnavailable: props.isDateUnavailable,
-      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue
+      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+      validationState: state.validationState,
+      errorMessage: props.errorMessage
     }
   };
 }

package/src/useDatePickerGroup.ts

@@ -1,18 +1,47 @@
-import {DatePickerFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
-import {getFocusableTreeWalker} from '@react-aria/focus';
+import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
+import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
 import {KeyboardEvent} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import {RefObject} from 'react';
+import {RefObject, useMemo} from 'react';
+import {useLocale} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 
-export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DatePickerFieldState, ref: RefObject<HTMLElement>) {
+export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<HTMLElement>, disableArrowNavigation?: boolean) {
+  let {direction} = useLocale();
+  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+
   // Open the popover on alt + arrow down
   let onKeyDown = (e: KeyboardEvent) => {
-    if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) {
+    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
       e.preventDefault();
       e.stopPropagation();
       state.setOpen(true);
     }
+
+    if (disableArrowNavigation) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === 'rtl') {
+          focusManager.focusNext();
+        } else {
+          focusManager.focusPrevious();
+        }
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === 'rtl') {
+          focusManager.focusPrevious();
+        } else {
+          focusManager.focusNext();
+        }
+        break;
+    }
   };
 
   // Focus the first placeholder segment from the end on mouse down/touch up in the field.

package/src/useDateRangePicker.ts

@@ -15,17 +15,18 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-t
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DateRangePickerState} from '@react-stately/datepicker';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {focusManagerSymbol, roleSymbol} from './useDateField';
 import {HTMLAttributes, RefObject, useMemo} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId, useLabels} from '@react-aria/utils';
 import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DateRangePickerAria {
+export interface DateRangePickerAria {
   /** Props for the date range picker's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
   /** Props for the grouping element containing the date fields and button. */
@@ -46,10 +47,6 @@ interface DateRangePickerAria {
   calendarProps: RangeCalendarProps<DateValue>
 }
 
-// Used to pass the focus manager to the date fields.
-// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
-export const focusManagerSymbol = '__focusManager_' + Date.now();
-
 /**
  * Provides the behavior and accessibility implementation for a date picker component.
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
@@ -65,18 +62,19 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
 
   let {locale} = useLocale();
-  let description = state.formatValue(locale, {month: 'long'});
+  let range = state.formatValue(locale, {month: 'long'});
+  let description = range ? formatMessage('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';
   let descProps = useDescription(description);
 
-  let startFieldProps = useLabels({
+  let startFieldProps = {
     'aria-label': formatMessage('startDate'),
     'aria-labelledby': labelledBy
-  });
+  };
 
-  let endFieldProps = useLabels({
+  let endFieldProps = {
     'aria-label': formatMessage('endDate'),
     'aria-labelledby': labelledBy
-  });
+  };
 
   let buttonId = useId();
   let dialogId = useId();
@@ -89,9 +87,15 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   });
 
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
-  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+  let focusManager = useMemo(() => createFocusManager(ref, {
+    // Exclude the button from the focus manager.
+    accept: element => element.id !== buttonId
+  }), [ref, buttonId]);
+
   let commonFieldProps = {
     [focusManagerSymbol]: focusManager,
+    [roleSymbol]: 'presentation',
+    'aria-describedby': ariaDescribedBy,
     minValue: props.minValue,
     maxValue: props.maxValue,
     placeholderValue: props.placeholderValue,
@@ -104,8 +108,10 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     validationState: state.validationState
   };
 
+  let domProps = filterDOMProps(props);
+
   return {
-    groupProps: mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-describedby': ariaDescribedBy
@@ -119,7 +125,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     buttonProps: {
       ...descProps,
       id: buttonId,
-      excludeFromTabOrder: true,
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
@@ -133,7 +138,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     startFieldProps: {
       ...startFieldProps,
       ...commonFieldProps,
-      'aria-describedby': fieldProps['aria-describedby'],
       value: state.value?.start,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus
@@ -141,7 +145,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
-      'aria-describedby': fieldProps['aria-describedby'],
       value: state.value?.end,
       onChange: end => state.setDateTime('end', end)
     },
@@ -157,7 +160,9 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       isReadOnly: props.isReadOnly,
       isDateUnavailable: props.isDateUnavailable,
       allowsNonContiguousRanges: props.allowsNonContiguousRanges,
-      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
+      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
+      validationState: state.validationState,
+      errorMessage: props.errorMessage
     }
   };
 }