feat(css): add focus ring for cc form inputs

cal-itp · Aug 9, 2023 · 7e8225b · 7e8225b
1 parent 2613607
commit 7e8225b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
@@ -20,7 +20,7 @@
 
               {{ field }}
 
-              {% if field.help_text %}<small class="form-text text-body">{{ field.help_text }}</small>{% endif %}
+              {% if field.help_text %}<small class="d-block mt-2 form-text text-body">{{ field.help_text }}</small>{% endif %}
             </div>
           </div>
         {% endfor %}

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -548,6 +548,13 @@ footer .footer-links li a:visited {
   /* Input height should be 60px */
 }
 
+.form-container .form-control:focus,
+.form-container .form-control:focus-visible {
+  outline: 3px solid var(--focus-color) !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+}
+
 .form-text {
   font-size: var(--font-size-14px);
 }