From be068fade429c668f9035c9bb6dcbb3709f409bc Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Wed, 2 Apr 2025 09:05:49 +0100
Subject: [PATCH] fix grouping of RadioGroup with meaningful title (#13838)

* fix grouping of RadioGroup with meaninful title

* apply fix from Phil
---
 .../src/components/Form/Radio/RadioGroup.vue  | 48 ++++++++++---------
 shell/assets/styles/base/_basic.scss          |  6 +++
 shell/components/LandingPagePreference.vue    |  8 ++--
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue b/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
index 14772573c5..767a2d2dc2 100644
--- a/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
+++ b/pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue
@@ -199,33 +199,35 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <fieldset>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
     >
-      <slot name="label">
-        <h3>
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
-          <template v-else-if="label">
-            {{ label }}
-          </template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="icon icon-info icon-lg"
-          />
-        </h3>
-      </slot>
+      <legend>
+        <slot name="label">
+          <h3>
+            <t
+              v-if="labelKey"
+              :k="labelKey"
+            />
+            <template v-else-if="label">
+              {{ label }}
+            </template>
+            <i
+              v-if="tooltipKey"
+              v-clean-tooltip="t(tooltipKey)"
+              class="icon icon-info icon-lg"
+            />
+            <i
+              v-else-if="tooltip"
+              v-clean-tooltip="tooltip"
+              class="icon icon-info icon-lg"
+            />
+          </h3>
+        </slot>
+      </legend>
     </div>
 
     <!-- Group -->
@@ -266,7 +268,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style lang='scss'>
diff --git a/shell/assets/styles/base/_basic.scss b/shell/assets/styles/base/_basic.scss
index 7a0013b68a..3d6360ebf4 100644
--- a/shell/assets/styles/base/_basic.scss
+++ b/shell/assets/styles/base/_basic.scss
@@ -144,3 +144,9 @@ HR.vertical {
 .force-wrap       { @include force-wrap }
 .bordered-section { @include bordered-section }
 .section-divider  { @include section-divider }
+
+fieldset {
+  border: 0;
+  padding: 0;
+  margin-inline: 0;
+}
\ No newline at end of file
diff --git a/shell/components/LandingPagePreference.vue b/shell/components/LandingPagePreference.vue
index 0dc1bde315..f9baa8edfa 100644
--- a/shell/components/LandingPagePreference.vue
+++ b/shell/components/LandingPagePreference.vue
@@ -103,9 +103,6 @@ export default {
 
 <template>
   <div>
-    <p class="set-landing-leadin">
-      {{ t('landing.landingPrefs.body') }}
-    </p>
     <RadioGroup
       id="login-route"
       :value="afterLoginRoute"
@@ -113,6 +110,11 @@ export default {
       :options="routeRadioOptions"
       @update:value="updateLoginRoute"
     >
+      <template #label>
+        <p class="set-landing-leadin">
+          {{ t('landing.landingPrefs.body') }}
+        </p>
+      </template>
       <template #2="{option}">
         <div class="custom-page">
           <RadioButton