final code changes

Author: mark-tate

.yarnrc.yml

@@ -2,10 +2,6 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
-httpProxy: "http://proxy.jpmchase.net:9443"
-
-httpsProxy: "http://proxy.jpmchase.net:9443"
-
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.10.3.cjs

packages/core/src/aria-announcer/AriaAnnouncerProvider.tsx

@@ -12,7 +12,7 @@ import {
   AriaAnnouncerContext,
 } from "./AriaAnnouncerContext";
 
-export const ANNOUNCEMENT_TIME_IN_DOM = 3000; // time between DOM updates
+export const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates
 
 export interface AriaAnnouncerProviderProps
   extends ComponentPropsWithRef<"div"> {}
@@ -51,21 +51,21 @@ export const AriaAnnouncerProvider = forwardRef<
           return previous.concat({ id, message });
         });
 
-        setTimeout(() => {
-          setPoliteAnnouncements((previous) =>
-            previous.filter((announcement) => announcement.id !== id),
-          );
-        }, ANNOUNCEMENT_TIME_IN_DOM);
+          setTimeout(() => {
+            setPoliteAnnouncements((previous) =>
+              previous.filter((announcement) => announcement.id !== id),
+            );
+          }, ANNOUNCEMENT_TIME_IN_DOM);
       } else {
         setAssertiveAnnouncements((previous) => {
           return previous.concat({ id, message });
         });
 
-        setTimeout(() => {
-          setAssertiveAnnouncements((previous) =>
-            previous.filter((announcement) => announcement.id !== id),
-          );
-        }, ANNOUNCEMENT_TIME_IN_DOM);
+          setTimeout(() => {
+            setAssertiveAnnouncements((previous) =>
+              previous.filter((announcement) => announcement.id !== id),
+            );
+          }, ANNOUNCEMENT_TIME_IN_DOM);
       }
     },
     [],
@@ -77,17 +77,15 @@ export const AriaAnnouncerProvider = forwardRef<
       legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},
     ) => {
       const delay =
-        typeof legacyDelayOrOptions === "number" ? legacyDelayOrOptions : 15000;
+        typeof legacyDelayOrOptions === "number" ? legacyDelayOrOptions : null;
 
       const assertiveness =
         typeof legacyDelayOrOptions === "object"
           ? legacyDelayOrOptions.ariaLive
           : undefined;
 
       if (delay) {
-        console.log('make announcement before delay', announcement, assertiveness, delay);
         setTimeout(() => {
-          console.log('make announcement after delay', announcement, assertiveness);
           makeAnnouncement(announcement, assertiveness);
         }, delay);
       } else {
@@ -127,12 +125,12 @@ export const AriaAnnouncerProvider = forwardRef<
       >
         <AnnouncementRegion aria-live="polite">
           {politeAnnouncements.map((announcement) => (
-            <div key={announcement.id}>{announcement.message}</div>
+            <div key={`polite-${announcement.id}`}>{announcement.message}</div>
           ))}
         </AnnouncementRegion>
         <AnnouncementRegion aria-live="assertive">
           {assertiveAnnouncements.map((announcement) => (
-            <div key={announcement.id}>{announcement.message}</div>
+            <div key={`assertive-${announcement.id}`}>{announcement.message}</div>
           ))}
         </AnnouncementRegion>
       </div>

packages/lab/src/calendar/useCalendar.ts

@@ -884,7 +884,6 @@ export function useCalendar<TDate extends DateFrameworkType>(
           exceededRangeLimit !== 0)
       ) {
         if (exceededRangeLimit !== 0) {
-          console.log("set error", exceededRangeLimit, focusedDate);
           announce(
             exceededRangeLimit < 0
               ? "minFocusableDateExceeded"

packages/lab/src/calendar/useCalendarDay.ts

@@ -120,8 +120,8 @@ export function useCalendarDay<TDate extends DateFrameworkType>(
   const outOfRange = !dateAdapter.isSame(date, month, "month");
   const unselectable =
     Boolean(unselectableReason) ||
-    isOutsideAllowedMonths(date) ||
-    isOutsideAllowedDates(date);
+    !!isOutsideAllowedMonths(date) ||
+    !!isOutsideAllowedDates(date);
   const highlighted = Boolean(highlightedReason);
   const hidden = hideOutOfRangeDates ? outOfRange : false;
 

packages/lab/src/calendar/useCalendarSelection.ts

@@ -531,7 +531,7 @@ export function useCalendarSelectionDay<TDate extends DateFrameworkType>({
 }) {
   const { dateAdapter } = useLocalization<TDate>();
   const {
-    state: { selectionVariant },
+    state: { selectionVariant, minDate, maxDate },
     helpers: {
       setSelectedDate,
       isSameDay,
@@ -595,6 +595,12 @@ export function useCalendarSelectionDay<TDate extends DateFrameworkType>({
     ariaLabel = `Start new range: ${formattedDate}`;
   } else if (hoveredEnd) {
     ariaLabel = `Complete new range: ${formattedDate}`;
+  } else {
+    if (dateAdapter.isSame(minDate, date, "day")) {
+      ariaLabel = `${formattedDate}, minimum date`;
+    } else if (dateAdapter.isSame(maxDate, date, "day")) {
+      ariaLabel = `${formattedDate}, maximum date`;
+    }
   }
 
   return {

packages/lab/src/calendar/useDateSelectionAnnouncer.ts

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "react";
 import type {DateFrameworkType, SaltDateAdapter} from "@salt-ds/date-adapters";
 import { useAriaAnnouncer } from "@salt-ds/core";
 import {
@@ -11,12 +12,17 @@ export type CreateAnnouncement<TDate extends DateFrameworkType> = (
   dateAdapter: SaltDateAdapter<TDate>,
 ) => string | undefined;
 
+const DEBOUNCE_MSECS = 2000;
+
 export function useDateSelectionAnnouncer<TDate extends DateFrameworkType>(
   createAnnouncement: CreateAnnouncement<TDate> | null | undefined,
   dateAdapter: SaltDateAdapter<TDate>,
 ) {
   const { announce: saltAnnouncer } = useAriaAnnouncer();
 
+  const latestAnnouncementRef = useRef<string | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
   /**
    * Call this function with the announcement type and the state needed for that announcement.
    * Example:
@@ -31,12 +37,30 @@ export function useDateSelectionAnnouncer<TDate extends DateFrameworkType>(
       return;
     }
     const announcement = createAnnouncement(announcementType, state ?? {}, dateAdapter);
-    console.log('....', announcement);
 
     if (announcement) {
-      saltAnnouncer(announcement, { delay: 3000});
+      latestAnnouncementRef.current = announcement;
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(() => {
+        if (latestAnnouncementRef.current) {
+          saltAnnouncer(latestAnnouncementRef.current);
+          latestAnnouncementRef.current = null;
+        }
+      }, DEBOUNCE_MSECS);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
     }
   };
+  }, []);
 
   return { announce };
 }

packages/lab/src/date-picker/DatePickerRangeInput.tsx

@@ -291,6 +291,7 @@ export const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<
             sentiment="neutral"
             onClick={handleCalendarButton}
             disabled={disabled}
+            aria-haspopup="dialog"
             aria-label="Open Calendar"
             aria-expanded={open}
           >

packages/lab/src/date-picker/DatePickerSingleInput.tsx

@@ -206,6 +206,7 @@ export const DatePickerSingleInput = forwardRef<
               sentiment="neutral"
               onClick={handleCalendarButton}
               disabled={disabled}
+              aria-haspopup="dialog"
               aria-label="Open Calendar"
               aria-expanded={open}
             >