Unfocused calendar inputs show date description

packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx

@@ -71,6 +71,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
         </Heading>
       )}
       <TravelDateSingleTextInputField
+        {...inputProps}
         value={value}
         onValueChange={onValueChangeByInputs}
         localeCode={localeCode}

packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx

@@ -77,6 +77,7 @@ export const TravelDateRangeCalendar: React.FC<
         </Heading>
       )}
       <TravelDateTextInputFields
+        {...inputProps}
         value={value}
         onValueChange={onValueChangeByInputs}
         localeCode={localeCode}

packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx

@@ -166,6 +166,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
         zIndex={calendarInDom ? zIndex : zIndexWhenClosed}
       >
         <TravelDateSingleTextInputField
+          {...inputProps}
           value={value}
           onValueChange={onValueChangeByInputs}
           localeCode={localeCode}

packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx

@@ -170,6 +170,7 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
         zIndex={calendarInDom ? zIndex : zIndexWhenClosed}
       >
         <TravelDateTextInputFields
+          {...inputProps}
           value={value}
           onValueChange={onValueChangeByInputs}
           localeCode={localeCode}

packages/calendar/src/features/travel-calendar/components/TravelDateSingleTextInputField.tsx

@@ -15,6 +15,7 @@ export interface TravelDateSingleTextInputFieldProps {
   onFocus?: () => void;
   calendarSize: TravelCalendarSizeVariant;
   placeholderWhenBlurred: string | undefined;
+  valueWhenBlurred: string | undefined;
 }
 
 export const TravelDateSingleTextInputField: React.FC<
@@ -27,6 +28,7 @@ export const TravelDateSingleTextInputField: React.FC<
   onFocus,
   calendarSize,
   placeholderWhenBlurred,
+  valueWhenBlurred,
 }) => {
   const { mask, placeholder } = useMemo(() => {
     const dateFormatForLocaleCode = getDateFormatForLocaleCode(localeCode);
@@ -53,6 +55,7 @@ export const TravelDateSingleTextInputField: React.FC<
         placeholder={placeholder}
         calendarSize={calendarSize}
         placeholderWhenBlurred={placeholderWhenBlurred}
+        valueWhenBlurred={valueWhenBlurred}
       />
     </Row>
   );

packages/calendar/src/features/travel-calendar/components/TravelDateTextInput.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { FocusEventHandler, useCallback, useRef, useState } from "react";
 import {
   LabelledTextInput,
   LabelledTextInputProps,
 } from "@stenajs-webui/forms";
-import { FocusEventHandler, useCallback, useRef, useState } from "react";
 import {
   InputMask,
   InputMaskPipe,
@@ -22,6 +22,7 @@ export interface TravelDateTextInputProps extends LabelledTextInputProps {
   showMask?: boolean;
   calendarSize: TravelCalendarSizeVariant;
   placeholderWhenBlurred: string | undefined;
+  valueWhenBlurred: string | undefined;
 }
 
 export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
@@ -39,6 +40,7 @@ export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
   onBlur,
   placeholderWhenBlurred,
   placeholder,
+  valueWhenBlurred,
   ...inputProps
 }) => {
   const inputRef = useRef(null);
@@ -54,7 +56,8 @@ export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
     guide,
     keepCharPositions,
     placeholderChar,
-    showMask
+    showMask,
+    isFocused
   );
 
   const onFocusHandler = useCallback<FocusEventHandler<HTMLInputElement>>(
@@ -80,6 +83,8 @@ export const TravelDateTextInput: React.FC<TravelDateTextInputProps> = ({
   return (
     <LabelledTextInput
       {...inputProps}
+      aria-live={"polite"}
+      value={(!isFocused ? valueWhenBlurred : value) ?? ""}
       ref={inputRef}
       placeholder={activePlaceholder}
       onFocus={onFocusHandler}

packages/calendar/src/features/travel-calendar/components/TravelDateTextInputFields.tsx

@@ -20,6 +20,8 @@ export interface TravelDateTextInputFieldsProps {
   calendarSize: TravelCalendarSizeVariant;
   placeholderWhenBlurredStartDate: string | undefined;
   placeholderWhenBlurredEndDate: string | undefined;
+  valueWhenBlurredStartDate: string | undefined;
+  valueWhenBlurredEndDate: string | undefined;
 }
 
 export const TravelDateTextInputFields: React.FC<
@@ -34,6 +36,8 @@ export const TravelDateTextInputFields: React.FC<
   calendarSize,
   placeholderWhenBlurredStartDate,
   placeholderWhenBlurredEndDate,
+  valueWhenBlurredStartDate,
+  valueWhenBlurredEndDate,
 }) => {
   const { mask, placeholder } = useMemo(() => {
     const dateFormatForLocaleCode = getDateFormatForLocaleCode(localeCode);
@@ -65,6 +69,7 @@ export const TravelDateTextInputFields: React.FC<
         borderRadiusVariant={"onlyLeft"}
         placeholder={placeholder}
         placeholderWhenBlurred={placeholderWhenBlurredStartDate}
+        valueWhenBlurred={valueWhenBlurredStartDate}
         calendarSize={calendarSize}
       />
       <TravelDateTextInput
@@ -85,6 +90,7 @@ export const TravelDateTextInputFields: React.FC<
         borderRadiusVariant={"onlyRight"}
         placeholder={placeholder}
         placeholderWhenBlurred={placeholderWhenBlurredEndDate}
+        valueWhenBlurred={valueWhenBlurredEndDate}
         calendarSize={calendarSize}
       />
     </Row>

packages/calendar/src/features/travel-calendar/hooks/UseTravelDateInput.ts

@@ -11,6 +11,7 @@ import { getMonthInYear } from "../../../util/calendar/CalendarDataFactory";
 import { startCase } from "lodash-es";
 import { formatLocalizedDate } from "../../localize-date-format/LocalizedDateFormatter";
 import { VisiblePanel } from "../types";
+import { formatDateDescription } from "../util/DateDescriptionFormatter";
 
 export const useTravelDateInput = (
   value: string | undefined,
@@ -39,6 +40,14 @@ export const useTravelDateInput = (
     [dateFormat.length, localeCode, value]
   );
 
+  const valueWhenBlurred = useMemo(
+    () =>
+      selectedDate != null
+        ? formatDateDescription(selectedDate, today, locale)
+        : undefined,
+    [locale, selectedDate, today]
+  );
+
   const [visibleMonth, setVisibleMonth] = useState<Date>(
     initialMonthInFocus ?? selectedDate ?? new Date()
   );
@@ -124,5 +133,6 @@ export const useTravelDateInput = (
     selectedDate,
     today,
     visibleMonth,
+    valueWhenBlurred,
   };
 };

packages/calendar/src/features/travel-calendar/hooks/UseTravelDateRangeInput.ts

@@ -11,6 +11,7 @@ import { getMonthInYear } from "../../../util/calendar/CalendarDataFactory";
 import { startCase } from "lodash-es";
 import { formatLocalizedDate } from "../../localize-date-format/LocalizedDateFormatter";
 import { TravelDateRangeInputValue, VisiblePanel } from "../types";
+import { formatDateDescription } from "../util/DateDescriptionFormatter";
 
 export const useTravelDateRangeInput = (
   value: TravelDateRangeInputValue | undefined,
@@ -47,6 +48,22 @@ export const useTravelDateRangeInput = (
     [dateFormat.length, localeCode, value?.endDate]
   );
 
+  const valueWhenBlurredStartDate = useMemo(
+    () =>
+      selectedStartDate != null
+        ? formatDateDescription(selectedStartDate, today, locale)
+        : undefined,
+    [locale, selectedStartDate, today]
+  );
+
+  const valueWhenBlurredEndDate = useMemo(
+    () =>
+      selectedEndDate != null
+        ? formatDateDescription(selectedEndDate, today, locale)
+        : undefined,
+    [locale, selectedEndDate, today]
+  );
+
   const [visibleMonth, setVisibleMonth] = useState<Date>(
     initialMonthInFocus ?? selectedStartDate ?? new Date()
   );
@@ -185,5 +202,7 @@ export const useTravelDateRangeInput = (
     selectedEndDate,
     today,
     visibleMonth,
+    valueWhenBlurredStartDate,
+    valueWhenBlurredEndDate,
   };
 };

packages/calendar/src/features/travel-calendar/util/DateDescriptionFormatter.ts

@@ -0,0 +1,27 @@
+import { format, isSameYear, Locale } from "date-fns";
+
+export const formatDateDescription = (
+  date: Date,
+  today: Date,
+  locale: Locale
+) => {
+  const year = isSameYear(date, today) ? "" : " y";
+  if (locale.code.startsWith("en")) {
+    return format(date, "eee MMM d" + year, { locale }).replace(".", "");
+  } else {
+    return format(date, "eee d MMM" + year, { locale }).replace(".", "");
+  }
+};
+
+export const formatDateDescriptionLong = (
+  date: Date,
+  today: Date,
+  locale: Locale
+) => {
+  const year = isSameYear(date, today) ? "" : " y";
+  if (locale.code.startsWith("en")) {
+    return format(date, "eeee MMMM d" + year, { locale });
+  } else {
+    return format(date, "eeee d MMMM" + year, { locale });
+  }
+};

packages/input-mask/src/hooks/UseInputMask.ts

@@ -16,7 +16,8 @@ export const useMaskedInput = (
   guide: boolean = false,
   keepCharPositions: boolean = false,
   placeholderChar: string = "\u2000",
-  showMask: boolean = true
+  showMask: boolean = true,
+  enabled: boolean = true
 ) => {
   const textMask = useRef(null);
 
@@ -33,8 +34,10 @@ export const useMaskedInput = (
       showMask,
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (textMask.current as any).update(initialValue);
+    if (enabled) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (textMask.current as any).update(initialValue);
+    }
   }, [
     inputRef,
     guide,
@@ -44,6 +47,7 @@ export const useMaskedInput = (
     placeholderChar,
     showMask,
     initialValue,
+    enabled,
   ]);
 
   return {