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

Merge dev into preprod: WAVE accessibility fixes

Browse Source
This commit is contained in:
soufiane 2025-12-06 00:29:07 +01:00
commit c2a236b406
4 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/contact/page.tsx
View File

@ -97,7 +97,7 @@ export default function ContactPage() {
{/* Nom complet */} {/* Nom complet */}
<div> <div>
<label htmlFor="fullName" className="block text-sm font-semibold text-gray-700 mb-2"> <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> </label>
<input <input
id="fullName" id="fullName"
@ -114,7 +114,7 @@ export default function ContactPage() {
{/* Email */} {/* Email */}
<div> <div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2"> <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> </label>
<input <input
id="email" id="email"
@ -131,7 +131,7 @@ export default function ContactPage() {
{/* Sujet */} {/* Sujet */}
<div> <div>
<label htmlFor="subject" className="block text-sm font-semibold text-gray-700 mb-2"> <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> </label>
<select <select
id="subject" id="subject"
@ -153,7 +153,7 @@ export default function ContactPage() {
{/* Message */} {/* Message */}
<div> <div>
<label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2"> <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> </label>
<textarea <textarea
id="message" id="message"
@ -183,7 +183,7 @@ export default function ContactPage() {
<Link href="/privacy" className="text-primary-500 underline hover:text-primary-600"> <Link href="/privacy" className="text-primary-500 underline hover:text-primary-600">
politique de confidentialité politique de confidentialité
</Link>{' '} </Link>{' '}
<span className="text-red-500">*</span> <span className="text-red-600" aria-hidden="true">*</span>
</label> </label>
</div> </div>
@ -291,9 +291,10 @@ export default function ContactPage() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 group" 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="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"></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> </a>
</div> </div>
<a <a

7
app/historique/page.tsx
View File

@ -163,12 +163,17 @@ export default function HistoriquePage() {
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<div className="flex-1"> <div className="flex-1">
<div className="relative"> <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 <input
id="search-tickets"
type="text" type="text"
placeholder="Rechercher par code ticket..." placeholder="Rechercher par code ticket..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} 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" 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> </div>

39
components/Footer.tsx
View File

@ -49,7 +49,7 @@ export default function Footer() {
<div className="mb-4"> <div className="mb-4">
<Logo variant="default" size="md" showText={true} /> <Logo variant="default" size="md" showText={true} />
</div> </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 Découvrez nos thés premium bio et artisanaux. Participez à notre grand
jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots ! jeu-concours 100% gagnant et tentez de remporter nos magnifiques lots !
</p> </p>
@ -58,7 +58,7 @@ export default function Footer() {
href="https://www.facebook.com/profile.php?id=61584261567579" href="https://www.facebook.com/profile.php?id=61584261567579"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" aria-label="Facebook"
> >
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <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/" href="https://www.instagram.com/thetiptopgr3/"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" aria-label="Instagram"
> >
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <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_/" href="https://www.pinterest.com/The_Tip_Top_/"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" aria-label="Pinterest"
> >
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
@ -99,7 +99,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href={ROUTES.HOME} 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 Accueil
</Link> </Link>
@ -107,7 +107,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href={isAuthenticated ? ROUTES.GAME : ROUTES.REGISTER} 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 Participer au jeu
</Link> </Link>
@ -115,7 +115,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/contact" 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 Contact
</Link> </Link>
@ -123,7 +123,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/faq" 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 FAQ
</Link> </Link>
@ -138,7 +138,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/terms" 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 Conditions d'utilisation
</Link> </Link>
@ -146,7 +146,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/privacy" 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é Politique de confidentialité
</Link> </Link>
@ -154,7 +154,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/rules" 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 Règlement du jeu
</Link> </Link>
@ -162,7 +162,7 @@ export default function Footer() {
<li> <li>
<Link <Link
href="/legal" 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 Mentions légales
</Link> </Link>
@ -173,16 +173,21 @@ export default function Footer() {
{/* Newsletter */} {/* Newsletter */}
<div> <div>
<h3 className="text-lg font-semibold text-primary-500 mb-4">NEWSLETTER</h3> <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 ! Inscrivez-vous pour recevoir nos offres exclusives et nouveautés !
</p> </p>
<form onSubmit={handleNewsletterSubmit} className="space-y-3"> <form onSubmit={handleNewsletterSubmit} className="space-y-3">
<div> <div>
<label htmlFor="newsletter-email" className="sr-only">
Adresse email pour la newsletter
</label>
<input <input
id="newsletter-email"
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="Votre email" 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" 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} disabled={isLoading}
/> />
@ -205,7 +210,7 @@ export default function Footer() {
)} )}
</form> </form>
<div className="mt-4 pt-4 border-t border-beige-300"> <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> <span>✉️</span>
<a <a
href="mailto:thetiptopgr3@gmail.com" href="mailto:thetiptopgr3@gmail.com"
@ -214,7 +219,7 @@ export default function Footer() {
thetiptopgr3@gmail.com thetiptopgr3@gmail.com
</a> </a>
</p> </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> <span>📞</span>
<a <a
href="tel:+33123456789" href="tel:+33123456789"
@ -232,8 +237,8 @@ export default function Footer() {
<div className="border-t border-beige-300"> <div className="border-t border-beige-300">
<div className="container mx-auto px-4 py-6"> <div className="container mx-auto px-4 py-6">
<div className="flex items-center justify-center text-sm"> <div className="flex items-center justify-center text-sm">
<p className="text-beige-600"> <p className="text-beige-700">
© {currentYear} Tous droits réservés. <span className="text-beige-500 text-xs">Site étudiant</span> © {currentYear} Tous droits réservés. <span className="text-beige-600 text-xs">Site étudiant</span>
</p> </p>
</div> </div>
</div> </div>

50
components/ProfilePage.tsx
View File

@ -109,40 +109,40 @@ export default function ProfilePage({
</div> </div>
<div className="p-6"> <div className="p-6">
{!isEditing ? ( {!isEditing ? (
<div className="space-y-4"> <dl className="space-y-4">
<div> <div>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Prénom Prénom
</label> </dt>
<p className="text-lg text-gray-900">{user.firstName}</p> <dd className="text-lg text-gray-900">{user.firstName}</dd>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Nom Nom
</label> </dt>
<p className="text-lg text-gray-900">{user.lastName}</p> <dd className="text-lg text-gray-900">{user.lastName}</dd>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Email Email
</label> </dt>
<p className="text-lg text-gray-900">{user.email}</p> <dd className="text-lg text-gray-900">{user.email}</dd>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Téléphone Téléphone
</label> </dt>
<p className="text-lg text-gray-900"> <dd className="text-lg text-gray-900">
{user.phone || "Non renseigné"} {user.phone || "Non renseigné"}
</p> </dd>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Rôle Rôle
</label> </dt>
<div className="mt-1"> <dd className="mt-1">
<Badge variant={badgeVariant}>{roleLabel}</Badge> <Badge variant={badgeVariant}>{roleLabel}</Badge>
</div> </dd>
</div> </div>
<div className="pt-4"> <div className="pt-4">
<button <button
@ -152,7 +152,7 @@ export default function ProfilePage({
Modifier mes informations Modifier mes informations
</button> </button>
</div> </div>
</div> </dl>
) : ( ) : (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<Input <Input
@ -216,14 +216,14 @@ export default function ProfilePage({
<h2 className="text-xl font-bold text-gray-900">Statut du compte</h2> <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
</div> </div>
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
<div> <dl>
<label className="text-sm font-medium text-gray-600"> <dt className="text-sm font-medium text-gray-700">
Membre depuis Membre depuis
</label> </dt>
<p className="text-sm text-gray-900 mt-1"> <dd className="text-sm text-gray-900 mt-1">
{formatDate(user.createdAt)} {formatDate(user.createdAt)}
</p> </dd>
</div> </dl>
</div> </div>
</div> </div>