Update focus-visible handling on my data page

Author: webstackdev

src/components/Pages/MyData/index.astro

@@ -111,13 +111,13 @@ const { content } = Astro.props
               name="email"
               required
               placeholder="your@email.com"
-              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary transition-colors duration-200"
+              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active focus:border-primary transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
             />
           </div>
 
           <button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight-offset hover:bg-spotlight text-white font-semibold transition-colors mt-8"
+            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight-offset hover:bg-spotlight text-white font-semibold transition-colors mt-8 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
           >
             {content.accessData.buttonText}
           </button>
@@ -163,18 +163,23 @@ const { content } = Astro.props
               name="email"
               required
               placeholder="your@email.com"
-              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active transition-colors duration-200"
+              class="w-full rounded-md border border-content bg-content-inverse px-3 py-2 placeholder:text-content-active transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
             />
           </div>
 
           <label class="flex items-start gap-3 text-sm">
-            <input type="checkbox" id="confirm-delete" required class="mt-1" />
+            <input
+              type="checkbox"
+              id="confirm-delete"
+              required
+              class="mt-1 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
+            />
             <span class="mt-0.5">{content.deleteData.confirmText}</span>
           </label>
 
           <button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger-offset text-white font-semibold hover:bg-danger transition-colors"
+            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger-offset text-white font-semibold hover:bg-danger transition-colors focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
           >
             {content.deleteData.buttonText}
           </button>