Merge pull request #5232 from qburst/issue-5200/fix/week-number-highlight

Fix #5200: Fix the unnecessary highlight on the Week Number when the first day of the week is selected using Keyboard

Author: martijnrusschen

src/stylesheets/datepicker.scss

@@ -347,10 +347,7 @@ h2.react-datepicker__current-month {
   &.react-datepicker__week-number--clickable {
     cursor: pointer;
 
-    &:not(
-        .react-datepicker__week-number--selected,
-        .react-datepicker__week-number--keyboard-selected
-      ):hover {
+    &:not(.react-datepicker__week-number--selected):hover {
       border-radius: $datepicker__border-radius;
       background-color: $datepicker__background-color;
     }
@@ -362,17 +359,10 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
-    }
-  }
-
-  &--keyboard-selected {
-    border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 10%);
-    color: #fff;
-
-    &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 }
@@ -418,7 +408,10 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__highlighted-color,
+        $lightness: -5%
+      );
     }
 
     &-custom-1 {
@@ -454,7 +447,10 @@ h2.react-datepicker__current-month {
     }
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__holidays-color, $lightness: -10%);
+      background-color: color.adjust(
+        $datepicker__holidays-color,
+        $lightness: -10%
+      );
     }
 
     &:hover .overlay {
@@ -471,17 +467,26 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 45%);
+    background-color: color.adjust(
+      $datepicker__selected-color,
+      $lightness: 45%
+    );
     color: rgb(0, 0, 0);
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
@@ -550,7 +555,10 @@ h2.react-datepicker__current-month {
 
     .react-datepicker__year-read-view--down-arrow,
     .react-datepicker__month-read-view--down-arrow {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 
@@ -613,11 +621,17 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__muted-color;
 
     .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-bottom-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
 
     .react-datepicker__navigation--years-previous {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 

src/test/week_number_test.test.tsx

@@ -186,11 +186,6 @@ describe("WeekNumber", () => {
         ) as HTMLDivElement;
         expect(weekNumber).not.toBeNull();
 
-        expect(
-          weekNumber?.classList.contains(
-            "react-datepicker__week-number--keyboard-selected",
-          ),
-        ).toBe(false);
         expect(weekNumber?.tabIndex).toBe(0);
       });
 
@@ -212,11 +207,6 @@ describe("WeekNumber", () => {
           ".react-datepicker__week-number",
         ) as HTMLDivElement;
         expect(weekNumber).not.toBeNull();
-        expect(
-          weekNumber?.classList.contains(
-            "react-datepicker__week-number--keyboard-selected",
-          ),
-        ).toBe(true);
         expect(weekNumber.tabIndex).toBe(0);
       });
 
@@ -267,11 +257,6 @@ describe("WeekNumber", () => {
         const weekNumber = container.querySelector(
           ".react-datepicker__week-number",
         ) as HTMLDivElement;
-        expect(
-          weekNumber?.classList.contains(
-            "react-datepicker__week-number--keyboard-selected",
-          ),
-        ).toBe(false);
         expect(weekNumber.tabIndex).toBe(-1);
       });
     });
@@ -403,11 +388,6 @@ describe("WeekNumber", () => {
             "react-datepicker__week-number--selected",
           ),
         ).toBe(false);
-        expect(
-          weekNumber?.classList.contains(
-            "react-datepicker__week-number--keyboard-selected",
-          ),
-        ).toBe(true);
       });
 
       it("should have the class 'react-datepicker__week-number--selected' if selected is not current week and preselected is not current week", () => {
@@ -430,11 +410,6 @@ describe("WeekNumber", () => {
             "react-datepicker__week-number--selected",
           ),
         ).toBe(false);
-        expect(
-          weekNumber?.classList.contains(
-            "react-datepicker__week-number--keyboard-selected",
-          ),
-        ).toBe(false);
       });
     });
   });

src/week_number.tsx

@@ -120,8 +120,6 @@ export default class WeekNumber extends Component<WeekNumberProps> {
       "react-datepicker__week-number--clickable": !!onClick,
       "react-datepicker__week-number--selected":
         !!onClick && isSameDay(this.props.date, this.props.selected),
-      "react-datepicker__week-number--keyboard-selected":
-        this.isKeyboardSelected(),
     };
     return (
       <div