♿ Improve accessibility with contrast colors in dark date picker focu…

…s and hover ♿
Aszurar · Jan 22, 2024 · f0dbf7b · f0dbf7b
1 parent f57034a
commit f0dbf7b
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -172,6 +172,21 @@ export function DatePicker({
     color: ${CSSTheme.daySelected.hover.color};
     font-weight: 600;
   }
+  .rdp-button:focus-visible:not([disabled]):not(.rdp-day_selected):focus-visible {
+    background-color: ${CSSTheme.daySelected.hover.backgroundColor};
+    color: ${CSSTheme.daySelected.hover.color};
+    font-weight: 600;
+    border: 0;
+  }
+
+
+  .today:focus-visible {
+    background-color: ${CSSTheme.today.hover.borderColor} !important;
+  }
+  .today:focus-visible:hover {
+    color: ${CSSTheme.daySelected.hover.backgroundColor} !important;
+    opacity: 0.8;
+  }
   `
 
   let footer = (