@react-aria/datepicker 3.0.0-nightly.3168 → 3.0.0-nightly.3180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.3168+2fabc1ac0",
+  "version": "3.0.0-nightly.3180+0bba35ae3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,20 +18,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.6-nightly.3168+2fabc1ac0",
-    "@internationalized/number": "3.0.6-nightly.3168+2fabc1ac0",
-    "@react-aria/focus": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/i18n": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/interactions": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/label": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/spinbutton": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-stately/datepicker": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/button": "3.4.5-nightly.3168+2fabc1ac0",
-    "@react-types/calendar": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/datepicker": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/dialog": "3.3.5-nightly.3168+2fabc1ac0",
-    "@react-types/shared": "3.0.0-nightly.1469+2fabc1ac0"
+    "@internationalized/message": "3.0.6-nightly.3180+0bba35ae3",
+    "@internationalized/number": "3.0.6-nightly.3180+0bba35ae3",
+    "@react-aria/focus": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/i18n": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/interactions": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/label": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/spinbutton": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/utils": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-stately/datepicker": "3.0.0-nightly.3180+0bba35ae3",
+    "@react-types/button": "3.4.5-nightly.3180+0bba35ae3",
+    "@react-types/calendar": "3.0.0-nightly.3180+0bba35ae3",
+    "@react-types/datepicker": "3.0.0-nightly.3180+0bba35ae3",
+    "@react-types/dialog": "3.3.5-nightly.3180+0bba35ae3",
+    "@react-types/shared": "3.0.0-nightly.1481+0bba35ae3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1",
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2fabc1ac07aa6fd75e7111e571e27787d8a44314"
+  "gitHead": "0bba35ae36b5d220570385215860d3ca3b549656"
 }

package/src/useDateField.ts

@@ -12,11 +12,9 @@
 
 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 {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 import {mergeProps, useDescription} from '@react-aria/utils';
-import {useDateFormatter} from '@react-aria/i18n';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -37,19 +35,25 @@ 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: DateFieldProps<T>, state: DateFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'
@@ -63,22 +67,43 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     }
   });
 
-  let formatter = useDateFormatter(state.getFormatOptions({month: 'long'}));
-  let descProps = useDescription(state.value ? formatter.format(state.dateValue) : null);
+  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();
@@ -93,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
   };
@@ -108,6 +129,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

@@ -20,6 +20,7 @@ import {HTMLAttributes, RefObject} 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';
@@ -66,7 +67,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
 
   return {
-    groupProps: mergeProps(groupProps, descProps, {
+    groupProps: mergeProps(groupProps, fieldProps, descProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-labelledby': labelledBy,
@@ -81,6 +82,8 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     },
     fieldProps: {
       ...fieldProps,
+      [roleSymbol]: 'presentation',
+      'aria-describedby': ariaDescribedBy,
       value: state.value,
       onChange: state.setValue,
       minValue: props.minValue,
@@ -119,7 +122,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       maxValue: props.maxValue,
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
-      isDateDisabled: props.isDateDisabled,
+      isDateUnavailable: props.isDateUnavailable,
       defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue
     }
   };

package/src/useDatePickerGroup.ts

@@ -1,14 +1,14 @@
-import {DatePickerFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
+import {DateFieldState, 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';
 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>) {
   // 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);

package/src/useDateRangePicker.ts

@@ -15,10 +15,11 @@ 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 {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 {mergeProps, useDescription, useId} from '@react-aria/utils';
 import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
@@ -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
@@ -68,15 +65,15 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   let description = state.formatValue(locale, {month: 'long'});
   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();
@@ -92,6 +89,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   let focusManager = useMemo(() => createFocusManager(ref), [ref]);
   let commonFieldProps = {
     [focusManagerSymbol]: focusManager,
+    [roleSymbol]: 'presentation',
+    'aria-describedby': ariaDescribedBy,
     minValue: props.minValue,
     maxValue: props.maxValue,
     placeholderValue: props.placeholderValue,
@@ -133,7 +132,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 +139,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)
     },
@@ -155,7 +152,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       maxValue: props.maxValue,
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
-      isDateDisabled: props.isDateDisabled,
+      isDateUnavailable: props.isDateUnavailable,
+      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
       defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
     }
   };

package/src/useDateSegment.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
-import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId} from '@react-aria/utils';
+import {DateFieldState, DateSegment} from '@react-stately/datepicker';
+import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId, useLabels} from '@react-aria/utils';
 import {hookData} from './useDateField';
 import {NumberParser} from '@internationalized/number';
 import React, {HTMLAttributes, RefObject, useMemo, useRef} from 'react';
@@ -30,11 +30,11 @@ interface DateSegmentAria {
  * 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 {
+export function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
   let enteredKeys = useRef('');
   let {locale, direction} = useLocale();
   let displayNames = useDisplayNames();
-  let {ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
 
   let textValue = segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -48,7 +48,7 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   if (segment.type === 'month') {
     let monthTextValue = monthDateFormatter.format(state.dateValue);
     textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-  } else if (segment.type === 'hour' || segment.type === 'dayPeriod') {
+  } else if (segment.type === 'hour') {
     textValue = hourDateFormatter.format(state.dateValue);
   }
 
@@ -341,6 +341,14 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   let id = useId();
   let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
 
+  // Prepend the label passed from the field to each segment name.
+  // This is needed because VoiceOver on iOS does not announce groups.
+  let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
+  let labelProps = useLabels({
+    'aria-label': (ariaLabel ? ariaLabel + ' ' : '') + name,
+    'aria-labelledby': ariaLabelledBy
+  });
+
   // 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') {
@@ -352,12 +360,10 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   }
 
   return {
-    segmentProps: mergeProps(spinButtonProps, pressProps, {
+    segmentProps: mergeProps(spinButtonProps, pressProps, labelProps, {
       id,
       ...touchPropOverrides,
       'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
-      'aria-label': displayNames.of(segment.type),
-      'aria-labelledby': `${ariaLabelledBy} ${id}`,
       'aria-describedby': ariaDescribedBy,
       'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
       'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,