From 495f7d37312f1b9273d036e319576a6005ef8423 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 1 Sep 2023 15:26:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20fix=20DatePicker=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on QA feedback the keyboard focus of the DatePicker was using
the browser default outline ( when navigating with tab key ), this
ensure a consistent style accross different focus modes.
---
 .changeset/mighty-horses-heal.md              |  5 +++
 .../components/Forms/DatePicker/index.scss    | 34 +++++++++++++------
 2 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/mighty-horses-heal.md

diff --git a/.changeset/mighty-horses-heal.md b/.changeset/mighty-horses-heal.md
new file mode 100644
index 0000000..2e8e807
--- /dev/null
+++ b/.changeset/mighty-horses-heal.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Fix DatePicker focus style
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 3a4e26e..9b267ed 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -178,16 +178,6 @@
     }
   }
 
-  &--focused {
-    .c__date-picker__wrapper {
-      border-radius: var(--c--components--forms-datepicker--border-radius--focus);
-      border-color: var(--c--components--forms-datepicker--border-color--focus);
-
-      &__toggle {
-        color: var(--c--components--forms-datepicker--border-color--focus);
-      }
-    }}
-
   &:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
     &:hover {
       .c__date-picker__wrapper {
@@ -197,6 +187,30 @@
     }
   }
 
+  /**
+   * Even if usually !important is evil, in this case it is on purpose. Focus styling most have a greater priority
+   * than :hover. But here hover has more css specificity, so we need !important.
+   */
+  @mixin focused-wrapper {
+    border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
+    border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
+
+    .c__date-picker__wrapper__toggle {
+      color: var(--c--components--forms-datepicker--border-color--focus) !important;
+    }
+  }
+
+  &--focused {
+    .c__date-picker__wrapper {
+      @include focused-wrapper;
+    }
+  }
+
+  .c__date-picker__wrapper:focus-visible {
+    outline: none;
+    @include focused-wrapper;
+  }
+
   &__range {
     min-width: px-to-rem(350px);