From 866911cbd4b2cd6be43eaa06bbdb56ee4ec1c3fa Mon Sep 17 00:00:00 2001
From: soufiane <soufiane.baali99@gmail.com>
Date: Sat, 6 Dec 2025 00:20:37 +0100
Subject: [PATCH] fix(a11y): correct WAVE accessibility audit issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Footer: add label for newsletter email input, improve text contrast (beige-600 -> beige-700)
- Contact: add aria-label to map marker link, improve red asterisk contrast (red-500 -> red-600)
- Historique: add label for search input field
- Profil: improve label contrast (gray-600 -> gray-700), use semantic dl/dt/dd structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/contact/page.tsx       | 15 ++++++------
 app/historique/page.tsx    |  7 +++++-
 components/Footer.tsx      | 39 ++++++++++++++++-------------
 components/ProfilePage.tsx | 50 +++++++++++++++++++-------------------
 4 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 06f5159..b060de3 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -97,7 +97,7 @@ export default function ContactPage() {
                     {/* Nom complet */}
                     <div>
                       <label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2">
-                        Nom complet <span className="text-red-500">*</span>
+                        Nom complet <span className="text-red-600" aria-hidden="true">*</span>
                       </label>
                       <input
                         id="fullName"
@@ -114,7 +114,7 @@ export default function ContactPage() {
                     {/* Email */}
                     <div>
                       <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
-                        Email <span className="text-red-500">*</span>
+                        Email <span className="text-red-600" aria-hidden="true">*</span>
                       </label>
                       <input
                         id="email"
@@ -131,7 +131,7 @@ export default function ContactPage() {
                     {/* Sujet */}
                     <div>
                       <label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2">
-                        Sujet <span className="text-red-500">*</span>
+                        Sujet <span className="text-red-600" aria-hidden="true">*</span>
                       </label>
                       <select
                         id="subject"
@@ -153,7 +153,7 @@ export default function ContactPage() {
                     {/* Message */}
                     <div>
                       <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
-                        Message <span className="text-red-500">*</span>
+                        Message <span className="text-red-600" aria-hidden="true">*</span>
                       </label>
                       <textarea
                         id="message"
@@ -183,7 +183,7 @@ export default function ContactPage() {
                         <Link href="/privacy" className="text-primary-500 underline hover:text-primary-600">
                           politique de confidentialité
                         </Link>{' '}
-                        <span className="text-red-500">*</span>
+                        <span className="text-red-600" aria-hidden="true">*</span>
                       </label>
                     </div>
 
@@ -291,9 +291,10 @@ export default function ContactPage() {
                       target="_blank"
                       rel="noopener noreferrer"
                       className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 group"
+                      aria-label="Voir notre emplacement sur Google Maps - 18 Avenue Thiers, Nice"
                     >
-                      <span className="block w-6 h-6 bg-primary-500 rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-125 transition-transform animate-pulse"></span>
-                      <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[8px] border-l-transparent border-r-transparent border-t-primary-500"></span>
+                      <span className="block w-6 h-6 bg-primary-500 rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-125 transition-transform animate-pulse" aria-hidden="true"></span>
+                      <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[8px] border-l-transparent border-r-transparent border-t-primary-500" aria-hidden="true"></span>
                     </a>
                   </div>
                   <a
diff --git a/app/historique/page.tsx b/app/historique/page.tsx
index 389c267..2d06489 100644
--- a/app/historique/page.tsx
+++ b/app/historique/page.tsx
@@ -163,12 +163,17 @@ export default function HistoriquePage() {
           <div className="flex flex-col md:flex-row gap-4">
             <div className="flex-1">
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 w-5 h-5" />
+                <label htmlFor="search-tickets" className="sr-only">
+                  Rechercher par code ticket
+                </label>
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 w-5 h-5" aria-hidden="true" />
                 <input
+                  id="search-tickets"
                   type="text"
                   placeholder="Rechercher par code ticket..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
+                  aria-label="Rechercher par code ticket"
                   className="w-full pl-10 pr-4 py-3 border-2 border-beige-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none"
                 />
               </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 71d077f..9353b73 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -49,7 +49,7 @@ export default function Footer() {
             <div className="mb-4">
               <Logo variant="default" size="md" showText={true} />
             </div>
-            <p className="text-sm text-beige-600 mb-4">
+            <p className="text-sm text-beige-700 mb-4">
               Découvrez nos thés premium bio et artisanaux. Participez à notre grand
               jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots !
             </p>
@@ -58,7 +58,7 @@ export default function Footer() {
                 href="https://www.facebook.com/profile.php?id=61584261567579"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-beige-600 hover:text-primary-500 transition-colors"
+                className="text-beige-700 hover:text-primary-500 transition-colors"
                 aria-label="Facebook"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -69,7 +69,7 @@ export default function Footer() {
                 href="https://www.instagram.com/thetiptopgr3/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-beige-600 hover:text-primary-500 transition-colors"
+                className="text-beige-700 hover:text-primary-500 transition-colors"
                 aria-label="Instagram"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -80,7 +80,7 @@ export default function Footer() {
                 href="https://www.pinterest.com/The_Tip_Top_/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-beige-600 hover:text-primary-500 transition-colors"
+                className="text-beige-700 hover:text-primary-500 transition-colors"
                 aria-label="Pinterest"
               >
                 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@@ -99,7 +99,7 @@ export default function Footer() {
               <li>
                 <Link
                   href={ROUTES.HOME}
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Accueil
                 </Link>
@@ -107,7 +107,7 @@ export default function Footer() {
               <li>
                 <Link
                   href={isAuthenticated ? ROUTES.GAME : ROUTES.REGISTER}
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Participer au jeu
                 </Link>
@@ -115,7 +115,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/contact"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Contact
                 </Link>
@@ -123,7 +123,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/faq"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   FAQ
                 </Link>
@@ -138,7 +138,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/terms"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Conditions d'utilisation
                 </Link>
@@ -146,7 +146,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/privacy"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Politique de confidentialité
                 </Link>
@@ -154,7 +154,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/rules"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Règlement du jeu
                 </Link>
@@ -162,7 +162,7 @@ export default function Footer() {
               <li>
                 <Link
                   href="/legal"
-                  className="text-sm text-beige-600 hover:text-primary-500 transition-colors"
+                  className="text-sm text-beige-700 hover:text-primary-500 transition-colors"
                 >
                   Mentions légales
                 </Link>
@@ -173,16 +173,21 @@ export default function Footer() {
           {/* Newsletter */}
           <div>
             <h3 className="text-lg font-semibold text-primary-500 mb-4">NEWSLETTER</h3>
-            <p className="text-sm text-beige-600 mb-4">
+            <p className="text-sm text-beige-700 mb-4">
               Inscrivez-vous pour recevoir nos offres exclusives et nouveautés !
             </p>
             <form onSubmit={handleNewsletterSubmit} className="space-y-3">
               <div>
+                <label htmlFor="newsletter-email" className="sr-only">
+                  Adresse email pour la newsletter
+                </label>
                 <input
+                  id="newsletter-email"
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Votre email"
+                  aria-label="Adresse email pour la newsletter"
                   className="w-full px-4 py-2 text-sm border border-beige-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white text-beige-800 placeholder-beige-500"
                   disabled={isLoading}
                 />
@@ -205,7 +210,7 @@ export default function Footer() {
               )}
             </form>
             <div className="mt-4 pt-4 border-t border-beige-300">
-              <p className="text-xs text-beige-600 flex items-center gap-1">
+              <p className="text-xs text-beige-700 flex items-center gap-1">
                 <span>✉️</span>
                 <a
                   href="mailto:thetiptopgr3@gmail.com"
@@ -214,7 +219,7 @@ export default function Footer() {
                   thetiptopgr3@gmail.com
                 </a>
               </p>
-              <p className="text-xs text-beige-600 mt-1 flex items-center gap-1">
+              <p className="text-xs text-beige-700 mt-1 flex items-center gap-1">
                 <span>📞</span>
                 <a
                   href="tel:+33123456789"
@@ -232,8 +237,8 @@ export default function Footer() {
       <div className="border-t border-beige-300">
         <div className="container mx-auto px-4 py-6">
           <div className="flex items-center justify-center text-sm">
-            <p className="text-beige-600">
-              © {currentYear} Tous droits réservés. <span className="text-beige-500 text-xs">Site étudiant</span>
+            <p className="text-beige-700">
+              © {currentYear} Tous droits réservés. <span className="text-beige-600 text-xs">Site étudiant</span>
             </p>
           </div>
         </div>
diff --git a/components/ProfilePage.tsx b/components/ProfilePage.tsx
index 468f782..50c87f7 100644
--- a/components/ProfilePage.tsx
+++ b/components/ProfilePage.tsx
@@ -109,40 +109,40 @@ export default function ProfilePage({
               </div>
               <div className="p-6">
                 {!isEditing ? (
-                  <div className="space-y-4">
+                  <dl className="space-y-4">
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <dt className="text-sm font-medium text-gray-700">
                         Prénom
-                      </label>
-                      <p className="text-lg text-gray-900">{user.firstName}</p>
+                      </dt>
+                      <dd className="text-lg text-gray-900">{user.firstName}</dd>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <dt className="text-sm font-medium text-gray-700">
                         Nom
-                      </label>
-                      <p className="text-lg text-gray-900">{user.lastName}</p>
+                      </dt>
+                      <dd className="text-lg text-gray-900">{user.lastName}</dd>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <dt className="text-sm font-medium text-gray-700">
                         Email
-                      </label>
-                      <p className="text-lg text-gray-900">{user.email}</p>
+                      </dt>
+                      <dd className="text-lg text-gray-900">{user.email}</dd>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <dt className="text-sm font-medium text-gray-700">
                         Téléphone
-                      </label>
-                      <p className="text-lg text-gray-900">
+                      </dt>
+                      <dd className="text-lg text-gray-900">
                         {user.phone || "Non renseigné"}
-                      </p>
+                      </dd>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <dt className="text-sm font-medium text-gray-700">
                         Rôle
-                      </label>
-                      <div className="mt-1">
+                      </dt>
+                      <dd className="mt-1">
                         <Badge variant={badgeVariant}>{roleLabel}</Badge>
-                      </div>
+                      </dd>
                     </div>
                     <div className="pt-4">
                       <button
@@ -152,7 +152,7 @@ export default function ProfilePage({
                         Modifier mes informations
                       </button>
                     </div>
-                  </div>
+                  </dl>
                 ) : (
                   <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                     <Input
@@ -216,14 +216,14 @@ export default function ProfilePage({
                 <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
               </div>
               <div className="p-6 space-y-4">
-                <div>
-                  <label className="text-sm font-medium text-gray-600">
+                <dl>
+                  <dt className="text-sm font-medium text-gray-700">
                     Membre depuis
-                  </label>
-                  <p className="text-sm text-gray-900 mt-1">
+                  </dt>
+                  <dd className="text-sm text-gray-900 mt-1">
                     {formatDate(user.createdAt)}
-                  </p>
-                </div>
+                  </dd>
+                </dl>
               </div>
             </div>