fix(a11y): date range picker voiceover fix

.github/workflows/test.yml

@@ -37,7 +37,9 @@ jobs:
         with:
           timezone: Asia/Kolkata
 
-      - name: install deps
+      - name: Install deps
         run: yarn
+      - name: Check Types
+        run: yarn check-types
       - name: Test
         run: yarn test

package.json

@@ -30,6 +30,7 @@
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx --config-file ./babel-config.js -d dist/cjs --source-maps",
     "build:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx --config-file ./babel-config.js -d dist/esm --source-maps",
     "build:types": "tsc --emitDeclarationOnly",
+    "check-types": "tsc --noEmit",
     "commit": "gacp",
     "format": "prettier --write \"./**/*.{js,ts,css,less,json,md,html,yml,yaml,pcss,jsx,tsx}\"",
     "keys": "node scripts/build/keys",

src/calendar/CalendarCellButton.ts

@@ -28,6 +28,7 @@ export type CalendarCellButtonOptions = ButtonOptions &
     | "maxDate"
     | "dateValue"
     | "isFocused"
+    | "isRangeCalendar"
   > &
   Partial<Pick<RangeCalendarStateReturn, "anchorDate">> & {
     date: Date;
@@ -132,7 +133,7 @@ export const useCalendarCellButton = createHook<
 
     // 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.
-    if (anchorDate && isFocused && !isDisabled) {
+    if (options.isRangeCalendar && isFocused && !isDisabled) {
       let rangeSelectionPrompt = "";
 
       // If selection has started add "click to finish selecting range"

src/calendar/CalendarState.ts

@@ -111,9 +111,15 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     setFocusedDate(date);
   }
 
+  const announceSelectedDate = React.useCallback((value: Date) => {
+    if (!value) return;
+    announce(`Selected Date: ${format(value, "do MMM yyyy")}`);
+  }, []);
+
   function setValue(value: Date) {
     if (!isDisabled && !isReadOnly) {
       setControllableValue(value);
+      announceSelectedDate(value);
     }
   }
 
@@ -129,11 +135,6 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     // rather than move focus, we announce the new month value
   }, [currentMonth]);
 
-  useUpdateEffect(() => {
-    if (!value) return;
-    announce(`Selected Date: ${format(value, "do MMM yyyy")}`);
-  }, [value]);
-
   return {
     calendarId,
     dateValue: value,
@@ -190,6 +191,7 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     selectDate(date: Date) {
       setValue(date);
     },
+    isRangeCalendar: false,
   };
 }
 

src/calendar/RangeCalendarState.ts

@@ -63,21 +63,7 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
     ? makeRange(anchorDate, calendar.focusedDate)
     : value && dateRange && makeRange(dateRange.start, dateRange.end);
 
-  const selectDate = (date: Date) => {
-    if (props.isReadOnly) {
-      return;
-    }
-
-    if (!anchorDate) {
-      setAnchorDate(date);
-    } else {
-      setValue(makeRange(anchorDate, date));
-      setAnchorDate(null);
-    }
-  };
-
-  useUpdateEffect(() => {
-    if (anchorDate) return;
+  const announceRange = React.useCallback(() => {
     if (!highlightedRange) return;
     if (isSameDay(highlightedRange.start, highlightedRange.end)) {
       announce(
@@ -96,6 +82,21 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
     }
   }, [highlightedRange]);
 
+  const selectDate = (date: Date) => {
+    if (props.isReadOnly) {
+      return;
+    }
+
+    if (!anchorDate) {
+      setAnchorDate(date);
+      announce(`Starting range from ${format(date, "do MMM yyyy")}`);
+    } else {
+      setValue(makeRange(anchorDate, date));
+      announceRange();
+      setAnchorDate(null);
+    }
+  };
+
   return {
     ...calendar,
     dateRangeValue: dateRange,
@@ -112,6 +113,7 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
         calendar.setFocusedDate(date);
       }
     },
+    isRangeCalendar: true,
   };
 }
 

src/calendar/__keys.ts

@@ -31,6 +31,7 @@ const CALENDAR_STATE_KEYS = [
   "focusPreviousYear",
   "selectFocusedDate",
   "selectDate",
+  "isRangeCalendar",
 ] as const;
 const RANGE_CALENDAR_STATE_KEYS = [
   ...CALENDAR_STATE_KEYS,

src/calendar/__tests__/RangeCalendar.test.tsx

@@ -119,7 +119,11 @@ describe("RangeCalendar", () => {
     press.Tab();
     press.Tab();
 
-    expect(label("Wednesday, October 7, 2020 selected")).toHaveFocus();
+    expect(
+      label(
+        "Wednesday, October 7, 2020 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
     press.ArrowDown(); // go to down just for some variety
 
     press.Enter(); // start the selection, currently the start and end should be the same date
@@ -145,9 +149,12 @@ describe("RangeCalendar", () => {
     // check if the selection is actually finished or not
     press.ArrowRight();
     press.ArrowRight();
-    expect(label("Wednesday, November 4, 2020")).toHaveFocus();
     expect(
-      label("Wednesday, November 4, 2020")?.parentElement,
+      label("Wednesday, November 4, 2020 (click to start selecting range)"),
+    ).toHaveFocus();
+    expect(
+      label("Wednesday, November 4, 2020 (click to start selecting range)")
+        ?.parentElement,
     ).not.toHaveAttribute("data-is-range-selection");
 
     // Verify selection ranges
@@ -174,7 +181,11 @@ describe("RangeCalendar", () => {
     press.Tab();
     press.Tab();
 
-    expect(label("Monday, October 7, 2019 selected")).toHaveFocus();
+    expect(
+      label(
+        "Monday, October 7, 2019 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
     press.ArrowDown();
     press.Enter(); // start the selection
 

src/calendar/stories/RangeCalendar.stories.tsx

@@ -86,10 +86,7 @@ const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
 export const Default = () => <RangeCalendarComp />;
 export const DefaultValue = () => (
   <RangeCalendarComp
-    defaultValue={{
-      start: format(new Date(), "yyyy-MM-dd"),
-      end: format(addDays(new Date(), 4), "yyyy-MM-dd"),
-    }}
+    defaultValue={{ start: "2019-10-07", end: "2019-10-30" }}
   />
 );
 

src/datepicker/DatePickerSegment.ts

@@ -1,14 +1,12 @@
 import { DatePickerStateReturn } from ".";
+import { unstable_useId as useId } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
 import { DATE_PICKER_SEGMENT_KEYS } from "./__keys";
-import { DateRangePickerStateReturn } from "./DateRangePickerState";
 import { useSegment, SegmentOptions, SegmentHTMLProps } from "../segment";
 
-export type DatePickerSegmentOptions =
-  | SegmentOptions
-  | Partial<DatePickerStateReturn>
-  | Partial<DateRangePickerStateReturn>;
+export type DatePickerSegmentOptions = SegmentOptions &
+  Partial<Pick<DatePickerStateReturn, "pickerId" | "isDateRangePicker">>;
 
 export type DatePickerSegmentHTMLProps = SegmentHTMLProps;
 
@@ -22,6 +20,17 @@ export const useDatePickerSegment = createHook<
   name: "DatePickerSegment",
   compose: useSegment,
   keys: DATE_PICKER_SEGMENT_KEYS,
+
+  useProps(options, htmlProps) {
+    const { id } = useId({ baseId: "datepicker-segment" });
+    return {
+      id,
+      ...(options.isDateRangePicker
+        ? { "aria-labelledby": `${options.pickerId} ${options.baseId} ${id}` }
+        : { "aria-labelledby": id }),
+      ...htmlProps,
+    };
+  },
 });
 
 export const DatePickerSegment = createComponent({

src/datepicker/DatePickerState.ts

@@ -113,6 +113,7 @@ export const useDatePickerState = (props: DatePickerInitialState = {}) => {
     ...popover,
     ...segmentState,
     calendar,
+    isDateRangePicker: false,
   };
 };
 

src/datepicker/DateRangePickerState.ts

@@ -11,10 +11,9 @@ import {
   FocusableProps,
   ValidationState,
 } from "@react-types/shared";
-import { v4 } from "uuid";
 import * as React from "react";
-import { useCompositeState } from "reakit";
 import { useControllableState } from "@chakra-ui/hooks";
+import { useCompositeState, unstable_useId as useId } from "reakit";
 
 import {
   parseDate,
@@ -159,6 +158,9 @@ export const useDateRangePickerState = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoFocus, segmentComposite.first]);
 
+  const { id: startId } = useId({ baseId: "startsegment" });
+  const { id: endId } = useId({ baseId: "endsegment" });
+
   return {
     dateValue: value,
     setDateValue: setValue,
@@ -171,14 +173,15 @@ export const useDateRangePickerState = (
     startSegmentState: {
       ...startSegmentState,
       ...segmentComposite,
-      baseId: v4(),
+      baseId: startId,
     },
     endSegmentState: {
       ...endSegmentState,
       ...segmentComposite,
-      baseId: v4(),
+      baseId: endId,
     },
     calendar,
+    isDateRangePicker: true,
   };
 };
 

src/datepicker/__keys.ts

@@ -1,6 +1,7 @@
 // Automatically generated
 const DATE_PICKER_STATE_KEYS = [
   "calendar",
+  "isDateRangePicker",
   "fieldValue",
   "setFieldValue",
   "segments",
@@ -83,6 +84,7 @@ const DATE_RANGE_PICKER_STATE_KEYS = [
   "startSegmentState",
   "endSegmentState",
   "calendar",
+  "isDateRangePicker",
   "baseId",
   "unstable_idCountRef",
   "visible",

src/datepicker/__tests__/DateRangePicker.test.tsx

@@ -146,12 +146,16 @@ describe("DateRangePicker", () => {
 
     openDatePicker(text, testId);
 
-    expect(label("Sunday, November 15, 2020 selected")).toHaveFocus();
+    expect(
+      label(
+        "Sunday, November 15, 2020 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
 
     // check if current date is selected
-    isEndSelection(label, "Sunday, November 15, 2020 selected");
-    isStartSelection(label, "Sunday, November 15, 2020 selected");
-    isInSelectionRange(label, "Sunday, November 15, 2020 selected");
+    isEndSelection(label, /Sunday, November 15, 2020 selected/i);
+    isStartSelection(label, /Sunday, November 15, 2020 selected/i);
+    isInSelectionRange(label, /Sunday, November 15, 2020 selected/i);
 
     // change date selection
     press.Enter();

src/datepicker/stories/DateRangePicker.stories.tsx

@@ -98,34 +98,36 @@ const DateRangePickerComp: React.FC<DateRangePickerInitialState> = props => {
 
   return (
     <>
-      <DatePicker className="datepicker" {...state}>
+      <DatePicker aria-label="Date Range" className="datepicker" {...state}>
         <div className="datepicker__header">
           <DatePickerSegmentField
             {...state.startSegmentState}
             className="datepicker__field"
+            aria-label="start date"
           >
             {state.startSegmentState.segments.map((segment, i) => (
               <DatePickerSegment
                 key={i}
                 segment={segment}
                 className="datepicker__field--item"
-                {...state.startSegmentState}
                 {...state}
+                {...state.startSegmentState}
               />
             ))}
           </DatePickerSegmentField>
           &nbsp;-&nbsp;
           <DatePickerSegmentField
             {...state.endSegmentState}
             className="datepicker__field"
+            aria-label="end date"
           >
             {state.endSegmentState.segments.map((segment, i) => (
               <DatePickerSegment
                 key={i}
                 segment={segment}
                 className="datepicker__field--item"
-                {...state.endSegmentState}
                 {...state}
+                {...state.endSegmentState}
               />
             ))}
           </DatePickerSegmentField>

src/meter/__keys.ts

@@ -1,11 +1,11 @@
 // Automatically generated
 const METER_STATE_KEYS = [
   "value",
-  "low",
-  "high",
-  "optimum",
   "min",
   "max",
+  "low",
+  "optimum",
+  "high",
   "status",
   "percent",
 ] as const;

src/segment/Segment.ts

@@ -217,7 +217,7 @@ export const useSegment = createHook<SegmentOptions, SegmentHTMLProps>({
         return mergeProps(spinButtonProps, {
           id,
           "aria-label": segment.type,
-          "aria-labelledby": `${options["aria-labelledby"]} ${id}`,
+          "aria-labelledby": `${id}`,
           tabIndex: options.isDisabled ? undefined : 0,
           onKeyDown: callAllHandlers(htmlOnKeyDown, onKeyDown),
           onFocus: callAllHandlers(htmlOnFocus, onFocus),