From 6814356be5d1593f9469dc08e8b5a1f11c5ab096 Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Fri, 27 Sep 2024 15:39:08 -0400
Subject: [PATCH 1/7] APPEALS-58970 FIx text wrapping issue

---
 client/app/caseDistribution/components/AffinityDays.jsx    | 7 +++----
 .../app/styles/caseDistribution/_interactable_levers.scss  | 4 ++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/app/caseDistribution/components/AffinityDays.jsx b/client/app/caseDistribution/components/AffinityDays.jsx
index 06beeafa00f..c56b9f4f773 100644
--- a/client/app/caseDistribution/components/AffinityDays.jsx
+++ b/client/app/caseDistribution/components/AffinityDays.jsx
@@ -115,7 +115,7 @@ const AffinityDays = () => {
 
     return (
       <div key={`${lever.item}-${index}-${option.item}`}>
-        <div>
+        <div className="radio-with-text">
           <input
             checked={isOptionSelected(lever, option)}
             type={ACD_LEVERS.data_types.radio}
@@ -125,9 +125,8 @@ const AffinityDays = () => {
             name={lever.item}
             onChange={onChangeRadio(lever, option)}
           />
-          <label htmlFor={`${lever.item}-${option.item}`}>
-            {option.text}
-          </label>
+          <label htmlFor={`${lever.item}-${option.item}`} />
+          <div>{`${option.text}-fffffffffffff`}</div>
         </div>
         <div>
           <div className={className} aria-label={option.unit}>
diff --git a/client/app/styles/caseDistribution/_interactable_levers.scss b/client/app/styles/caseDistribution/_interactable_levers.scss
index f241e716fcc..276a978bd1e 100644
--- a/client/app/styles/caseDistribution/_interactable_levers.scss
+++ b/client/app/styles/caseDistribution/_interactable_levers.scss
@@ -47,6 +47,10 @@
   margin-bottom: 5px;
 }
 
+.radio-with-text {
+  display: flex;
+}
+
 .lever-head {
   width: 100%;
   border-bottom: 1px solid $color-gray-warm-light;

From 87d4913e2af25554829ce2280b30b89a605e24c1 Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Fri, 27 Sep 2024 15:51:54 -0400
Subject: [PATCH 2/7] REmove test text

---
 client/app/caseDistribution/components/AffinityDays.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/caseDistribution/components/AffinityDays.jsx b/client/app/caseDistribution/components/AffinityDays.jsx
index c56b9f4f773..f5ac6b145de 100644
--- a/client/app/caseDistribution/components/AffinityDays.jsx
+++ b/client/app/caseDistribution/components/AffinityDays.jsx
@@ -126,7 +126,7 @@ const AffinityDays = () => {
             onChange={onChangeRadio(lever, option)}
           />
           <label htmlFor={`${lever.item}-${option.item}`} />
-          <div>{`${option.text}-fffffffffffff`}</div>
+          <div>{option.text}</div>
         </div>
         <div>
           <div className={className} aria-label={option.unit}>

From 1e36a6b3eb80e18571e0a26554c7de50d9d06248 Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Wed, 2 Oct 2024 11:12:20 -0400
Subject: [PATCH 3/7] Update snapshot

---
 .../CaseDistributionApp.test.js.snap          | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
index 66ac32d5d7f..55ad6a232a2 100644
--- a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
+++ b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
@@ -396,7 +396,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                       id="ama_hearing_case_affinity_days"
                     >
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             checked=""
                             disabled=""
@@ -407,9 +409,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-value"
-                          >
+                          />
+                          <div>
                             Attempt distribution to current judge for max of:
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div
@@ -451,7 +454,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                         </div>
                       </div>
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             disabled=""
                             id="ama_hearing_case_affinity_days-infinite"
@@ -461,9 +466,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-infinite"
-                          >
+                          />
+                          <div>
                             Always distribute to current judge
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div
@@ -472,7 +478,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                         </div>
                       </div>
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             disabled=""
                             id="ama_hearing_case_affinity_days-omit"
@@ -482,9 +490,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-omit"
-                          >
+                          />
+                          <div>
                             Omit variable from distribution rules
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div
@@ -516,7 +525,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                       id="ama_hearing_case_aod_affinity_days"
                     >
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             disabled=""
                             id="ama_hearing_case_aod_affinity_days-value"
@@ -526,9 +537,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-value"
-                          >
+                          />
+                          <div>
                             Attempt distribution to current judge for max of:
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div
@@ -559,7 +571,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                         </div>
                       </div>
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             checked=""
                             disabled=""
@@ -570,9 +584,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-infinite"
-                          >
+                          />
+                          <div>
                             Always distribute to current judge
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div
@@ -582,7 +597,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                         </div>
                       </div>
                       <div>
-                        <div>
+                        <div
+                          class="radio-with-text"
+                        >
                           <input
                             disabled=""
                             id="ama_hearing_case_aod_affinity_days-omit"
@@ -592,9 +609,10 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-omit"
-                          >
+                          />
+                          <div>
                             Omit variable from distribution rules
-                          </label>
+                          </div>
                         </div>
                         <div>
                           <div

From e26ea1ce6cbbec220e04d4cb302e8ed176e89a7f Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Wed, 2 Oct 2024 13:51:34 -0400
Subject: [PATCH 4/7] FIx 508 issue

---
 client/app/caseDistribution/components/AffinityDays.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/app/caseDistribution/components/AffinityDays.jsx b/client/app/caseDistribution/components/AffinityDays.jsx
index f5ac6b145de..d058e9daecd 100644
--- a/client/app/caseDistribution/components/AffinityDays.jsx
+++ b/client/app/caseDistribution/components/AffinityDays.jsx
@@ -124,9 +124,10 @@ const AffinityDays = () => {
             id={`${lever.item}-${option.item}`}
             name={lever.item}
             onChange={onChangeRadio(lever, option)}
+            title={option.text}
           />
           <label htmlFor={`${lever.item}-${option.item}`} />
-          <div>{option.text}</div>
+          <div> {option.text} </div>
         </div>
         <div>
           <div className={className} aria-label={option.unit}>

From b8b6fde6e18813be61468221e04ea7a5a6e0cd3b Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Wed, 2 Oct 2024 13:53:32 -0400
Subject: [PATCH 5/7] Update snapshot

---
 .../CaseDistributionApp.test.js.snap           | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
index 55ad6a232a2..0dd174d22c2 100644
--- a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
+++ b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
@@ -404,6 +404,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_affinity_days-value"
                             name="ama_hearing_case_affinity_days"
+                            title="Attempt distribution to current judge for max of:"
                             type="radio"
                             value="value"
                           />
@@ -411,7 +412,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_affinity_days-value"
                           />
                           <div>
+                             
                             Attempt distribution to current judge for max of:
+                             
                           </div>
                         </div>
                         <div>
@@ -461,6 +464,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_affinity_days-infinite"
                             name="ama_hearing_case_affinity_days"
+                            title="Always distribute to current judge"
                             type="radio"
                             value="infinite"
                           />
@@ -468,7 +472,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_affinity_days-infinite"
                           />
                           <div>
+                             
                             Always distribute to current judge
+                             
                           </div>
                         </div>
                         <div>
@@ -485,6 +491,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_affinity_days-omit"
                             name="ama_hearing_case_affinity_days"
+                            title="Omit variable from distribution rules"
                             type="radio"
                             value="omit"
                           />
@@ -492,7 +499,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_affinity_days-omit"
                           />
                           <div>
+                             
                             Omit variable from distribution rules
+                             
                           </div>
                         </div>
                         <div>
@@ -532,6 +541,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_aod_affinity_days-value"
                             name="ama_hearing_case_aod_affinity_days"
+                            title="Attempt distribution to current judge for max of:"
                             type="radio"
                             value="value"
                           />
@@ -539,7 +549,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_aod_affinity_days-value"
                           />
                           <div>
+                             
                             Attempt distribution to current judge for max of:
+                             
                           </div>
                         </div>
                         <div>
@@ -579,6 +591,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_aod_affinity_days-infinite"
                             name="ama_hearing_case_aod_affinity_days"
+                            title="Always distribute to current judge"
                             type="radio"
                             value="infinite"
                           />
@@ -586,7 +599,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_aod_affinity_days-infinite"
                           />
                           <div>
+                             
                             Always distribute to current judge
+                             
                           </div>
                         </div>
                         <div>
@@ -604,6 +619,7 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             disabled=""
                             id="ama_hearing_case_aod_affinity_days-omit"
                             name="ama_hearing_case_aod_affinity_days"
+                            title="Omit variable from distribution rules"
                             type="radio"
                             value="omit"
                           />
@@ -611,7 +627,9 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                             for="ama_hearing_case_aod_affinity_days-omit"
                           />
                           <div>
+                             
                             Omit variable from distribution rules
+                             
                           </div>
                         </div>
                         <div>

From 453dbad421e66f9449b791eb0ee10b158af735c1 Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Thu, 3 Oct 2024 13:07:36 -0400
Subject: [PATCH 6/7] Ensure label text passes all 508 compliance tools

---
 client/app/caseDistribution/components/AffinityDays.jsx     | 6 ++++--
 .../app/styles/caseDistribution/_interactable_levers.scss   | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/app/caseDistribution/components/AffinityDays.jsx b/client/app/caseDistribution/components/AffinityDays.jsx
index d058e9daecd..fe0a1bf4d62 100644
--- a/client/app/caseDistribution/components/AffinityDays.jsx
+++ b/client/app/caseDistribution/components/AffinityDays.jsx
@@ -126,8 +126,10 @@ const AffinityDays = () => {
             onChange={onChangeRadio(lever, option)}
             title={option.text}
           />
-          <label htmlFor={`${lever.item}-${option.item}`} />
-          <div> {option.text} </div>
+          <label htmlFor={`${lever.item}-${option.item}`}>
+            <span className='hidden-label-text'>{option.text}</span>
+          </label>
+          <div>{option.text}</div>
         </div>
         <div>
           <div className={className} aria-label={option.unit}>
diff --git a/client/app/styles/caseDistribution/_interactable_levers.scss b/client/app/styles/caseDistribution/_interactable_levers.scss
index 276a978bd1e..aef5a836646 100644
--- a/client/app/styles/caseDistribution/_interactable_levers.scss
+++ b/client/app/styles/caseDistribution/_interactable_levers.scss
@@ -51,6 +51,10 @@
   display: flex;
 }
 
+.hidden-label-text {
+  display: none;
+}
+
 .lever-head {
   width: 100%;
   border-bottom: 1px solid $color-gray-warm-light;

From e94f5733d860a0ed3cfada58c8876843856562f7 Mon Sep 17 00:00:00 2001
From: Christopher Detlef <>
Date: Thu, 3 Oct 2024 15:53:38 -0400
Subject: [PATCH 7/7] Update snapshot

---
 .../CaseDistributionApp.test.js.snap          | 60 +++++++++++++------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
index 0dd174d22c2..a5c27fc542b 100644
--- a/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
+++ b/client/test/app/caseDistribution/pages/__snapshots__/CaseDistributionApp.test.js.snap
@@ -410,11 +410,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-value"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Attempt distribution to current judge for max of:
+                            </span>
+                          </label>
                           <div>
-                             
                             Attempt distribution to current judge for max of:
-                             
                           </div>
                         </div>
                         <div>
@@ -470,11 +474,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-infinite"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Always distribute to current judge
+                            </span>
+                          </label>
                           <div>
-                             
                             Always distribute to current judge
-                             
                           </div>
                         </div>
                         <div>
@@ -497,11 +505,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_affinity_days-omit"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Omit variable from distribution rules
+                            </span>
+                          </label>
                           <div>
-                             
                             Omit variable from distribution rules
-                             
                           </div>
                         </div>
                         <div>
@@ -547,11 +559,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-value"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Attempt distribution to current judge for max of:
+                            </span>
+                          </label>
                           <div>
-                             
                             Attempt distribution to current judge for max of:
-                             
                           </div>
                         </div>
                         <div>
@@ -597,11 +613,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-infinite"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Always distribute to current judge
+                            </span>
+                          </label>
                           <div>
-                             
                             Always distribute to current judge
-                             
                           </div>
                         </div>
                         <div>
@@ -625,11 +645,15 @@ exports[`render Case Distribution Application matches snapshot 1`] = `
                           />
                           <label
                             for="ama_hearing_case_aod_affinity_days-omit"
-                          />
+                          >
+                            <span
+                              class="hidden-label-text"
+                            >
+                              Omit variable from distribution rules
+                            </span>
+                          </label>
                           <div>
-                             
                             Omit variable from distribution rules
-                             
                           </div>
                         </div>
                         <div>