Merge pull request #4987 from qburst/issue-4986/fix/disabled-item-hov…

…er-style Fix #4986: 🐛🎨 Update the hover style to be applied only to the non-disabled calendar items
Hacker0x01 · Jul 19, 2024 · 84c072f · 84c072f
2 parents c36ad14 + 68a38d2
commit 84c072f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 26 deletions.
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -402,7 +402,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-text {
   cursor: pointer;
 
-  &:hover {
+  &:not([aria-disabled="true"]):hover {
     border-radius: $datepicker__border-radius;
     background-color: $datepicker__background-color;
   }
@@ -416,7 +416,7 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__highlighted-color;
     color: #fff;
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__highlighted-color, 5%);
     }
 
@@ -452,7 +452,7 @@ h2.react-datepicker__current-month {
         opacity 0.3s ease-in-out;
     }
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__holidays-color, 10%);
     }
 
@@ -469,7 +469,7 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__selected-color;
     color: #fff;
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__selected-color, 5%);
     }
   }
@@ -479,7 +479,7 @@ h2.react-datepicker__current-month {
     background-color: lighten($datepicker__selected-color, 45%);
     color: rgb(0, 0, 0);
 
-    &:hover {
+    &:not([aria-disabled="true"]):hover {
       background-color: darken($datepicker__selected-color, 5%);
     }
   }
@@ -500,10 +500,6 @@ h2.react-datepicker__current-month {
     cursor: default;
     color: $datepicker__muted-color;
 
-    &:hover {
-      background-color: transparent;
-    }
-
     .overlay {
       position: absolute;
       bottom: 70%;

diff --git a/src/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx
@@ -113,29 +113,52 @@ describe("WeekNumber", () => {
     });
 
     describe("handleOnKeyDown", () => {
-      const handleOnKeyDownMock = jest.fn((event) => {
-        if (event.key === KeyType.Space) {
-          event.preventDefault();
-          event.key = KeyType.Enter;
-        }
+      it("should not change any other key", () => {
+        const onKeyDownMock = jest.fn();
+
+        const container = renderWeekNumber(1, {
+          handleOnKeyDown: onKeyDownMock,
+        });
+
+        const weekNumberElement = container.querySelector(
+          ".react-datepicker__week-number",
+        )!;
+
+        fireEvent.keyDown(weekNumberElement, {
+          key: KeyType.Enter,
+          preventDefault: jest.fn(),
+        });
+
+        expect(onKeyDownMock).toHaveBeenCalledTimes(1);
+        expect(onKeyDownMock).toHaveBeenCalledWith(
+          expect.objectContaining({
+            key: KeyType.Enter,
+          }),
+        );
       });
 
       it("should change space key to Enter", () => {
-        const eventSpace = {
+        const onKeyDownMock = jest.fn();
+
+        const container = renderWeekNumber(1, {
+          handleOnKeyDown: onKeyDownMock,
+        });
+
+        const weekNumberElement = container.querySelector(
+          ".react-datepicker__week-number",
+        )!;
+
+        fireEvent.keyDown(weekNumberElement, {
           key: KeyType.Space,
           preventDefault: jest.fn(),
-        };
-        handleOnKeyDownMock(eventSpace);
-        expect(eventSpace.preventDefault).toHaveBeenCalled();
-        expect(eventSpace.key).toBe(KeyType.Enter);
-      });
+        });
 
-      it("should not change any other key", () => {
-        const eventA = {
-          key: "a",
-        };
-        handleOnKeyDownMock(eventA);
-        expect(eventA.key).toBe("a");
+        expect(onKeyDownMock).toHaveBeenCalledTimes(1);
+        expect(onKeyDownMock).toHaveBeenCalledWith(
+          expect.objectContaining({
+            key: KeyType.Enter,
+          }),
+        );
       });
     });
   });