From 7ed48d8e4ba29df884e4d35bf92dd05016299e2f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 18 Aug 2026 16:50:30 +0000
Subject: [PATCH] fix: improve keyboard accessibility for signup tabs

Added standard ARIA roles, tabindex, and keyboard event listeners to the custom anchor-based tabs in the Signup component to ensure they are accessible to keyboard-only and screen reader users. Added Tailwind classes to provide a visible focus ring.

Co-authored-by: AntonioCardenas <11583391+AntonioCardenas@users.noreply.github.com>
---
 src/components/Signup.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Signup.tsx b/src/components/Signup.tsx
index 74675b3..ff157b8 100644
--- a/src/components/Signup.tsx
+++ b/src/components/Signup.tsx
@@ -926,18 +926,34 @@ const Signup = () => {
             {!state.accountCreated ? (
               <div className="">
                 <div className="bg-base-100 pt-4 rounded-t-xl m-12 lg:mx-64">
-                  <div className="flex tabs justify-center">
+                  <div className="flex tabs justify-center" role="tablist">
                     <a
-                      className={`${activeTab == 'farmer' && `tab btn-wide tab-lg  tab-lifted tab-active`} tab btn-wide tab-lg `}
-                      id="signup-tabs"
+                      className={`${activeTab == 'farmer' && `tab btn-wide tab-lg  tab-lifted tab-active`} tab btn-wide tab-lg focus-visible:ring-2 focus-visible:outline-none cursor-pointer`}
+                      role="tab"
+                      tabIndex={0}
+                      aria-selected={activeTab === 'farmer'}
                       onClick={() => setActiveTab('farmer')}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setActiveTab('farmer');
+                        }
+                      }}
                     >
                       <>{t('farmer')}</>
                     </a>
                     <a
-                      className={`${activeTab == 'cooperative' && `tab btn-wide tab-lg tab-lifted tab-active`} tab btn-wide tab-lg `}
-                      id="signup-tabs"
+                      className={`${activeTab == 'cooperative' && `tab btn-wide tab-lg tab-lifted tab-active`} tab btn-wide tab-lg focus-visible:ring-2 focus-visible:outline-none cursor-pointer`}
+                      role="tab"
+                      tabIndex={0}
+                      aria-selected={activeTab === 'cooperative'}
                       onClick={() => setActiveTab('cooperative')}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setActiveTab('cooperative');
+                        }
+                      }}
                     >
                       <>{t('company')}</>
                     </a>