From a691f5c0dda83f2bd51f3a1bf6bfaf6a773a1dec Mon Sep 17 00:00:00 2001
From: alexjanousekGSA <alex.janousek@gsa.gov>
Date: Wed, 9 Jul 2025 16:40:34 -0300
Subject: [PATCH] Migrate radio buttons from GOV.UK to USWDS

- Replace .multiple-choice with .usa-radio classes
- Update radio templates to use USWDS patterns
- Remove GOV.UK dependencies from radio components
- Convert nested lists to flat divs with USWDS margin utilities
- Update tests to use new radio classes
---
 .../uswds/_uswds-theme-custom-styles.scss     |  3 ---
 app/templates/components/radios.html          |  2 +-
 app/templates/components/select-input.html    | 27 +++++++------------
 tests/app/main/views/test_add_service.py      |  2 +-
 tests/javascripts/templateFolderForm.test.js  | 14 +++++-----
 5 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index e10071f3d..da85cb5ba 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -108,9 +108,6 @@ p,
   box-shadow: none !important;
 }
 
-.multiple-choice [type='radio']:focus + label::before {
-  box-shadow: 0 0 0 3px color('blue-40v');
-}
 
 .usa-dark-background .pill-item__container {
   color: #fff;
diff --git a/app/templates/components/radios.html b/app/templates/components/radios.html
index b629bb871..22489e289 100644
--- a/app/templates/components/radios.html
+++ b/app/templates/components/radios.html
@@ -40,7 +40,7 @@
      <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}" data-show-now-as-default="{{ show_now_as_default|string|lower }}">
        <div class="radio-select-column">
        {% for option in field %}
-         <div class="multiple-choice">
+         <div class="usa-radio">
            {{ option }}
            <label for="{{ option.id }}">
              {{ option.label.text }}
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index be84aa232..e5d4d4ee5 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -9,18 +9,19 @@
 {% endmacro %}
 
 
-{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio") %}
-    <ul>
+{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio", indent_level=0) %}
     {% for option in options %}
       {% if child_map[option.data] %}
-        {% call select_input(option, disable, option_hints, as_list_item=True, input=input) %}
-          {{ select_list(child_map[option.data], child_map, disable, option_hints, input=input) }}
-        {% endcall %}
+        <div class="{% if indent_level > 0 %}margin-left-{{ indent_level * 4 }}{% endif %}">
+          {{ select_input(option, disable, option_hints, as_list_item=False, input=input) }}
+        </div>
+        {{ select_list(child_map[option.data], child_map, disable, option_hints, input=input, indent_level=indent_level + 1) }}
       {% else %}
-          {{ select_input(option, disable, option_hints, as_list_item=True, input=input) }}
+        <div class="{% if indent_level > 0 %}margin-left-{{ indent_level * 4 }}{% endif %}">
+          {{ select_input(option, disable, option_hints, as_list_item=False, input=input) }}
+        </div>
       {% endif %}
     {% endfor %}
-    </ul>
 {% endmacro %}
 
 
@@ -63,11 +64,7 @@
 {% endmacro %}
 
 {% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
-  {% if as_list_item %}
-  <li class="multiple-choice test-one" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
-  {% else %}
   <div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
-  {% endif %}
     <input
       id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
       {% if option.data in disable %}
@@ -80,17 +77,13 @@
     <label class="usa-radio__label" for="{{ option.id }}">
       {{ option.label.text }}
       {% if option_hints[option.data] %}
-        <div class="block-label-hint">
+        <span class="usa-hint">
           {{ option_hints[option.data] }}
-        </div>
+        </span>
       {% endif %}
     </label>
     {% if caller %}
         {{ caller() }}
     {% endif %}
-  {% if as_list_item %}
-  </li>
-  {% else %}
   </div>
-  {% endif %}
 {% endmacro %}
diff --git a/tests/app/main/views/test_add_service.py b/tests/app/main/views/test_add_service.py
index 3a781bda5..a62c21487 100644
--- a/tests/app/main/views/test_add_service.py
+++ b/tests/app/main/views/test_add_service.py
@@ -54,7 +54,7 @@ def test_get_should_not_render_radios_if_org_type_known(
     page = client_request.get("main.add_service")
     assert page.select_one("h1").text.strip() == "About your service"
     assert page.select_one("input[name=name]").get("value") is None
-    assert not page.select(".multiple-choice")
+    assert not page.select(".usa-radio")
 
 
 def test_show_different_page_if_user_org_type_is_local(
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index c9fbdf734..d12a40748 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -12,17 +12,17 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
       nodes
         .filter(node => node.type === 'folder')
         .forEach(node => {
-          result += `<li class="multiple-choice">
+          result += `<div class="usa-radio">
                       <input id="node-${count}" name="move_to" type="radio" value="node-${count}">
                       <label class="usa-label" for="node-${count}">
                         ${node.label}
                       </label>
                       ${node.children ? foldersCheckboxesHTML(node.children) : ''}
-                    </li>`;
+                    </div>`;
           count++;
         });
 
-      return `<ul>${result}</ul>`;
+      return `<div>${result}</div>`;
     };
 
   }();
@@ -83,25 +83,25 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
                       <legend class="form-label">
                         New template
                       </legend>
-                      <div class="multiple-choice">
+                      <div class="usa-radio">
                         <input id="add_template_by_template_type-0" name="add_template_by_template_type" type="radio" value="email">
                         <label class="usa-label" for="add_template_by_template_type-0">
                           Email
                         </label>
                       </div>
-                      <div class="multiple-choice">
+                      <div class="usa-radio">
                         <input id="add_template_by_template_type-1" name="add_template_by_template_type" type="radio" value="sms">
                         <label class="usa-label" for="add_template_by_template_type-1">
                           Text message
                         </label>
                       </div>
-                      <div class="multiple-choice">
+                      <div class="usa-radio">
                         <input id="add_template_by_template_type-2" name="add_template_by_template_type" type="radio" value="letter">
                         <label class="usa-label" for="add_template_by_template_type-2">
                           Letter
                         </label>
                       </div>
-                      <div class="multiple-choice">
+                      <div class="usa-radio">
                         <input id="add_template_by_template_type-3" name="add_template_by_template_type" type="radio" value="copy-existing">
                         <label class="usa-label" for="add_template_by_template_type-3">
                           Copy an existing template