fix: allow focused disabled days to remain focusable (#2851)

* Fix TestCase2843 today button interaction

* Adjust disabled day focus handling

* Lint files

Signed-off-by: gpbl <io@gpbl.dev>

* Build CSS module

Signed-off-by: gpbl <io@gpbl.dev>

---------

Signed-off-by: gpbl <io@gpbl.dev>

Author: gpbl

examples/TestCase2843.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { dateButton } from "@/test/elements";
+import { render } from "@/test/render";
+import { user } from "@/test/user";
+import { TestCase2843 } from "./TestCase2843";
+
+const today = new Date(2024, 8, 6);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+describe("when clicking the today button", () => {
+  beforeEach(async () => {
+    render(<TestCase2843 />);
+    await user.click(dateButton(today));
+  });
+
+  test('the Today button has aria-disabled="true" but is not disabled', () => {
+    expect(dateButton(today)).toHaveAttribute("aria-disabled", "true");
+    expect(dateButton(today)).not.toBeDisabled();
+  });
+});

examples/TestCase2843.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+
+import { type DateRange, DayPicker } from "react-day-picker";
+
+export function TestCase2843() {
+  const [selected, setSelected] = useState<DateRange>();
+
+  const disabled = [
+    ...(selected?.from ? [{ before: selected.from }] : []),
+    ...(selected?.from ? [selected.from] : []),
+  ];
+
+  return (
+    <DayPicker
+      animate
+      mode="range"
+      selected={selected}
+      min={1}
+      disabled={disabled}
+      onSelect={(value, date) => {
+        setSelected((prevValue) => {
+          if (prevValue?.from && prevValue?.to) {
+            return {
+              from: date,
+              to: undefined,
+            };
+          }
+
+          return value;
+        });
+      }}
+    />
+  );
+}

examples/index.ts

@@ -94,6 +94,7 @@ export * from "./TestCase2389";
 export * from "./TestCase2511";
 export * from "./TestCase2585";
 export * from "./TestCase2835";
+export * from "./TestCase2843";
 export * from "./Testcase1567";
 export * from "./TimeZone";
 export * from "./timezone/TestCase2833";

src/DayPicker.tsx

@@ -727,7 +727,16 @@ export function DayPicker(initialProps: DayPickerProps) {
                                     type="button"
                                     day={day}
                                     modifiers={modifiers}
-                                    disabled={modifiers.disabled || undefined}
+                                    disabled={
+                                      (!modifiers.focused &&
+                                        modifiers.disabled) ||
+                                      undefined
+                                    }
+                                    aria-disabled={
+                                      (modifiers.focused &&
+                                        modifiers.disabled) ||
+                                      undefined
+                                    }
                                     tabIndex={isFocusTarget(day) ? 0 : -1}
                                     aria-label={labelDayButton(
                                       date,

src/style.css

@@ -296,7 +296,7 @@
   opacity: var(--rdp-outside-opacity);
 }
 
-.rdp-disabled {
+.rdp-disabled:not(.rdp-selected) {
   opacity: var(--rdp-disabled-opacity);
 }
 

src/style.module.css

@@ -296,7 +296,7 @@
   opacity: var(--rdp-outside-opacity);
 }
 
-.disabled {
+.disabled:not(.selected) {
   opacity: var(--rdp-disabled-opacity);
 }