@react-aria/datepicker 3.0.0-nightly.3134 → 3.0.0-nightly.3156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.3134+6fa5706ef",
+  "version": "3.0.0-nightly.3156+2c25922e2",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,19 +18,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.6-nightly.3134+6fa5706ef",
-    "@internationalized/number": "3.0.6-nightly.3134+6fa5706ef",
-    "@react-aria/focus": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-aria/i18n": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-aria/interactions": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-aria/label": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-aria/spinbutton": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-aria/utils": "3.0.0-nightly.1438+6fa5706ef",
-    "@react-stately/datepicker": "3.0.0-nightly.3134+6fa5706ef",
-    "@react-types/button": "3.4.4-nightly.3134+6fa5706ef",
-    "@react-types/datepicker": "3.0.0-nightly.3134+6fa5706ef",
-    "@react-types/dialog": "3.3.4-nightly.3134+6fa5706ef",
-    "@react-types/shared": "3.0.0-nightly.1438+6fa5706ef"
+    "@internationalized/message": "3.0.6-nightly.3156+2c25922e2",
+    "@internationalized/number": "3.0.6-nightly.3156+2c25922e2",
+    "@react-aria/focus": "3.0.0-nightly.1460+2c25922e2",
+    "@react-aria/i18n": "3.0.0-nightly.1460+2c25922e2",
+    "@react-aria/interactions": "3.0.0-nightly.1460+2c25922e2",
+    "@react-aria/label": "3.0.0-nightly.1460+2c25922e2",
+    "@react-aria/spinbutton": "3.0.0-nightly.1460+2c25922e2",
+    "@react-aria/utils": "3.0.0-nightly.1460+2c25922e2",
+    "@react-stately/datepicker": "3.0.0-nightly.3156+2c25922e2",
+    "@react-types/button": "3.4.4-nightly.3156+2c25922e2",
+    "@react-types/calendar": "3.0.0-nightly.3156+2c25922e2",
+    "@react-types/datepicker": "3.0.0-nightly.3156+2c25922e2",
+    "@react-types/dialog": "3.3.4-nightly.3156+2c25922e2",
+    "@react-types/shared": "3.0.0-nightly.1460+2c25922e2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1",
@@ -39,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fa5706efb7bb7d8c322b8f756c451378ca962ce"
+  "gitHead": "2c25922e23ec51bd487b7838adb48a60c558dc36"
 }

package/src/index.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useDatePicker';
-export * from './useDateSegment';
-export * from './useDateField';
-export * from './useDateRangePicker';
+export {useDatePicker} from './useDatePicker';
+export {useDateSegment} from './useDateSegment';
+export {useDateField, useTimeField} from './useDateField';
+export {useDateRangePicker} from './useDateRangePicker';
 export * from './useDisplayNames';

package/src/useDateField.ts

@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
-import {createFocusManager} from '@react-aria/focus';
+import {AriaDatePickerProps, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
+import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DatePickerFieldState} from '@react-stately/datepicker';
-import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
+import {focusManagerSymbol} from './useDateRangePicker';
+import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 import {mergeProps, useDescription} from '@react-aria/utils';
 import {useDateFormatter} from '@react-aria/i18n';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -24,7 +25,9 @@ import {useFocusWithin} from '@react-aria/interactions';
 interface DateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
 
 interface DateFieldAria {
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
+   /** Props for the field's visible label element, if any. */
+  labelProps: HTMLAttributes<HTMLElement>,
+   /** Props for the field grouping element. */
   fieldProps: HTMLAttributes<HTMLElement>,
   /** Props for the description element, if any. */
   descriptionProps: HTMLAttributes<HTMLElement>,
@@ -32,8 +35,20 @@ interface DateFieldAria {
   errorMessageProps: HTMLAttributes<HTMLElement>
 }
 
-export const labelIds = new WeakMap<DatePickerFieldState, {ariaLabelledBy: string, ariaDescribedBy: string}>();
+// Data that is passed between useDateField and useDateSegment.
+interface HookData {
+  ariaLabelledBy: string,
+  ariaDescribedBy: string,
+  focusManager: FocusManager
+}
+
+export const hookData = new WeakMap<DatePickerFieldState, HookData>();
 
+/**
+ * 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 {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -53,17 +68,28 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
 
   let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
   let describedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  let propsFocusManager = props[focusManagerSymbol];
+  let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);
 
-  labelIds.set(state, {
+  hookData.set(state, {
     ariaLabelledBy: segmentLabelledBy,
-    ariaDescribedBy: describedBy
+    ariaDescribedBy: describedBy,
+    focusManager
   });
 
+  let autoFocusRef = useRef(props.autoFocus);
+
+  useEffect(() => {
+    if (autoFocusRef.current) {
+      focusManager.focusFirst();
+    }
+    autoFocusRef.current = false;
+  }, [focusManager]);
+
   return {
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
@@ -76,3 +102,12 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     errorMessageProps
   };
 }
+
+/**
+ * Provides the behavior and accessibility implementation for a time field component.
+ * 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 {
+  return useDateField(props, state, ref);
+}

package/src/useDatePicker.ts

@@ -13,9 +13,10 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
 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, LabelHTMLAttributes, RefObject} from 'react';
+import {HTMLAttributes, RefObject} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeProps, useDescription, useId} from '@react-aria/utils';
@@ -23,19 +24,30 @@ import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DatePickerAria<T extends DateValue> {
+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. */
   groupProps: HTMLAttributes<HTMLElement>,
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  fieldProps: AriaDatePickerProps<T>,
+  /** Props for the date field. */
+  fieldProps: AriaDatePickerProps<DateValue>,
+  /** Props for the popover trigger button. */
+  buttonProps: AriaButtonProps,
   /** Props for the description element, if any. */
   descriptionProps: HTMLAttributes<HTMLElement>,
   /** Props for the error message element, if any. */
   errorMessageProps: HTMLAttributes<HTMLElement>,
-  buttonProps: AriaButtonProps,
-  dialogProps: AriaDialogProps
+  /** Props for the popover dialog. */
+  dialogProps: AriaDialogProps,
+  /** Props for the calendar within the popover dialog. */
+  calendarProps: CalendarProps<DateValue>
 }
 
-export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria<T> {
+/**
+ * Provides the behavior and accessibility implementation for a date picker component.
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria {
   let buttonId = useId();
   let dialogId = useId();
   let formatMessage = useMessageFormatter(intlMessages);
@@ -67,7 +79,22 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
         focusManager.focusFirst();
       }
     },
-    fieldProps,
+    fieldProps: {
+      ...fieldProps,
+      value: state.value,
+      onChange: state.setValue,
+      minValue: props.minValue,
+      maxValue: props.maxValue,
+      placeholderValue: props.placeholderValue,
+      hideTimeZone: props.hideTimeZone,
+      hourCycle: props.hourCycle,
+      granularity: props.granularity,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isRequired: props.isRequired,
+      validationState: state.validationState,
+      autoFocus: props.autoFocus
+    },
     descriptionProps,
     errorMessageProps,
     buttonProps: {
@@ -77,11 +104,23 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
-      'aria-describedby': ariaDescribedBy
+      'aria-describedby': ariaDescribedBy,
+      onPress: () => state.setOpen(true)
     },
     dialogProps: {
       id: dialogId,
       'aria-labelledby': `${labelledBy} ${buttonId}`
+    },
+    calendarProps: {
+      autoFocus: true,
+      value: state.dateValue,
+      onChange: state.setDateValue,
+      minValue: props.minValue,
+      maxValue: props.maxValue,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isDateDisabled: props.isDateDisabled,
+      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue
     }
   };
 }

package/src/useDatePickerGroup.ts

@@ -1,4 +1,5 @@
 import {DatePickerFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
+import {getFocusableTreeWalker} from '@react-aria/focus';
 import {KeyboardEvent} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import {RefObject} from 'react';
@@ -16,15 +17,37 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
 
   // Focus the first placeholder segment from the end on mouse down/touch up in the field.
   let focusLast = () => {
-    let elements = ref.current.querySelectorAll('[tabindex="0"]');
-    let index = elements.length - 1;
-    while (index >= 0 && elements[index].getAttribute('aria-placeholder')) {
-      index--;
+    // Try to find the segment prior to the element that was clicked on.
+    let target = window.event?.target as HTMLElement;
+    let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+    if (target) {
+      walker.currentNode = target;
+      target = walker.previousNode() as HTMLElement;
     }
-    index = Math.min(index + 1, elements.length - 1);
-    let element = elements[index] as HTMLElement;
-    if (element) {
-      element.focus();
+
+    // If no target found, find the last element from the end.
+    if (!target) {
+      let last: HTMLElement;
+      do {
+        last = walker.lastChild() as HTMLElement;
+        if (last) {
+          target = last;
+        }
+      } while (last);
+    }
+
+    // Now go backwards until we find an element that is not a placeholder.
+    while (target?.getAttribute('aria-placeholder')) {
+      let prev = walker.previousNode() as HTMLElement;
+      if (prev && prev.getAttribute('aria-placeholder')) {
+        target = prev;
+      } else {
+        break;
+      }
+    }
+
+    if (target) {
+      target.focus();
     }
   };
 

package/src/useDateRangePicker.ts

@@ -15,29 +15,47 @@ 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 {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
+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<T extends DateValue> {
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
+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. */
   groupProps: HTMLAttributes<HTMLElement>,
-  startFieldProps: AriaDatePickerProps<T>,
-  endFieldProps: AriaDatePickerProps<T>,
+  /** Props for the start date field. */
+  startFieldProps: AriaDatePickerProps<DateValue>,
+  /** Props for the end date field. */
+  endFieldProps: AriaDatePickerProps<DateValue>,
+  /** Props for the popover trigger button. */
+  buttonProps: AriaButtonProps,
   /** Props for the description element, if any. */
   descriptionProps: HTMLAttributes<HTMLElement>,
   /** Props for the error message element, if any. */
   errorMessageProps: HTMLAttributes<HTMLElement>,
-  buttonProps: AriaButtonProps,
-  dialogProps:  AriaDialogProps
+  /** Props for the popover dialog. */
+  dialogProps: AriaDialogProps,
+  /** Props for the range calendar within the popover dialog. */
+  calendarProps: RangeCalendarProps<DateValue>
 }
 
-export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria<T> {
+// 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
+ * users to enter or select a date and time range.
+ */
+export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria {
   let formatMessage = useMessageFormatter(intlMessages);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
@@ -71,6 +89,20 @@ 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 commonFieldProps = {
+    [focusManagerSymbol]: focusManager,
+    minValue: props.minValue,
+    maxValue: props.maxValue,
+    placeholderValue: props.placeholderValue,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    granularity: props.granularity,
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    isRequired: props.isRequired,
+    validationState: state.validationState
+  };
 
   return {
     groupProps: mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
@@ -81,7 +113,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
@@ -92,7 +123,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
-      'aria-describedby': ariaDescribedBy
+      'aria-describedby': ariaDescribedBy,
+      onPress: () => state.setOpen(true)
     },
     dialogProps: {
       id: dialogId,
@@ -100,13 +132,31 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     },
     startFieldProps: {
       ...startFieldProps,
-      'aria-describedby': fieldProps['aria-describedby']
+      ...commonFieldProps,
+      'aria-describedby': fieldProps['aria-describedby'],
+      value: state.value?.start,
+      onChange: start => state.setDateTime('start', start),
+      autoFocus: props.autoFocus
     },
     endFieldProps: {
       ...endFieldProps,
-      'aria-describedby': fieldProps['aria-describedby']
+      ...commonFieldProps,
+      'aria-describedby': fieldProps['aria-describedby'],
+      value: state.value?.end,
+      onChange: end => state.setDateTime('end', end)
     },
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    calendarProps: {
+      autoFocus: true,
+      value: state.dateRange,
+      onChange: state.setDateRange,
+      minValue: props.minValue,
+      maxValue: props.maxValue,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isDateDisabled: props.isDateDisabled,
+      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
+    }
   };
 }

package/src/useDateSegment.ts

@@ -11,27 +11,30 @@
  */
 
 import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
-import {DatePickerProps, DateValue} from '@react-types/datepicker';
-import {DOMProps} from '@react-types/shared';
 import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId} from '@react-aria/utils';
-import {labelIds} from './useDateField';
+import {hookData} from './useDateField';
 import {NumberParser} from '@internationalized/number';
 import React, {HTMLAttributes, RefObject, useMemo, useRef} from 'react';
 import {useDateFormatter, useFilter, useLocale} from '@react-aria/i18n';
 import {useDisplayNames} from './useDisplayNames';
-import {useFocusManager} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
 import {useSpinButton} from '@react-aria/spinbutton';
 
 interface DateSegmentAria {
+  /** Props for the segment element. */
   segmentProps: HTMLAttributes<HTMLDivElement>
 }
 
-export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> & DOMProps, segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
+/**
+ * Provides the behavior and accessibility implementation for a segment in a date field.
+ * A date segment displays an individual unit of a date and time, and allows users to edit
+ * the value by typing or using the arrow keys to increment and decrement.
+ */
+export function useDateSegment(segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
   let enteredKeys = useRef('');
   let {locale, direction} = useLocale();
   let displayNames = useDisplayNames();
-  let focusManager = useFocusManager();
+  let {ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
 
   let textValue = segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -54,9 +57,9 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
     textValue,
     minValue: segment.minValue,
     maxValue: segment.maxValue,
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly || !segment.isEditable,
-    isRequired: props.isRequired,
+    isDisabled: state.isDisabled,
+    isReadOnly: state.isReadOnly || !segment.isEditable,
+    isRequired: state.isRequired,
     onIncrement: () => {
       enteredKeys.current = '';
       state.increment(segment.type);
@@ -86,7 +89,7 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
   let parser = useMemo(() => new NumberParser(locale, {maximumFractionDigits: 0}), [locale]);
 
   let backspace = () => {
-    if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly && !segment.isPlaceholder) {
+    if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) {
       let newValue = segment.text.slice(0, -1);
       let parsed = parser.parse(newValue);
       if (newValue.length === 0 || parsed === 0) {
@@ -116,27 +119,27 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
         e.preventDefault();
         e.stopPropagation();
         if (direction === 'rtl') {
-          focusManager.focusNext();
+          focusManager.focusNext({tabbable: true});
         } else {
-          focusManager.focusPrevious();
+          focusManager.focusPrevious({tabbable: true});
         }
         break;
       case 'ArrowRight':
         e.preventDefault();
         e.stopPropagation();
         if (direction === 'rtl') {
-          focusManager.focusPrevious();
+          focusManager.focusPrevious({tabbable: true});
         } else {
-          focusManager.focusNext();
+          focusManager.focusNext({tabbable: true});
         }
         break;
       case 'Enter':
         e.preventDefault();
         e.stopPropagation();
-        if (segment.isPlaceholder && !props.isReadOnly) {
+        if (segment.isPlaceholder && !state.isReadOnly) {
           state.confirmPlaceholder(segment.type);
         }
-        focusManager.focusNext();
+        focusManager.focusNext({tabbable: true});
         break;
       case 'Tab':
         break;
@@ -167,7 +170,7 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
   }, [amPmFormatter]);
 
   let onInput = (key: string) => {
-    if (props.isDisabled || props.isReadOnly) {
+    if (state.isDisabled || state.isReadOnly) {
       return;
     }
 
@@ -182,7 +185,7 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
         } else {
           break;
         }
-        focusManager.focusNext();
+        focusManager.focusNext({tabbable: true});
         break;
       case 'day':
       case 'hour':
@@ -231,7 +234,7 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
         if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
           enteredKeys.current = '';
           if (shouldSetValue) {
-            focusManager.focusNext();
+            focusManager.focusNext({tabbable: true});
           }
         } else {
           enteredKeys.current = newValue;
@@ -261,7 +264,7 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
     switch (e.inputType) {
       case 'deleteContentBackward':
       case 'deleteContentForward':
-        if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) {
+        if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) {
           backspace();
         }
         break;
@@ -328,8 +331,6 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
     'aria-valuenow': null
   } : {};
 
-  let {ariaLabelledBy, ariaDescribedBy} = labelIds.get(state);
-
   // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being
   // read every time the user navigates to a new segment.
   let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]);
@@ -337,20 +338,29 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
     ariaDescribedBy = undefined;
   }
 
-  let id = useId(props.id);
-  let isEditable = !props.isDisabled && !props.isReadOnly && segment.isEditable;
+  let id = useId();
+  let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
+
+  // Literal segments should not be visible to screen readers. We don't really need any of the above,
+  // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
+  if (segment.type === 'literal') {
+    return {
+      segmentProps: {
+        'aria-hidden': true
+      }
+    };
+  }
+
   return {
     segmentProps: mergeProps(spinButtonProps, pressProps, {
       id,
       ...touchPropOverrides,
-      'aria-controls': props['aria-controls'],
-      // 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2
       'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
-      'aria-label': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined,
+      'aria-label': displayNames.of(segment.type),
       'aria-labelledby': `${ariaLabelledBy} ${id}`,
       'aria-describedby': ariaDescribedBy,
       'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
-      'aria-readonly': props.isReadOnly || !segment.isEditable ? 'true' : undefined,
+      'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
       contentEditable: isEditable,
       suppressContentEditableWarning: isEditable,
       spellCheck: isEditable ? 'false' : undefined,
@@ -358,10 +368,13 @@ export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> &
       autoCorrect: isEditable ? 'off' : undefined,
       // Capitalization was changed in React 17...
       [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
-      inputMode: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
-      tabIndex: props.isDisabled ? undefined : 0,
+      inputMode: state.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
+      tabIndex: state.isDisabled ? undefined : 0,
       onKeyDown,
-      onFocus
+      onFocus,
+      style: {
+        caretColor: 'transparent'
+      }
     })
   };
 }