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

Compare commits

base: wkadmin:96622b9c4c07c7f074cc1059a0a03305a76e1209
Branches Tags
wkadmin:main
wkadmin:preprod
wkadmin:dev
...
compare: wkadmin:c2a236b406491dabeddbd99e17816e075d57e064
Branches Tags
wkadmin:preprod
wkadmin:dev
wkadmin:main

2 Commits
96622b9c4c ... c2a236b406

Author SHA1 Message Date
soufiane
c2a236b406 Merge dev into preprod: WAVE accessibility fixes 2025-12-06 00:29:07 +01:00
soufiane
866911cbd4 fix(a11y): correct WAVE accessibility audit issues 
- 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>
 2025-12-06 00:20:37 +01:00
4 changed files with 61 additions and 50 deletions
Show Stats Expand all files Collapse all files

15
app/contact/page.tsx
View File

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

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

39
components/Footer.tsx
View File

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

50
components/ProfilePage.tsx
View File

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