Merge pull request #39 from JianJroh/fix-label-associated-radio-button

fix: associate the labels with the radio buttons
sfxcode · Mar 15, 2024 · 2a19cec · 2a19cec
2 parents 38e8430 + 345b89a
commit 2a19cec
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/components/app/AppTopbar.vue b/components/app/AppTopbar.vue
@@ -110,43 +110,43 @@ function redirectToGithub (event: any) {
         <h6>Theme</h6>
         <div class="field-radiobutton">
           <RadioButton
-            id="aura-dark"
             v-model="themeStore.themeName"
+            input-id="aura-dark"
             name="layoutColorMode"
             value="aura-dark"
             @change="themeStore.setTheme('aura-dark')"
           />
-          <label>Aura Dark</label>
+          <label for="aura-dark">Aura Dark</label>
         </div>
         <div class="field-radiobutton">
           <RadioButton
-            id="aura-light"
             v-model="themeStore.themeName"
+            input-id="aura-light"
             name="layoutColorMode"
             value="aura-light"
             @change="themeStore.setTheme('aura-light')"
           />
-          <label>Aura Light</label>
+          <label for="aura-light">Aura Light</label>
         </div>
         <div class="field-radiobutton">
           <RadioButton
-            id="lara-dark"
             v-model="themeStore.themeName"
+            input-id="lara-dark"
             name="layoutColorMode"
             value="lara-dark"
             @change="themeStore.setTheme('lara-dark')"
           />
-          <label>Lara Dark</label>
+          <label for="lara-dark">Lara Dark</label>
         </div>
         <div class="field-radiobutton">
           <RadioButton
-            id="lara-light"
             v-model="themeStore.themeName"
+            input-id="lara-light"
             name="layoutColorMode"
             value="lara-light"
             @change="themeStore.setTheme('lara-light')"
           />
-          <label>Lara Light</label>
+          <label for="lara-light">Lara Light</label>
         </div>
 
         <h6>Primary Color</h6>