From d16c483dfc4bb149901d920cb33bbeddff1c17a6 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Wed, 25 Mar 2026 13:58:41 +0100
Subject: [PATCH] wip

---
 src/calendar/grid/index.tsx                   | 13 ++++--
 src/calendar/internal.tsx                     |  6 ++-
 .../__tests__/date-picker.test.tsx            | 40 ++++++++++++++++-
 src/date-picker/index.tsx                     |  4 ++
 .../__tests__/date-range-picker.test.tsx      | 44 ++++++++++++++++++-
 .../calendar/grids/grid-cell.tsx              |  4 +-
 src/date-range-picker/calendar/grids/grid.tsx |  2 +
 .../calendar/grids/index.tsx                  |  3 ++
 .../calendar/grids/interfaces.ts              |  2 +
 src/date-range-picker/calendar/index.tsx      |  2 +
 src/date-range-picker/calendar/interfaces.ts  |  1 +
 src/date-range-picker/dropdown.tsx            |  3 ++
 src/date-range-picker/index.tsx               |  3 ++
 src/dropdown/internal.tsx                     |  4 +-
 src/tooltip/internal.tsx                      |  9 +++-
 15 files changed, 129 insertions(+), 11 deletions(-)

diff --git a/src/calendar/grid/index.tsx b/src/calendar/grid/index.tsx
index 6bb82b18b1..1cc76e36c0 100644
--- a/src/calendar/grid/index.tsx
+++ b/src/calendar/grid/index.tsx
@@ -47,22 +47,24 @@ export interface GridProps {
   renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;
   isSameDate: (date: Date, baseDate: Date) => boolean;
   onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;
+  referrerId?: string;
 }
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
-  const ref = useRef<HTMLTableCellElement>(null);
+  const cellRef = useRef<HTMLTableCellElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
     <td
-      ref={useMergeRefs(focusedDateRef, ref)}
+      ref={useMergeRefs(focusedDateRef, cellRef)}
       {...(isDisabledWithReason ? targetProps : {})}
       {...rest}
       onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}
@@ -77,9 +79,10 @@ const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTM
           {showTooltip && (
             <Tooltip
               className={styles['disabled-reason-tooltip']}
-              getTrack={() => ref.current}
+              getTrack={() => cellRef.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>
@@ -105,6 +108,7 @@ export default function Grid({
   renderDateAnnouncement,
   isSameDate,
   onGridKeyDownHandler,
+  referrerId,
 }: GridProps) {
   const focusedDateRef = useRef<HTMLTableCellElement>(null);
 
@@ -166,6 +170,7 @@ export default function Grid({
                     [styles['calendar-date-dense']]: denseGrid,
                   })}
                   disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                  referrerId={referrerId}
                 >
                   <span className={styles['date-inner']} aria-hidden="true">
                     {renderDate(date)}
diff --git a/src/calendar/internal.tsx b/src/calendar/internal.tsx
index e806bbd090..512e70160e 100644
--- a/src/calendar/internal.tsx
+++ b/src/calendar/internal.tsx
@@ -26,6 +26,8 @@ import { getBaseMonth } from './utils/navigation-month';
 
 import styles from './styles.css.js';
 
+type InternalCalendarProps = CalendarProps & InternalBaseComponentProps & { referrerId?: string };
+
 export default function Calendar({
   value,
   locale = '',
@@ -39,11 +41,12 @@ export default function Calendar({
   __internalRootRef,
   i18nStrings,
   granularity = 'day',
+  referrerId,
   previousMonthAriaLabel,
   nextMonthAriaLabel,
   todayAriaLabel,
   ...rest
-}: CalendarProps & InternalBaseComponentProps) {
+}: InternalCalendarProps) {
   checkControlled('Calendar', 'value', value, 'onChange', onChange);
 
   const baseProps = getBaseProps(rest);
@@ -188,6 +191,7 @@ export default function Calendar({
             renderDateAnnouncement={renderDateAnnouncement}
             isSameDate={isSameDate}
             onGridKeyDownHandler={onGridKeyDownHandler}
+            referrerId={referrerId}
           />
         </div>
       </div>
diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx
index 8af0b715ae..2a34be7624 100644
--- a/src/date-picker/__tests__/date-picker.test.tsx
+++ b/src/date-picker/__tests__/date-picker.test.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import DatePicker, { DatePickerProps } from '../../../lib/components/date-picker';
 import FormField from '../../../lib/components/form-field';
@@ -488,3 +488,41 @@ describe('i18n', () => {
     );
   });
 });
+
+describe('disabled reason behavior', () => {
+  test('clicking on disabled reason does not close the calendar', () => {
+    const { wrapper } = renderDatePicker({
+      ...defaultProps,
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findOpenCalendarButton().click();
+    expect(wrapper.findCalendar()).not.toBe(null);
+
+    wrapper.findCalendar()!.findDateAt(1, 1).focus();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.click();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()).not.toBe(null);
+    expect(wrapper.findCalendar()).not.toBe(null);
+  });
+
+  test('disabled reason tooltip can be closed with Escape', () => {
+    const { wrapper } = renderDatePicker({
+      ...defaultProps,
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findOpenCalendarButton().click();
+    expect(wrapper.findCalendar()).not.toBe(null);
+
+    wrapper.findCalendar()!.findDateAt(1, 1).focus();
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    fireEvent.keyDown(wrapper.findCalendar()!.findDateAt(1, 1).getElement(), { key: 'Escape', code: 'Escape' });
+    expect(wrapper.findCalendar()).not.toBe(null);
+    expect(wrapper.findCalendar()!.findDateAt(1, 1).findDisabledReason()).toBe(null);
+  });
+});
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
index 3f4b522820..3b8c920ed7 100644
--- a/src/date-picker/index.tsx
+++ b/src/date-picker/index.tsx
@@ -180,6 +180,8 @@ const DatePicker = React.forwardRef(
 
     baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);
 
+    const referrerId = useUniqueId();
+
     return (
       <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>
         {disabled || readOnly ? (
@@ -195,6 +197,7 @@ const DatePicker = React.forwardRef(
             expandToViewport={expandToViewport}
             scrollable={false}
             dropdownId={dropdownId}
+            triggerId={referrerId}
             content={
               isDropDownOpen ? (
                 <FocusLock className={styles['focus-lock']} autoFocus={true}>
@@ -220,6 +223,7 @@ const DatePicker = React.forwardRef(
                         nextMonthAriaLabel: i18nStrings?.nextMonthAriaLabel ?? nextMonthAriaLabel,
                         previousMonthAriaLabel: i18nStrings?.previousMonthAriaLabel ?? previousMonthAriaLabel,
                       }}
+                      referrerId={referrerId}
                     />
                     <InternalLiveRegion id={calendarDescriptionId} hidden={true} tagName="span">
                       {getBaseDateLabel({ date: baseDate, granularity, locale: normalizedLocale })}
diff --git a/src/date-range-picker/__tests__/date-range-picker.test.tsx b/src/date-range-picker/__tests__/date-range-picker.test.tsx
index 29d1518b8e..642a8d431e 100644
--- a/src/date-range-picker/__tests__/date-range-picker.test.tsx
+++ b/src/date-range-picker/__tests__/date-range-picker.test.tsx
@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import Mockdate from 'mockdate';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -585,3 +585,45 @@ describe('Date range picker', () => {
     });
   });
 });
+
+describe('disabled reason behavior', () => {
+  const findDate = (wrapper: DateRangePickerWrapper) => wrapper.findDropdown()!.findDateAt('left', 1, 1);
+
+  test('clicking on disabled reason does not close the calendar', () => {
+    const { wrapper } = renderDateRangePicker({
+      ...defaultProps,
+      rangeSelectorMode: 'absolute-only',
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findTrigger().click();
+    expect(wrapper.findDropdown()).not.toBe(null);
+
+    findDate(wrapper).focus();
+    expect(findDate(wrapper).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    findDate(wrapper).findDisabledReason()!.click();
+    expect(findDate(wrapper).findDisabledReason()).not.toBe(null);
+    expect(wrapper.findDropdown()).not.toBe(null);
+  });
+
+  test('disabled reason tooltip can be closed with Escape', () => {
+    const { wrapper } = renderDateRangePicker({
+      ...defaultProps,
+      rangeSelectorMode: 'absolute-only',
+      isDateEnabled: () => false,
+      dateDisabledReason: () => 'Test',
+    });
+
+    wrapper.findTrigger().click();
+    expect(wrapper.findDropdown()).not.toBe(null);
+
+    findDate(wrapper).focus();
+    expect(findDate(wrapper).findDisabledReason()!.getElement()).toHaveTextContent('Test');
+
+    fireEvent.keyDown(findDate(wrapper).getElement(), { key: 'Escape', code: 'Escape' });
+    expect(wrapper.findDropdown()).not.toBe(null);
+    expect(findDate(wrapper).findDisabledReason()).toBe(null);
+  });
+});
diff --git a/src/date-range-picker/calendar/grids/grid-cell.tsx b/src/date-range-picker/calendar/grids/grid-cell.tsx
index 5adea27fc1..8c0cffd79f 100644
--- a/src/date-range-picker/calendar/grids/grid-cell.tsx
+++ b/src/date-range-picker/calendar/grids/grid-cell.tsx
@@ -12,10 +12,11 @@ import testutilStyles from '../../test-classes/styles.css.js';
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
   const ref = useRef<HTMLTableCellElement>(null);
@@ -73,6 +74,7 @@ export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.
               getTrack={() => ref.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>
diff --git a/src/date-range-picker/calendar/grids/grid.tsx b/src/date-range-picker/calendar/grids/grid.tsx
index aa49b29fd5..1efbf26284 100644
--- a/src/date-range-picker/calendar/grids/grid.tsx
+++ b/src/date-range-picker/calendar/grids/grid.tsx
@@ -86,6 +86,7 @@ export function Grid({
   className,
   startOfWeek: rawStartOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: GridProps) {
   const baseDateTime = baseDate?.getTime();
   const i18n = useInternalI18n('date-range-picker');
@@ -275,6 +276,7 @@ export function Grid({
                       aria-disabled={!isEnabled}
                       tabIndex={tabIndex}
                       disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                      referrerId={referrerId}
                       {...handlers}
                     >
                       <span className={styles[`${granularity}-inner`]} aria-hidden="true">
diff --git a/src/date-range-picker/calendar/grids/index.tsx b/src/date-range-picker/calendar/grids/index.tsx
index d555335da6..09368eb535 100644
--- a/src/date-range-picker/calendar/grids/index.tsx
+++ b/src/date-range-picker/calendar/grids/index.tsx
@@ -62,6 +62,7 @@ export const Grids = ({
   headingIdPrefix,
   startOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: SelectGridProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [gridHasFocus, setGridHasFocus] = useState(false);
@@ -196,6 +197,7 @@ export const Grids = ({
             className={testutilStyles['first-grid']}
             baseDate={addPages(baseDate, -1)}
             ariaLabelledby={`${headingIdPrefix}-prev${pageUnit}`}
+            referrerId={referrerId}
           />
         )}
         <Grid
@@ -204,6 +206,7 @@ export const Grids = ({
           className={testutilStyles['second-grid']}
           baseDate={baseDate}
           ariaLabelledby={`${headingIdPrefix}-current${pageUnit}`}
+          referrerId={referrerId}
         />
       </InternalSpaceBetween>
     </div>
diff --git a/src/date-range-picker/calendar/grids/interfaces.ts b/src/date-range-picker/calendar/grids/interfaces.ts
index 432a6b5204..7121c33c57 100644
--- a/src/date-range-picker/calendar/grids/interfaces.ts
+++ b/src/date-range-picker/calendar/grids/interfaces.ts
@@ -34,6 +34,7 @@ export interface GridProps extends GridBaseProps, Required<Pick<CalendarProps, '
   currentMonthAriaLabel?: string;
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
+  referrerId?: string;
 }
 
 export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'granularity'> {
@@ -53,4 +54,5 @@ export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'gra
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
   currentMonthAriaLabel?: string;
+  referrerId?: string;
 }
diff --git a/src/date-range-picker/calendar/index.tsx b/src/date-range-picker/calendar/index.tsx
index 84de2b5adb..bb40bf0090 100644
--- a/src/date-range-picker/calendar/index.tsx
+++ b/src/date-range-picker/calendar/index.tsx
@@ -52,6 +52,7 @@ export default function DateRangePickerCalendar({
   dateInputFormat,
   customAbsoluteRangeControl,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerCalendarProps) {
   const isSingleGrid = useMobile();
   const isMonthPicker = granularity === 'month';
@@ -273,6 +274,7 @@ export default function DateRangePickerCalendar({
               selectedStartDate={value?.start?.date ? parseDate(value.start.date, !isMonthPicker) : null}
               selectedEndDate={value?.end?.date ? parseDate(value.end.date, !isMonthPicker) : null}
               headingIdPrefix={headingIdPrefix}
+              referrerId={referrerId}
             />
           </div>
 
diff --git a/src/date-range-picker/calendar/interfaces.ts b/src/date-range-picker/calendar/interfaces.ts
index 317a3a34a2..850d67a7fb 100644
--- a/src/date-range-picker/calendar/interfaces.ts
+++ b/src/date-range-picker/calendar/interfaces.ts
@@ -55,6 +55,7 @@ export interface DateRangePickerCalendarProps
   value: DateRangePickerProps.PendingAbsoluteValue;
   setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;
   i18nStrings?: RangeCalendarI18nStrings;
+  referrerId?: string;
 }
 
 export interface RangeInputsProps
diff --git a/src/date-range-picker/dropdown.tsx b/src/date-range-picker/dropdown.tsx
index 521dcac98e..69e49ff624 100644
--- a/src/date-range-picker/dropdown.tsx
+++ b/src/date-range-picker/dropdown.tsx
@@ -62,6 +62,7 @@ interface DateRangePickerDropdownProps
   isSingleGrid: boolean;
   customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
   renderRelativeRangeContent: DateRangePickerProps.RelativeRangeControl | undefined;
+  referrerId?: string;
 }
 
 export function DateRangePickerDropdown({
@@ -91,6 +92,7 @@ export function DateRangePickerDropdown({
   customRelativeRangeUnits,
   renderRelativeRangeContent,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerDropdownProps) {
   const i18n = useInternalI18n('date-range-picker');
   const isMonthPicker = granularity === 'month';
@@ -216,6 +218,7 @@ export function DateRangePickerDropdown({
                       dateInputFormat={dateInputFormat}
                       customAbsoluteRangeControl={customAbsoluteRangeControl}
                       granularity={granularity}
+                      referrerId={referrerId}
                     />
                   )}
 
diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx
index 855246632f..48ae2ad3ee 100644
--- a/src/date-range-picker/index.tsx
+++ b/src/date-range-picker/index.tsx
@@ -308,6 +308,7 @@ const DateRangePicker = React.forwardRef(
     );
 
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    const referrerId = useUniqueId();
 
     return (
       <div
@@ -328,6 +329,7 @@ const DateRangePicker = React.forwardRef(
           trigger={trigger}
           expandToViewport={expandToViewport}
           dropdownId={dropdownId}
+          triggerId={referrerId}
           content={
             /* Reset form field context to prevent a wrapper form field from labelling all inputs inside the dropdown. */
             <ResetContextsForModal>
@@ -359,6 +361,7 @@ const DateRangePicker = React.forwardRef(
                   customRelativeRangeUnits={customRelativeRangeUnits}
                   renderRelativeRangeContent={renderRelativeRangeContent}
                   granularity={granularity}
+                  referrerId={referrerId}
                 />
               )}
             </ResetContextsForModal>
diff --git a/src/dropdown/internal.tsx b/src/dropdown/internal.tsx
index 20ce299cde..bc930c2d3d 100644
--- a/src/dropdown/internal.tsx
+++ b/src/dropdown/internal.tsx
@@ -504,8 +504,8 @@ const InternalDropdown = ({
     };
   }, [open, expandToViewport, isMobile, triggerRef]);
 
-  const generatedReferrerId = useUniqueId();
-  const referrerId = externalTriggerId || generatedReferrerId;
+  const internalReferrerId = useUniqueId();
+  const referrerId = externalTriggerId ?? internalReferrerId;
 
   // Compute CSS variable values for min/max width
   // These will be used by the use-flexible-width CSS class
diff --git a/src/tooltip/internal.tsx b/src/tooltip/internal.tsx
index 1b49c087ca..e85791b450 100644
--- a/src/tooltip/internal.tsx
+++ b/src/tooltip/internal.tsx
@@ -16,7 +16,12 @@ import { InternalTooltipProps } from './interfaces';
 
 import testUtilStyles from './test-classes/styles.css.js';
 
-type InternalTooltipComponentProps = InternalTooltipProps & InternalBaseComponentProps;
+type InternalTooltipComponentProps = InternalTooltipProps &
+  InternalBaseComponentProps & {
+    // ID of the associated trigger. When the trigger and the tooltip are connected via referrer ID, the
+    // nodeBelongs(triggerNode, tooltipNode) returns true.
+    referrerId?: string;
+  };
 
 export default function InternalTooltip({
   content,
@@ -24,6 +29,7 @@ export default function InternalTooltip({
   className,
   position = 'top',
   onEscape,
+  referrerId,
   __internalRootRef,
   ...restProps
 }: InternalTooltipComponentProps) {
@@ -66,6 +72,7 @@ export default function InternalTooltip({
         {...baseProps}
         className={clsx(testUtilStyles.root, baseProps.className)}
         ref={__internalRootRef}
+        data-awsui-referrer-id={referrerId}
         role="tooltip"
       >
         <Transition in={true}>