Merge pull request #19388 from overleaf/rd-form-focus-visible

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

GitOrigin-RevId: 48da2565e27cb02e910ccea029f22fd5f89466ce

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);
+  }
+}

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

services/web/frontend/stylesheets/core/mixins.less

@@ -1213,7 +1213,8 @@
 }
 
 .form-control-focus() {
-  &:focus {
+  &:focus,
+  &:focus-visible {
     &:extend(.input-focus-style);
   }
 }

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.