improve personal info keyboard nav (#3905)

ideacrew · Jul 12, 2024 · 5b15b84 · 5b15b84
1 parent 1ebc864
commit 5b15b84
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/app/javascript/css/forms.scss b/app/javascript/css/forms.scss
@@ -74,6 +74,22 @@ select,
   }
 }
 
+input[type="checkbox"] {
+  &:active,
+  &:focus {
+  outline: 1px solid var(--grey-150);
+  }
+}
+
+.focus {
+  &:active,
+  &:focus,
+  &:focus-within {
+  outline: -webkit-focus-ring-color auto 1px;
+  outline-offset: 4px;
+  }
+}
+
 input.full-width, select.full-width, .input.full-width {
   width: 100%;
 }

diff --git a/app/views/shared/_is_applying_for_coverage.html.erb b/app/views/shared/_is_applying_for_coverage.html.erb
@@ -1,11 +1,11 @@
 <% if @bs4 %>
   <div class="align-items-center mt-2">
-    <div class="col d-flex px-0">
-      <label for="is_applying_coverage_true" tabindex="0" onkeydown="handleRadioKeyDown(event, 'is_applying_coverage_true')" class="radio">
+    <div class="focus col d-flex px-0">
+      <label for="is_applying_coverage_true" class="radio">
         <%= f.radio_button :is_applying_coverage, true, class: "required floatlabel", id: 'is_applying_coverage_true', checked: first_checked%>
         <span class="yes_no_pair"><%= l10n("yes") %></span>
       </label>
-      <label for="is_applying_coverage_false" tabindex="0" onkeydown="handleRadioKeyDown(event, 'is_applying_coverage_false')" class="radio">
+      <label for="is_applying_coverage_false" class="radio">
         <%= f.radio_button :is_applying_coverage, false, class: "required floatlabel", id: 'is_applying_coverage_false', checked: second_checked %>
         <span class="yes_no_pair"><%= l10n("no") %></span>
       </label>