wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: amélioration accessibilité WAVE - corrections multiples

Browse Source 
- 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>
This commit is contained in:
soufiane 2025-12-08 15:06:30 +01:00
parent 54a15d392c
commit 618b689091
9 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/faq/FAQContent.tsx
View File

@ -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>

2
app/forgot-password/page.tsx
View File

@ -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 && (

2
app/jeux/page.tsx
View File

@ -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>

2
app/login/page.tsx
View File

@ -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">

24
app/profil/page.tsx
View File

@ -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>

2
app/register/page.tsx
View File

@ -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">

2
components/Footer.tsx
View File

@ -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">

32
components/ui/StatusBadge.tsx
View File

@ -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;

4
components/ui/TicketTableRow.tsx
View File

@ -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',