From 401909036423ef3e42fe08d4f748c58287627280 Mon Sep 17 00:00:00 2001
From: Charlie Parker <charlie.parker@ideacrew.com>
Date: Mon, 5 Aug 2024 11:09:43 -0400
Subject: [PATCH] bs4 sep fix radio nav (#4201)

* remove onfocus call for all reason radios

* use semantic elements and focus class for marriage fields, remove unneeded classes

* remove debug, update insurance fields

* update moving fields

* remove debug

* restore ids needed for cukes

* fix accessibility error

* fix label for effective
---
 app/assets/javascripts/qle.js.erb             |  3 +
 .../_effective_on_kind_fields.html.erb        |  6 +-
 .../families/_insurance_fields.html.erb       | 40 +++++-----
 .../families/_marriage_fields.html.erb        | 32 ++++----
 .../insured/families/_moving_fields.html.erb  | 74 +++++++++----------
 5 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/app/assets/javascripts/qle.js.erb b/app/assets/javascripts/qle.js.erb
index 2179df81a6f..47988c3a663 100644
--- a/app/assets/javascripts/qle.js.erb
+++ b/app/assets/javascripts/qle.js.erb
@@ -202,6 +202,9 @@ $(function () {
   $('#qle_form').on('keydown', function(e) {
     var code = e.keyCode || e.which;
     if (bs4) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
       return;
     }
 
diff --git a/app/views/insured/families/_effective_on_kind_fields.html.erb b/app/views/insured/families/_effective_on_kind_fields.html.erb
index a10371341b2..e1526214bfe 100644
--- a/app/views/insured/families/_effective_on_kind_fields.html.erb
+++ b/app/views/insured/families/_effective_on_kind_fields.html.erb
@@ -1,8 +1,10 @@
 <% if @qle.effective_on_kinds.count > 1 %>
   <% if @bs4 %>
     <div onkeydown="handleButtonKeyDown(event, 'qle_success_submit')">
-      <label class="weight-n required"><%= l10n('please_select_effective_date') %></label>
-      <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: l10n("select"), class: "col-auto pr-4" %>
+      <label class="weight-n required">
+        <div><%= l10n('please_select_effective_date') %></div>
+        <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: l10n("select"), class: "col-auto pr-4" %>
+      </label>
     </div>
   <% else %>
     <div class="alert alert-danger" id='qle_effective_on_kind_alert' role="alert" style='display:none'><%= l10n(".please_select_effective_date") %></div>
diff --git a/app/views/insured/families/_insurance_fields.html.erb b/app/views/insured/families/_insurance_fields.html.erb
index c4e358c78b8..0b272ad46b6 100644
--- a/app/views/insured/families/_insurance_fields.html.erb
+++ b/app/views/insured/families/_insurance_fields.html.erb
@@ -1,25 +1,25 @@
 <% if @bs4 %>
   <div class="special_qle_reasons hidden">
-    <label class="weight-n mb-2">
-      <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
-        <%= l10n("insured.is_your_health_coverage_ending_expanded", contact_center_phone_number: EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item, contact_center_tty_number: EnrollRegistry[:enroll_app].settings(:contact_center_tty_number).item, contact_center_name: EnrollRegistry[:enroll_app].settings(:contact_center_name).item) %> 
-        <div id="health-ending-expanded"></div>
-      <% else %>
-        <%= l10n("insured.is_your_health_coverage_ending") %>
-      <% end %>
-    </label>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
-      <label class="weight-n" for="reason_accept">
-        <%= radio_button_tag :reason, "yes", !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept' %>
-        <%= l10n("yes") %>
-      </label>
-    </div>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
-      <label class="weight-n" for="reason_accept1">
-        <%= radio_button_tag :reason, "no", EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept1', class: "n-radio" %>
-        <%= l10n("no") %>
-      </label>
-    </div>
+    <fieldset>
+      <legend class="weight-n mb-2">
+        <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
+          <%= l10n("insured.is_your_health_coverage_ending_expanded", contact_center_phone_number: EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item, contact_center_tty_number: EnrollRegistry[:enroll_app].settings(:contact_center_tty_number).item, contact_center_name: EnrollRegistry[:enroll_app].settings(:contact_center_name).item) %> 
+          <div id="health-ending-expanded"></div>
+        <% else %>
+          <%= l10n("insured.is_your_health_coverage_ending") %>
+        <% end %>
+      </legend>
+      <div class="focus" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')">
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "yes", !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: "reason_accept" %>
+          <%= l10n("yes") %>
+        </label>
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "no", EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept1' %>
+          <%= l10n("no") %>
+        </label>
+      </div>
+    </fieldset>
     <div class="mt-4 <%= pundit_class Family,:updateable? %>">
       <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
     </div>
diff --git a/app/views/insured/families/_marriage_fields.html.erb b/app/views/insured/families/_marriage_fields.html.erb
index b9fbeab7873..182dfb1ed67 100644
--- a/app/views/insured/families/_marriage_fields.html.erb
+++ b/app/views/insured/families/_marriage_fields.html.erb
@@ -1,24 +1,20 @@
 <% if @bs4 %>
   <div class="special_qle_reasons hidden">
-    <label class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.marriage", qle_start_date: @qle_date_calc, qle_date: @qle_date) %></label>
-    <div>
-      <div>
-        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
-          <label class="weight-n" for="reason_accept1">
-            <%= radio_button_tag :reason, "no", false, id: 'reason_accept1' %>
-            <%= l10n("yes") %>
-          </label>
-        </div>
-        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
-          <label class="weight-n" for="reason_accept">
-            <%= radio_button_tag :reason, "yes", true, id: 'reason_accept', class: "n-radio" %>
-            <%= l10n("no") %>
-          </label>
-        </div>
-        <div class="mt-4 <%= pundit_class Family,:updateable? %>">
-          <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
-        </div>
+    <fieldset>
+      <legend class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.marriage", qle_start_date: @qle_date_calc, qle_date: @qle_date) %></legend>
+      <div class="focus" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')">
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "no", false, id: "reason_accept1" %>
+          <%= l10n("yes") %>
+        </label>
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "yes", true, id: "reason_accept" %>
+          <%= l10n("no") %>
+        </label>
       </div>
+    </fieldset>
+    <div class="mt-4 <%= pundit_class Family,:updateable? %>">
+      <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
     </div>
   </div>
 <% else %>
diff --git a/app/views/insured/families/_moving_fields.html.erb b/app/views/insured/families/_moving_fields.html.erb
index fb283d2ed25..655f08eb30a 100644
--- a/app/views/insured/families/_moving_fields.html.erb
+++ b/app/views/insured/families/_moving_fields.html.erb
@@ -1,49 +1,49 @@
 <% if @bs4 %>
   <div class="special_qle_reasons hidden">
-    <label class="weight-n mb-2"><%= l10n("insured.indicate_following_circumstances_apply_to_you") %>: </label>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
-      <label class="weight-n" for="reason_accept">
-        <%= radio_button_tag :reason, "", true, id: 'reason_accept', class: "zip-check" %>
-        <span><%= l10n('insured.qle_detail.special_reason.move', qle_start_date: @qle_date_calc, qle_date: @qle_date) %></span>
-      </label>
-    </div>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
-      <label class="weight-n" for="reason_accept1">
-        <%= radio_button_tag :reason, "I was living outside the US or in a US territory", false, id: 'reason_accept1' %>
-        <%= l10n("insured.living_outside_the_US_or_in_US_territory") %>
-      </label>
-    </div>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept2')" class="n-radio-row">
-      <label class="weight-n" for="reason_accept2">
-        <%= radio_button_tag :reason, "I had income below 100% of the Federal Poverty Level and was living in a state that had not expanded Medicaid (tool-tip below)", false, id: 'reason_accept2', class: "zip-check"%>
-        <span><%= l10n("insured.moving_fields_had_income_below_of_the_federal_poverty_level") %> <%= h(link_to(l10n("insured.qle_detail.special_reason.move.calculator"), 'http://www.healthcare.gov/lower-costs', target: :_blank, rel: "noopener noreferrer")) if individual_market_is_enabled? %></span>
-      </label>
-    </div>
-    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_reject')" class="n-radio-row">
-      <label class="weight-n" for="reason_reject">
-        <%= radio_button_tag :reason, "None of the Above", false, id:'reason_reject' %>
-        <%= l10n("none_of_the_above") %>
-      </label>
-    </div>
+    <fieldset>
+      <legend class="weight-n mb-2"><%= l10n("insured.indicate_following_circumstances_apply_to_you") %>: </legend>
+      <div class="focus" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')">
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "", true, id: "reason_accept", class: "zip-check"%>
+          <span><%= l10n('insured.qle_detail.special_reason.move', qle_start_date: @qle_date_calc, qle_date: @qle_date) %></span>
+        </label>
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "I was living outside the US or in a US territory", false, id: 'reason_accept1' %>
+          <%= l10n("insured.living_outside_the_US_or_in_US_territory") %>
+        </label>
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "I had income below 100% of the Federal Poverty Level and was living in a state that had not expanded Medicaid (tool-tip below)", false, id: 'reason_accept2', class: "zip-check"%>
+          <span><%= l10n("insured.moving_fields_had_income_below_of_the_federal_poverty_level") %> <%= h(link_to(l10n("insured.qle_detail.special_reason.move.calculator"), 'http://www.healthcare.gov/lower-costs', target: :_blank, rel: "noopener noreferrer")) if individual_market_is_enabled? %></span>
+        </label>
+        <label class="weight-n" class="radio">
+          <%= radio_button_tag :reason, "None of the Above", false, id:'reason_reject' %>
+          <span><%= l10n("none_of_the_above") %></span>
+        </label>
+      </div>
+    </fieldset>
     <div class="mt-4 <%= pundit_class Family,:updateable? %>">
       <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
     </div>
   </div>
-    <div class="hidden zip_compare">
-      <label class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.move.enter_zip") %></label>
-      <div class="flex-column col-6">
-        <div onkeydown="handleButtonKeyDown(event, 'qle_zip_compare')">
-          <label><%= l10n("insured.qle_detail.special_reason.move.old_zip") %></label>
+  <div class="hidden zip_compare">
+    <label class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.move.enter_zip") %></label>
+    <div class="flex-column col-6 px-0">
+      <div onkeydown="handleButtonKeyDown(event, 'qle_zip_compare')">
+        <label>
+          <div><%= l10n("insured.qle_detail.special_reason.move.old_zip") %></div>
           <input class="old_zip_code required zip"/>
-        </div>
-        <div onkeydown="handleButtonKeyDown(event, 'qle_zip_compare')">
-          <label><%= l10n("insured.qle_detail.special_reason.move.new_zip") %></label>
+        </label>
+      </div>
+      <div onkeydown="handleButtonKeyDown(event, 'qle_zip_compare')">
+        <label>
+          <div><%= l10n("insured.qle_detail.special_reason.move.new_zip") %></div>
           <input class="new_zip_code required zip"/>
-        </div>
-        <div class="mt-4 <%= pundit_class Family,:updateable? %>">
-          <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_zip_compare"} %>
-        </div>
+        </label>
       </div>
+      <div class="mt-4 <%= pundit_class Family,:updateable? %>">
+        <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_zip_compare"} %>
+      </div>
+    </div>
   </div>
   <script>
     $(document).ready(function() {