From 0265891849f0ca303c47cbcc83e24ed60bbfc9f8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 13 Aug 2026 16:48:57 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20keyboard=20?=
 =?UTF-8?q?accessibility=20for=20interactive=20elements=20in=20Signup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added keyboard support (Space/Enter) and ARIA attributes (role="button", aria-label) to the avatar upload image.
- Added keyboard support, ARIA tab roles, and aria-selected states to the Farmer/Company signup tabs.
- Replaced duplicate `id="signup-tabs"` with unique IDs.
- Added `focus-visible` styling for clear keyboard focus indicators on both elements.

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

diff --git a/src/components/Signup.tsx b/src/components/Signup.tsx
index 74675b3..9666cb3 100644
--- a/src/components/Signup.tsx
+++ b/src/components/Signup.tsx
@@ -725,8 +725,17 @@ const Signup = () => {
               <div className="flex avatar w-24 bg-red-500  mx-auto">
                 <img
                   src={selectedImage !== '' ? selectedImage : User}
-                  className="rounded-xl"
+                  className="rounded-xl cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
                   onClick={handleClick}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleClick(e);
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={(t('upload-image') as string) || 'Upload image'}
                 />
                 <Form.Control
                   type="file"
@@ -926,18 +935,36 @@ 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:outline-none focus-visible:ring-2 focus-visible:ring-blue-500`}
+                      id="signup-tabs-farmer"
                       onClick={() => setActiveTab('farmer')}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setActiveTab('farmer');
+                        }
+                      }}
+                      role="tab"
+                      aria-selected={activeTab === 'farmer'}
+                      tabIndex={0}
                     >
                       <>{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:outline-none focus-visible:ring-2 focus-visible:ring-blue-500`}
+                      id="signup-tabs-company"
                       onClick={() => setActiveTab('cooperative')}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setActiveTab('cooperative');
+                        }
+                      }}
+                      role="tab"
+                      aria-selected={activeTab === 'cooperative'}
+                      tabIndex={0}
                     >
                       <>{t('company')}</>
                     </a>