@transferwise/components 46.156.0 → 46.157.0

package/src/Calendar/Calendar.disabledDates.test.tsx

@@ -0,0 +1,610 @@
+import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import Calendar from './Calendar';
+import type { DisabledRules } from './Calendar.types';
+
+mockMatchMedia();
+
+const user = userEvent.setup();
+
+// 2024-07-01 is a Monday
+const initialValue = new Date(2024, 6, 1);
+
+const weekendRules: DisabledRules = {
+  weekdays: ['sat', 'sun'],
+  reason: 'We are closed on weekends.',
+};
+
+const bankHolidayRules: DisabledRules = {
+  dates: [new Date(2024, 6, 4), new Date(2024, 6, 11)],
+  reason: 'The service is unavailable on bank holidays.',
+};
+
+const rangeRules: DisabledRules = {
+  ranges: [{ start: new Date(2024, 6, 15), end: new Date(2024, 6, 19) }],
+  reason: 'Scheduled maintenance.',
+};
+
+describe('Calendar - disabled dates', () => {
+  describe('rendering disabled state', () => {
+    it('renders disabled weekday cells with aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      // 2024-07-06 is Saturday
+      const saturday = screen.getByLabelText(/^6 July 2024/u);
+      expect(saturday).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('renders enabled weekday cells without aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      // 2024-07-01 is Monday
+      const monday = screen.getByLabelText(/^1 July 2024.*selected/iu);
+      expect(monday).not.toHaveAttribute('aria-disabled');
+    });
+
+    it('renders disabled specific date cells with aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={bankHolidayRules} />);
+
+      const holiday = screen.getByLabelText(/^4 July 2024/u);
+      expect(holiday).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('renders disabled range cells with aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={rangeRules} />);
+
+      const rangeDate = screen.getByLabelText(/16 July 2024/u);
+      expect(rangeDate).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('disabled cells are not natively disabled (remain interactive)', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const saturday = screen.getByLabelText(/^6 July 2024/u);
+      expect(saturday).toBeEnabled();
+    });
+  });
+
+  describe('click interaction', () => {
+    it('fires onDateFocus exactly once when an enabled date cell is clicked', async () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={bankHolidayRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+      handleDateFocus.mockClear();
+
+      await user.click(screen.getByLabelText(/^3 July 2024/u));
+
+      expect(handleDateFocus).toHaveBeenCalledTimes(1);
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 3), { isEnabled: true });
+    });
+
+    it('fires onDateFocus with isEnabled: false when clicking a rule-disabled date', async () => {
+      const handleDateFocus = jest.fn();
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={bankHolidayRules}
+          onDateFocus={handleDateFocus}
+          onChange={handleChange}
+        />,
+      );
+
+      const holiday = screen.getByLabelText(/^4 July 2024/u);
+      await user.click(holiday);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 4), { isEnabled: false });
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('fires onDateFocus and onChange when clicking an enabled date', async () => {
+      const handleDateFocus = jest.fn();
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={bankHolidayRules}
+          onDateFocus={handleDateFocus}
+          onChange={handleChange}
+        />,
+      );
+
+      const enabledDate = screen.getByLabelText(/^3 July 2024/u);
+      await user.click(enabledDate);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 3), { isEnabled: true });
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 3));
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('does NOT skip disabled dates and fires onDateFocus with isEnabled: false', async () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 5)}
+          disabledRules={weekendRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // ArrowRight from July 5 (Friday) should go to July 6 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 6), { isEnabled: false });
+    });
+
+    it('fires onDateFocus with isEnabled: true when navigating to an enabled date', async () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 1)}
+          disabledRules={weekendRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // ArrowRight from July 1 (Monday) → July 2 (Tuesday = enabled)
+      await user.keyboard('{ArrowRight}');
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 2), { isEnabled: true });
+    });
+
+    it('does not fire onChange when Enter is pressed on a rule-disabled focused date', async () => {
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 5)}
+          disabledRules={weekendRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // Click on selected day (Friday) fires onChange once
+      expect(handleChange).toHaveBeenCalledTimes(1);
+
+      // ArrowRight from July 5 (Friday) → July 6 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('fires onChange when Enter is pressed on an enabled focused date', async () => {
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 1)}
+          disabledRules={weekendRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // ArrowRight from July 1 (Monday) → July 2 (Tuesday = enabled)
+      await user.keyboard('{ArrowRight}');
+      await user.keyboard('{Enter}');
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 2));
+    });
+  });
+
+  describe('InlinePrompt for rule-disabled dates', () => {
+    it('renders reason text when month has disabled dates', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      expect(screen.getByText('We are closed on weekends.')).toBeInTheDocument();
+    });
+
+    it('does not render when no disabledRules provided and no out-of-range date is focused', () => {
+      render(<Calendar value={initialValue} />);
+
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+      expect(document.querySelector('.wds-inline-prompt')).not.toBeInTheDocument();
+    });
+
+    it('renders with neutral sentiment when focused date is enabled', () => {
+      const { container } = render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const prompt = container.querySelector('.wds-inline-prompt');
+      expect(prompt).toBeInTheDocument();
+      expect(prompt).toHaveClass('wds-prompt--neutral');
+    });
+
+    it('does not render in month view', async () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(' ');
+
+      expect(screen.queryByText('We are closed on weekends.')).not.toBeInTheDocument();
+    });
+
+    it('does not render in year view', async () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+
+      expect(screen.queryByText('We are closed on weekends.')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility for rule-disabled dates', () => {
+    it('disabled cells announce "not available" in aria-label', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const saturday = screen.getByLabelText(/6 July 2024.*not available/iu);
+      expect(saturday).toBeInTheDocument();
+    });
+
+    it('disabled cells have accessible description with the reason text', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const saturday = screen.getByLabelText(/6 July 2024.*not available/iu);
+      expect(saturday).toHaveAccessibleDescription('We are closed on weekends.');
+    });
+
+    it('initially focused cell has accessible description for first-entry announcement', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const selected = screen.getByLabelText(/^1 July 2024.*selected/iu);
+      expect(selected).toHaveAccessibleDescription('We are closed on weekends.');
+    });
+
+    it('enabled non-focused cells have no accessible description', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const tuesday = screen.getByLabelText(/^2 July 2024/u);
+      expect(tuesday).toHaveAccessibleDescription('');
+    });
+  });
+
+  describe('InlinePrompt sentiment for rule-disabled dates', () => {
+    it('shows negative sentiment when focused date is rule-disabled', () => {
+      const { container } = render(
+        <Calendar value={new Date(2024, 6, 6)} disabledRules={weekendRules} />,
+      );
+
+      const prompt = container.querySelector('.wds-inline-prompt')!;
+      expect(prompt).toHaveClass('wds-prompt--negative');
+    });
+
+    it('shows neutral sentiment when focused date is enabled', () => {
+      const { container } = render(
+        <Calendar value={new Date(2024, 6, 8)} disabledRules={weekendRules} />,
+      );
+
+      const prompt = container.querySelector('.wds-inline-prompt')!;
+      expect(prompt).toHaveClass('wds-prompt--neutral');
+    });
+
+    it('updates sentiment when value changes from disabled to enabled', () => {
+      const { container, rerender } = render(
+        <Calendar value={new Date(2024, 6, 6)} disabledRules={weekendRules} />,
+      );
+
+      const prompt = container.querySelector('.wds-inline-prompt')!;
+      expect(prompt).toHaveClass('wds-prompt--negative');
+
+      rerender(<Calendar value={new Date(2024, 6, 5)} disabledRules={weekendRules} />);
+
+      expect(prompt).toHaveClass('wds-prompt--neutral');
+      expect(prompt).not.toHaveClass('wds-prompt--negative');
+    });
+  });
+
+  describe('dynamic disabledRules prop changes', () => {
+    it('clears aria-disabled and removes InlinePrompt when disabledRules is removed', () => {
+      const onDateFocus = jest.fn();
+      const { rerender } = render(
+        <Calendar value={initialValue} disabledRules={weekendRules} onDateFocus={onDateFocus} />,
+      );
+
+      expect(screen.getByLabelText(/^6 July 2024/u)).toHaveAttribute('aria-disabled', 'true');
+      expect(screen.getByText('We are closed on weekends.')).toBeInTheDocument();
+
+      rerender(<Calendar value={initialValue} onDateFocus={onDateFocus} />);
+
+      expect(screen.getByLabelText(/^6 July 2024/u)).not.toHaveAttribute('aria-disabled');
+      expect(screen.queryByText('We are closed on weekends.')).not.toBeInTheDocument();
+    });
+
+    it('shows neutral sentiment when disabledRules is added and focused date is enabled', async () => {
+      const onDateFocus = jest.fn();
+      const { rerender } = render(<Calendar value={initialValue} onDateFocus={onDateFocus} />);
+
+      expect(screen.queryByText('We are closed on weekends.')).not.toBeInTheDocument();
+
+      rerender(
+        <Calendar value={initialValue} disabledRules={weekendRules} onDateFocus={onDateFocus} />,
+      );
+
+      const prompt = await screen.findByText('We are closed on weekends.');
+      const promptElement = prompt.closest('.wds-inline-prompt')!;
+      expect(promptElement).toHaveClass('wds-prompt--neutral');
+    });
+  });
+
+  describe('outOfRange behaviour', () => {
+    const minDate = new Date(2024, 6, 3);
+    const maxDate = new Date(2024, 6, 25);
+
+    describe('rendering', () => {
+      it('out-of-range dates use aria-disabled, NOT native disabled', () => {
+        render(<Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />);
+
+        const outOfRangeDate = screen.getByRole('button', { name: /^1 July 2024/u });
+        expect(outOfRangeDate).toHaveAttribute('aria-disabled', 'true');
+        expect(outOfRangeDate).toBeEnabled();
+      });
+
+      it('out-of-range dates announce "not available" in aria-label', () => {
+        render(<Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />);
+
+        expect(
+          screen.getByRole('button', { name: /^1 July 2024.*not available/iu }),
+        ).toBeInTheDocument();
+      });
+
+      it('when a date is both out-of-range and rule-disabled, it uses aria-disabled', () => {
+        render(
+          <Calendar
+            value={new Date(2024, 6, 5)}
+            min={minDate}
+            max={maxDate}
+            disabledRules={weekendRules}
+          />,
+        );
+
+        // July 27 is a Saturday (weekendRules) AND beyond max
+        const saturdayBeyondMax = screen.getByRole('button', { name: /^27 July 2024/u });
+        expect(saturdayBeyondMax).toHaveAttribute('aria-disabled', 'true');
+        expect(saturdayBeyondMax).toBeEnabled();
+      });
+    });
+
+    describe('click interaction', () => {
+      it('fires onDateFocus with isEnabled: false when clicking an out-of-range date', async () => {
+        const handleDateFocus = jest.fn();
+        const handleChange = jest.fn();
+        render(
+          <Calendar
+            value={new Date(2024, 6, 5)}
+            min={minDate}
+            max={maxDate}
+            onDateFocus={handleDateFocus}
+            onChange={handleChange}
+          />,
+        );
+
+        const outOfRangeDate = screen.getByRole('button', { name: /^1 July 2024/u });
+        await user.click(outOfRangeDate);
+
+        expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 1), { isEnabled: false });
+        expect(handleChange).not.toHaveBeenCalled();
+      });
+
+      it('does not fire onChange when Enter is pressed on a focused out-of-range date', async () => {
+        const handleChange = jest.fn();
+        // value is July 3 (at min boundary) — ArrowLeft would clamp, so navigate from July 4
+        render(
+          <Calendar
+            value={new Date(2024, 6, 4)}
+            min={minDate}
+            max={maxDate}
+            onChange={handleChange}
+          />,
+        );
+
+        const outOfRangeDate = screen.getByRole('button', { name: /^1 July 2024/u });
+        await user.click(outOfRangeDate);
+        // Click already fires onDateFocus but not onChange; now press Enter
+        await user.keyboard('{Enter}');
+
+        expect(handleChange).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('InlinePrompt', () => {
+      it('shows negative prompt with boundary dates when out-of-range date is focused', async () => {
+        const { container } = render(
+          <Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />,
+        );
+
+        await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
+
+        const prompt = container.querySelector('.wds-inline-prompt');
+        expect(prompt).toBeInTheDocument();
+        expect(prompt).toHaveClass('wds-prompt--negative');
+        expect(prompt).toHaveTextContent(
+          'Please select a date between 3 July 2024 and 25 July 2024.',
+        );
+      });
+
+      it('shows boundary message (not disabledRules reason) when out-of-range date is focused', async () => {
+        const { container } = render(
+          <Calendar
+            value={new Date(2024, 6, 5)}
+            min={minDate}
+            max={maxDate}
+            disabledRules={weekendRules}
+          />,
+        );
+
+        // July 27 is beyond max
+        await user.click(screen.getByRole('button', { name: /^27 July 2024/u }));
+
+        const prompt = container.querySelector('.wds-inline-prompt');
+        expect(prompt).toHaveTextContent(
+          'Please select a date between 3 July 2024 and 25 July 2024.',
+        );
+        expect(prompt).not.toHaveTextContent('We are closed on weekends.');
+      });
+
+      it('shows only-min message when only min is set', async () => {
+        const { container } = render(<Calendar value={new Date(2024, 6, 5)} min={minDate} />);
+
+        await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
+
+        expect(container.querySelector('.wds-inline-prompt')).toHaveTextContent(
+          'Please enter 3 July 2024 or a later date.',
+        );
+      });
+
+      it('shows only-max message when only max is set', async () => {
+        const { container } = render(<Calendar value={new Date(2024, 6, 5)} max={maxDate} />);
+
+        await user.click(screen.getByRole('button', { name: /^27 July 2024/u }));
+
+        expect(container.querySelector('.wds-inline-prompt')).toHaveTextContent(
+          'Please enter 25 July 2024 or an earlier date.',
+        );
+      });
+
+      it('hides out-of-range prompt (sr-only) when focused date returns to within range', async () => {
+        const { container } = render(
+          <Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />,
+        );
+
+        // Focus an out-of-range date to show the prompt visually
+        await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
+        expect(container.querySelector('.wds-inline-prompt')).not.toHaveClass('sr-only');
+
+        // Focus an in-range date — prompt goes back to sr-only
+        await user.click(screen.getByRole('button', { name: /^5 July 2024/u }));
+        expect(container.querySelector('.wds-inline-prompt')).toHaveClass('sr-only');
+      });
+
+      it('does not show out-of-range prompt in month view', async () => {
+        const { container } = render(
+          <Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />,
+        );
+
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+        await user.keyboard(' ');
+
+        expect(container.querySelector('.wds-inline-prompt')).not.toBeInTheDocument();
+      });
+
+      it('does not show out-of-range prompt in year view', async () => {
+        const { container } = render(
+          <Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />,
+        );
+
+        await user.click(screen.getByRole('button', { name: /year view/iu }));
+
+        expect(container.querySelector('.wds-inline-prompt')).not.toBeInTheDocument();
+      });
+    });
+
+    describe('accessibility', () => {
+      it('out-of-range dates have accessible description with boundary message', () => {
+        render(<Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />);
+
+        const outOfRangeDate = screen.getByRole('button', { name: /^1 July 2024/u });
+        expect(outOfRangeDate).toHaveAccessibleDescription(
+          'Please select a date between 3 July 2024 and 25 July 2024.',
+        );
+      });
+
+      it('out-of-range prompt is visually hidden until an out-of-range date is focused', async () => {
+        const { container } = render(
+          <Calendar value={new Date(2024, 6, 5)} min={minDate} max={maxDate} />,
+        );
+
+        const promptBefore = container.querySelector('.wds-inline-prompt');
+        expect(promptBefore).toBeInTheDocument();
+        expect(promptBefore).toHaveClass('sr-only');
+
+        await user.click(screen.getByRole('button', { name: /^1 July 2024/u }));
+
+        const promptAfter = container.querySelector('.wds-inline-prompt');
+        expect(promptAfter).not.toHaveClass('sr-only');
+      });
+    });
+  });
+
+  describe('screen reader focus navigation', () => {
+    it('fires onDateFocus with isEnabled: false when a disabled cell receives DOM focus', () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={weekendRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      const saturday = screen.getByLabelText(/^6 July 2024/u);
+      fireEvent.focus(saturday);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 6), { isEnabled: false });
+    });
+
+    it('fires onDateFocus with isEnabled: true when an enabled cell receives DOM focus', () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={weekendRules}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      const wednesday = screen.getByLabelText(/^3 July 2024/u);
+      fireEvent.focus(wednesday);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 3), { isEnabled: true });
+    });
+
+    it('updates prompt sentiment when screen reader moves focus to a disabled cell', () => {
+      const { container } = render(<Calendar value={initialValue} disabledRules={weekendRules} />);
+
+      const prompt = container.querySelector('.wds-inline-prompt')!;
+      expect(prompt).toHaveClass('wds-prompt--neutral');
+
+      const saturday = screen.getByLabelText(/^6 July 2024/u);
+      fireEvent.focus(saturday);
+
+      expect(prompt).toHaveClass('wds-prompt--negative');
+    });
+
+    it('updates prompt sentiment back to neutral when focus moves to an enabled cell', () => {
+      const { container } = render(
+        <Calendar value={new Date(2024, 6, 6)} disabledRules={weekendRules} />,
+      );
+
+      const prompt = container.querySelector('.wds-inline-prompt')!;
+      expect(prompt).toHaveClass('wds-prompt--negative');
+
+      const monday = screen.getByLabelText(/^8 July 2024/u);
+      fireEvent.focus(monday);
+
+      expect(prompt).toHaveClass('wds-prompt--neutral');
+    });
+
+    it('fires onDateFocus with isEnabled: false when an out-of-range cell receives DOM focus', () => {
+      const handleDateFocus = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 5)}
+          min={new Date(2024, 6, 3)}
+          max={new Date(2024, 6, 25)}
+          onDateFocus={handleDateFocus}
+        />,
+      );
+
+      const outOfRange = screen.getByRole('button', { name: /^1 July 2024/u });
+      fireEvent.focus(outOfRange);
+
+      expect(handleDateFocus).toHaveBeenCalledWith(new Date(2024, 6, 1), { isEnabled: false });
+    });
+  });
+});

package/src/Calendar/Calendar.less

@@ -1,4 +1,5 @@
 @import (reference) "./../styles/variables/neptune-tokens.less";
+@import "./TableLink/TableLink.less";
 
 .tw-date-lookup-calendar {
   min-width: 300px;
@@ -21,47 +22,16 @@
       padding: 0;
     }
 
-    &:has(.tw-date-lookup-day-option) {
+    &:has(.wds-Calendar__option--day) {
       padding: 1px;
     }
 
-    button {
-      width: 100%;
-      padding: var(--size-4) 0;
-      @media (--screen-400-zoom) {
-        padding: 0;
-      }
-      color: var(--color-content-accent);
-      border: transparent;
-      border-radius: var(--radius-small);
-      background-color: transparent;
-      font-weight: var(--font-weight-semi-bold);
-      color: var(--color-content-primary);
-
-      &.tw-date-lookup-day-option {
-        height: var(--size-40);
-        border-radius: var(--radius-full);
-        line-height: var(--size-40);
-        width: var(--size-40);
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        &.today {
-          text-decoration: underline;
-          text-decoration-thickness: 2px;
-          text-underline-offset: 4px;
-        }
-      }
-    }
-
-    &:not(.disabled, :disabled) button.show-focus,
-    &:hover button:not(.disabled, :disabled) {
+    &:not(.disabled, :disabled) button.show-focus:not(.disabled, [aria-disabled="true"]),
+    &:hover button:not(.disabled, :disabled, [aria-disabled="true"]) {
       background-color: var(--color-background-screen-hover);
     }
 
-    &:not(.disabled, :disabled) button.active {
+    &:not(.disabled, :disabled) button.active:not([aria-disabled="true"]) {
       background-color: var(--color-interactive-primary);
       color: var(--color-interactive-contrast);
     }

package/src/Calendar/Calendar.messages.ts

@@ -36,9 +36,30 @@ export default defineMessages({
     defaultMessage: 'selected',
     description: 'Description of the selected day/month/year',
   },
+  notAvailable: {
+    id: 'neptune.DateLookup.notAvailable',
+    defaultMessage: 'not available',
+    description: 'Announces that a date is disabled/unavailable',
+  },
   goTo20YearView: {
     id: 'neptune.DateLookup.goTo20YearView',
     defaultMessage: 'Go to 20 year view',
     description: 'Description of the button to go to 20 year view',
   },
+  outOfRangeBetween: {
+    id: 'neptune.DateLookup.outOfRangeBetween',
+    defaultMessage: 'Please select a date between {min} and {max}.',
+    description:
+      'Inline prompt when a date outside min/max boundaries is focused and both min and max are set',
+  },
+  outOfRangeAfter: {
+    id: 'neptune.DateLookup.outOfRangeAfter',
+    defaultMessage: 'Please enter {min} or a later date.',
+    description: 'Inline prompt when a date before min is focused and only min is set',
+  },
+  outOfRangeBefore: {
+    id: 'neptune.DateLookup.outOfRangeBefore',
+    defaultMessage: 'Please enter {max} or an earlier date.',
+    description: 'Inline prompt when a date after max is focused and only max is set',
+  },
 });