From 618b6890915cd76e006e3510e50ab39d103dd307 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane.baali99@gmail.com>
Date: Mon, 8 Dec 2025 15:06:30 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20am=C3=A9lioration=20accessibilit=C3=A9?=
 =?UTF-8?q?=20WAVE=20-=20corrections=20multiples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout h2 sr-only dans Footer, login, register, forgot-password pour hiérarchie titres
- Correction contraste TicketTableRow (text-gray-700)
- Correction contraste StatusBadge (couleurs -900)
- Correction contraste page jeux (text-gray-700)
- Correction labels orphelins page profil (label → span)
- Mise à jour FAQContent

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/faq/FAQContent.tsx           |  5 ++++-
 app/forgot-password/page.tsx     |  2 ++
 app/jeux/page.tsx                |  2 +-
 app/login/page.tsx               |  2 ++
 app/profil/page.tsx              | 24 ++++++++++++------------
 app/register/page.tsx            |  2 ++
 components/Footer.tsx            |  2 ++
 components/ui/StatusBadge.tsx    | 32 ++++++++++++++++----------------
 components/ui/TicketTableRow.tsx |  4 ++--
 9 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/app/faq/FAQContent.tsx b/app/faq/FAQContent.tsx
index c81807b..e10aa24 100644
--- a/app/faq/FAQContent.tsx
+++ b/app/faq/FAQContent.tsx
@@ -198,7 +198,9 @@ export default function FAQContent() {
       {/* FAQ Questions */}
       <section className="py-12 md:py-16">
         <div className="container mx-auto px-4">
-          <div className="max-w-3xl mx-auto space-y-4">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="sr-only">Liste des questions fréquentes</h2>
+            <div className="space-y-4">
             {filteredFAQs.length === 0 ? (
               <div className="bg-white rounded-2xl shadow-sm p-12 text-center">
                 <div className="w-16 h-16 bg-[#2d4a3e]/10 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -255,6 +257,7 @@ export default function FAQContent() {
                 </div>
               ))
             )}
+            </div>
           </div>
         </div>
       </section>
diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx
index 67b8280..ed9d926 100644
--- a/app/forgot-password/page.tsx
+++ b/app/forgot-password/page.tsx
@@ -104,6 +104,8 @@ export default function ForgotPasswordPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire de réinitialisation</h2>
 
             {/* Error Message */}
             {error && (
diff --git a/app/jeux/page.tsx b/app/jeux/page.tsx
index bb25208..9840afe 100644
--- a/app/jeux/page.tsx
+++ b/app/jeux/page.tsx
@@ -158,7 +158,7 @@ export default function JeuxPage() {
                         </Link>
                       </div>
                     )}
-                    <p className="mt-2 text-sm text-beige-600 text-center">
+                    <p className="mt-2 text-sm text-gray-700 text-center">
                       Format: TTP2025ABC (10 caractères)
                     </p>
                   </div>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 0d8bb4a..d817c46 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -110,6 +110,8 @@ export default function LoginPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire de connexion</h2>
 
             {/* Login Form */}
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
diff --git a/app/profil/page.tsx b/app/profil/page.tsx
index 9883546..2f3097f 100644
--- a/app/profil/page.tsx
+++ b/app/profil/page.tsx
@@ -128,35 +128,35 @@ export default function ProfilePage() {
                 {!isEditing ? (
                   <div className="space-y-4">
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Prénom
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.firstName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Nom
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.lastName}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Email
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">{user.email}</p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Téléphone
-                      </label>
+                      </span>
                       <p className="text-lg text-gray-800">
                         {user.phone || "Non renseigné"}
                       </p>
                     </div>
                     <div>
-                      <label className="text-sm font-medium text-gray-600">
+                      <span className="text-sm font-medium text-gray-700 block">
                         Rôle
-                      </label>
+                      </span>
                       <div className="mt-1">
                         <Badge variant={getRoleBadgeVariant(user.role)}>
                           {getRoleLabel(user.role)}
@@ -242,9 +242,9 @@ export default function ProfilePage() {
             </div>
             <div className="p-6 space-y-4">
               <div>
-                <label className="text-sm font-medium text-gray-600">
+                <span className="text-sm font-medium text-gray-700 block">
                   Membre depuis
-                </label>
+                </span>
                 <p className="text-sm text-gray-800 mt-1">
                   {formatDate(user.createdAt)}
                 </p>
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 73463f1..eaa6479 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -129,6 +129,8 @@ export default function RegisterPage() {
 
           {/* Form Container */}
           <div className="p-8">
+            {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+            <h2 className="sr-only">Formulaire d'inscription</h2>
 
             {/* Registration Form */}
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
diff --git a/components/Footer.tsx b/components/Footer.tsx
index fd13cba..15f8ac5 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -41,6 +41,8 @@ export default function Footer() {
 
   return (
     <footer className="bg-gradient-to-br from-beige-100 via-beige-50 to-beige-100 text-beige-800 border-t-2 border-beige-300">
+      {/* Hidden h2 for accessibility - maintains heading hierarchy */}
+      <h2 className="sr-only">Pied de page</h2>
       {/* Main Footer */}
       <div className="container mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
diff --git a/components/ui/StatusBadge.tsx b/components/ui/StatusBadge.tsx
index 4f5e90f..e7c299f 100644
--- a/components/ui/StatusBadge.tsx
+++ b/components/ui/StatusBadge.tsx
@@ -16,24 +16,24 @@ interface StatusBadgeProps {
 }
 
 const roleColors: Record<string, string> = {
-  ADMIN: 'bg-red-100 text-red-800',
-  EMPLOYEE: 'bg-blue-100 text-blue-800',
-  CLIENT: 'bg-green-100 text-green-800',
+  ADMIN: 'bg-red-100 text-red-900',
+  EMPLOYEE: 'bg-blue-100 text-blue-900',
+  CLIENT: 'bg-green-100 text-green-900',
 };
 
 const ticketColors: Record<string, string> = {
-  AVAILABLE: 'bg-gray-100 text-gray-800',
-  CLAIMED: 'bg-green-100 text-green-800',
-  PENDING: 'bg-yellow-100 text-yellow-800',
-  EXPIRED: 'bg-red-100 text-red-800',
-  REJECTED: 'bg-red-100 text-red-800',
+  AVAILABLE: 'bg-gray-100 text-gray-900',
+  CLAIMED: 'bg-green-100 text-green-900',
+  PENDING: 'bg-yellow-100 text-yellow-900',
+  EXPIRED: 'bg-red-100 text-red-900',
+  REJECTED: 'bg-red-100 text-red-900',
 };
 
 const statusColors: Record<string, string> = {
-  active: 'bg-green-100 text-green-800',
-  inactive: 'bg-gray-100 text-gray-800',
-  verified: 'bg-green-100 text-green-800',
-  unverified: 'bg-yellow-100 text-yellow-800',
+  active: 'bg-green-100 text-green-900',
+  inactive: 'bg-gray-100 text-gray-900',
+  verified: 'bg-green-100 text-green-900',
+  unverified: 'bg-yellow-100 text-yellow-900',
 };
 
 const roleLabels: Record<string, string> = {
@@ -74,7 +74,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
   className,
   showIcon = false,
 }) => {
-  let colorClass = 'bg-gray-100 text-gray-800';
+  let colorClass = 'bg-gray-100 text-gray-900';
   let label = value;
   let icon: React.ReactNode = null;
 
@@ -115,15 +115,15 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
 
 // Utility functions for getting colors (for backward compatibility)
 export const getRoleBadgeColor = (role: RoleType): string => {
-  return roleColors[role] || 'bg-gray-100 text-gray-800';
+  return roleColors[role] || 'bg-gray-100 text-gray-900';
 };
 
 export const getTicketStatusColor = (status: TicketStatusType): string => {
-  return ticketColors[status] || 'bg-gray-100 text-gray-800';
+  return ticketColors[status] || 'bg-gray-100 text-gray-900';
 };
 
 export const getStatusColor = (status: StatusType): string => {
-  return statusColors[status] || 'bg-gray-100 text-gray-800';
+  return statusColors[status] || 'bg-gray-100 text-gray-900';
 };
 
 export default StatusBadge;
diff --git a/components/ui/TicketTableRow.tsx b/components/ui/TicketTableRow.tsx
index 588ea1b..5101e90 100644
--- a/components/ui/TicketTableRow.tsx
+++ b/components/ui/TicketTableRow.tsx
@@ -29,7 +29,7 @@ export const TicketTableRow: React.FC<TicketTableRowProps> = ({
       <td className="px-6 py-4 whitespace-nowrap">
         <StatusBadge type="ticket" value={ticket.status} />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
+      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
         {ticket.playedAt
           ? new Date(ticket.playedAt).toLocaleDateString("fr-FR", showClaimedDate ? {
               day: 'numeric',
@@ -41,7 +41,7 @@ export const TicketTableRow: React.FC<TicketTableRowProps> = ({
           : "-"}
       </td>
       {showClaimedDate && (
-        <td className="px-6 py-4 whitespace-nowrap text-sm text-[#8a8a7a]">
+        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
           {ticket.claimedAt
             ? new Date(ticket.claimedAt).toLocaleDateString("fr-FR", {
                 day: 'numeric',