From 1ac78462f25e0dc13e49e4cdaec01117c79e86bf Mon Sep 17 00:00:00 2001
From: Dennis Morello <dennismorello@gmail.com>
Date: Mon, 30 Oct 2023 15:59:25 +0100
Subject: [PATCH] fix: remove incorrect labels in radio groups (#269)

Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
---
 dashboard/final-example/app/ui/invoices/create-form.tsx   | 8 ++++----
 dashboard/final-example/app/ui/invoices/edit-form.tsx     | 8 ++++----
 dashboard/starter-example/app/ui/invoices/create-form.tsx | 8 ++++----
 dashboard/starter-example/app/ui/invoices/edit-form.tsx   | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/dashboard/final-example/app/ui/invoices/create-form.tsx b/dashboard/final-example/app/ui/invoices/create-form.tsx
index 85cc5dc..ce605b9 100644
--- a/dashboard/final-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/create-form.tsx
@@ -91,10 +91,10 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
         </div>
 
         {/* Invoice Status */}
-        <div>
-          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
             Set the invoice status
-          </label>
+          </legend>
           <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
             <div className="flex gap-4">
               <div className="flex items-center">
@@ -140,7 +140,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
               ))}
             </div>
           ) : null}
-        </div>
+        </fieldset>
 
         {state.message ? (
           <div aria-live="polite" className="my-2 text-sm text-red-500">
diff --git a/dashboard/final-example/app/ui/invoices/edit-form.tsx b/dashboard/final-example/app/ui/invoices/edit-form.tsx
index 7c737ff..2bf61ca 100644
--- a/dashboard/final-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/edit-form.tsx
@@ -99,10 +99,10 @@ export default function EditInvoiceForm({
         </div>
 
         {/* Invoice Status */}
-        <div>
-          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
             Set the invoice status
-          </label>
+          </legend>
           <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
             <div className="flex gap-4">
               <div className="flex items-center">
@@ -150,7 +150,7 @@ export default function EditInvoiceForm({
               ))}
             </div>
           ) : null}
-        </div>
+        </fieldset>
 
         {state.message ? (
           <div aria-live="polite" className="my-2 text-sm text-red-500">
diff --git a/dashboard/starter-example/app/ui/invoices/create-form.tsx b/dashboard/starter-example/app/ui/invoices/create-form.tsx
index 04f2966..c86678c 100644
--- a/dashboard/starter-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/starter-example/app/ui/invoices/create-form.tsx
@@ -60,10 +60,10 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
         </div>
 
         {/* Invoice Status */}
-        <div>
-          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
             Set the invoice status
-          </label>
+          </legend>
           <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
             <div className="flex gap-4">
               <div className="flex items-center">
@@ -98,7 +98,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
               </div>
             </div>
           </div>
-        </div>
+        </fieldset>
       </div>
       <div className="mt-6 flex justify-end gap-4">
         <Link
diff --git a/dashboard/starter-example/app/ui/invoices/edit-form.tsx b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
index e10f9c0..4e476a4 100644
--- a/dashboard/starter-example/app/ui/invoices/edit-form.tsx
+++ b/dashboard/starter-example/app/ui/invoices/edit-form.tsx
@@ -68,10 +68,10 @@ export default function EditInvoiceForm({
         </div>
 
         {/* Invoice Status */}
-        <div>
-          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
             Set the invoice status
-          </label>
+          </legend>
           <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
             <div className="flex gap-4">
               <div className="flex items-center">
@@ -108,7 +108,7 @@ export default function EditInvoiceForm({
               </div>
             </div>
           </div>
-        </div>
+        </fieldset>
       </div>
       <div className="mt-6 flex justify-end gap-4">
         <Link