From f948eeb9f1a9a3febc7cbfede3cf159518c4e517 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:47:24 +0200
Subject: [PATCH] Merge pull request #19388 from overleaf/rd-form-focus-visible

[web] Match :focus-visible pseudo-class with focused style

GitOrigin-RevId: 48da2565e27cb02e910ccea029f22fd5f89466ce
---
 .../bootstrap-5/components/form.scss          | 22 +++++++++++++++++++
 .../stylesheets/components/forms.less         | 14 ++++++++++++
 .../web/frontend/stylesheets/core/mixins.less |  3 ++-
 .../frontend/stylesheets/variables/all.less   |  4 ++++
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 1ec07571bf..7e786cd56a 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -54,6 +54,12 @@
       }
     }
   }
+
+  &:focus-visible {
+    outline: 0;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
 }
 
 .form-control {
@@ -150,3 +156,19 @@
     );
   }
 }
+
+.form-control,
+.form-select {
+  &:focus-visible {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    outline: 0;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+
+  &.is-invalid:focus-visible {
+    border-color: $form-feedback-invalid-color;
+    box-shadow: 0 0 0 2px var(--red-30);
+  }
+}
diff --git a/services/web/frontend/stylesheets/components/forms.less b/services/web/frontend/stylesheets/components/forms.less
index 220aa35be8..4ead3895f6 100755
--- a/services/web/frontend/stylesheets/components/forms.less
+++ b/services/web/frontend/stylesheets/components/forms.less
@@ -338,6 +338,20 @@ input[type='checkbox'],
   }
 }
 
+.form-control:invalid {
+  &:focus {
+    border-color: @form-feedback-invalid-color;
+    box-shadow: @form-feedback-invalid-box-shadow;
+  }
+}
+
+.form-control[data-ol-dirty]:invalid {
+  &:focus-visible {
+    border-color: @form-feedback-invalid-color;
+    box-shadow: @form-feedback-invalid-box-shadow;
+  }
+}
+
 // Static form control text
 //
 // Apply class to a `p` element to make any string of text align with labels in
diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less
index 6d8a94223b..317462b9cb 100755
--- a/services/web/frontend/stylesheets/core/mixins.less
+++ b/services/web/frontend/stylesheets/core/mixins.less
@@ -1213,7 +1213,8 @@
 }
 
 .form-control-focus() {
-  &:focus {
+  &:focus,
+  &:focus-visible {
     &:extend(.input-focus-style);
   }
 }
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index d70acf2d65..05ac78beaf 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/services/web/frontend/stylesheets/variables/all.less
@@ -277,6 +277,10 @@
 //** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
 
+//** Invalid state of the form input
+@form-feedback-invalid-color: @red-50;
+@form-feedback-invalid-box-shadow: 0 0 0 2px @red-30;
+
 //== Dropdowns
 //
 //## Dropdown menu container and contents.