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

fix: accessibility improvements for contact, cookies, faq, forgot-password, reset-password pages

Browse Source 
- Fix contrast issues (text-primary-300 -> text-primary-600, text-gray-500 -> text-gray-700)
- Add form labels for search input and cookie toggles
- Fix heading hierarchy (h1 -> h2 -> h3)
- Add aria-label and sr-only for accessibility

🤖 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-07 17:23:08 +01:00
parent 788b2a17e7
commit 6f1b04364b
5 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/contact/page.tsx
View File

@ -96,8 +96,9 @@ export default function ContactPage() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{/* 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-900 mb-2">
Nom complet <span className="text-red-600" aria-hidden="true">*</span> Nom complet <span className="text-red-600" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="fullName" id="fullName"
@ -113,8 +114,9 @@ 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-900 mb-2">
Email <span className="text-red-600" aria-hidden="true">*</span> Email <span className="text-red-600" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="email" id="email"
@ -130,8 +132,9 @@ 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-900 mb-2">
Sujet <span className="text-red-600" aria-hidden="true">*</span> Sujet <span className="text-red-600" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<select <select
id="subject" id="subject"
@ -152,8 +155,9 @@ 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-900 mb-2">
Message <span className="text-red-600" aria-hidden="true">*</span> Message <span className="text-red-600" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<textarea <textarea
id="message" id="message"

20
app/cookies/page.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState } from "react"; import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"; import { Card, CardContent, CardHeader } from "@/components/ui/Card";
import Button from "@/components/Button"; import Button from "@/components/Button";
export default function CookiesPage() { export default function CookiesPage() {
@ -43,7 +43,7 @@ export default function CookiesPage() {
return ( return (
<div className="py-12"> <div className="py-12">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-8 text-center"> <h1 className="text-4xl md:text-5xl font-bold text-primary-600 mb-8 text-center">
Gestion des cookies Gestion des cookies
</h1> </h1>
@ -54,7 +54,7 @@ export default function CookiesPage() {
{/* Introduction */} {/* Introduction */}
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">Qu'est-ce qu'un cookie ?</CardTitle> <h2 className="text-xl font-semibold text-gray-900">Qu'est-ce qu'un cookie ?</h2>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<p className="text-gray-700"> <p className="text-gray-700">
@ -71,14 +71,14 @@ export default function CookiesPage() {
{/* Types de cookies */} {/* Types de cookies */}
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">Les cookies que nous utilisons</CardTitle> <h2 className="text-xl font-semibold text-gray-900">Les cookies que nous utilisons</h2>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Cookies essentiels */} {/* Cookies essentiels */}
<div className="border-l-4 border-primary-600 pl-4"> <div className="border-l-4 border-primary-600 pl-4">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="font-semibold text-gray-900">Cookies essentiels</h3> <h3 className="font-semibold text-gray-900">Cookies essentiels</h3>
<span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded"> <span className="text-sm text-gray-700 bg-gray-100 px-3 py-1 rounded">
Toujours actifs Toujours actifs
</span> </span>
</div> </div>
@ -106,7 +106,9 @@ export default function CookiesPage() {
checked={preferences.analytics} checked={preferences.analytics}
onChange={() => handleToggle('analytics')} onChange={() => handleToggle('analytics')}
className="sr-only peer" className="sr-only peer"
aria-label="Activer les cookies analytiques"
/> />
<span className="sr-only">Activer les cookies analytiques</span>
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div> <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
</label> </label>
</div> </div>
@ -135,7 +137,9 @@ export default function CookiesPage() {
checked={preferences.marketing} checked={preferences.marketing}
onChange={() => handleToggle('marketing')} onChange={() => handleToggle('marketing')}
className="sr-only peer" className="sr-only peer"
aria-label="Activer les cookies marketing"
/> />
<span className="sr-only">Activer les cookies marketing</span>
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div> <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
</label> </label>
</div> </div>
@ -191,7 +195,7 @@ export default function CookiesPage() {
{/* Gestion des cookies */} {/* Gestion des cookies */}
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">Comment gérer vos cookies ?</CardTitle> <h2 className="text-xl font-semibold text-gray-900">Comment gérer vos cookies ?</h2>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<p className="text-gray-700"> <p className="text-gray-700">
@ -253,7 +257,7 @@ export default function CookiesPage() {
{/* Informations complémentaires */} {/* Informations complémentaires */}
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">En savoir plus</CardTitle> <h2 className="text-xl font-semibold text-gray-900">En savoir plus</h2>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<p className="text-gray-700"> <p className="text-gray-700">
@ -285,7 +289,7 @@ export default function CookiesPage() {
{/* Contact */} {/* Contact */}
<Card className="mb-8"> <Card className="mb-8">
<CardHeader> <CardHeader>
<CardTitle className="text-xl">Contact</CardTitle> <h2 className="text-xl font-semibold text-gray-900">Contact</h2>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-gray-700"> <p className="text-gray-700">

9
app/faq/FAQContent.tsx
View File

@ -101,7 +101,7 @@ export default function FAQContent() {
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]"> <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-primary-300 mb-4"> <h1 className="text-4xl md:text-5xl font-bold text-primary-600 mb-4">
Questions fréquentes Questions fréquentes
</h1> </h1>
<p className="text-lg text-[#8a8a7a]"> <p className="text-lg text-[#8a8a7a]">
@ -116,7 +116,9 @@ export default function FAQContent() {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="relative"> <div className="relative">
<label htmlFor="faq-search" className="sr-only">Rechercher une question</label>
<input <input
id="faq-search"
type="text" type="text"
placeholder="Rechercher une question..." placeholder="Rechercher une question..."
value={searchQuery} value={searchQuery}
@ -128,6 +130,7 @@ export default function FAQContent() {
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
aria-hidden="true"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
@ -226,9 +229,9 @@ export default function FAQContent() {
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<a <a
href="mailto:support@thetiptop.com" href="mailto:support@thetiptop.com"
className="inline-flex items-center justify-center gap-2 bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300" className="inline-flex items-center justify-center gap-2 bg-white text-gray-900 hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
> >
✉️ support@thetiptop.com <span aria-hidden="true">✉️</span> support@thetiptop.com
</a> </a>
<Link <Link
href="/contact" href="/contact"

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

@ -117,8 +117,9 @@ export default function ForgotPasswordPage() {
{/* 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-900 mb-2">
Email <span className="text-red-500">*</span> Email <span className="text-red-500" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="email" id="email"

17
app/reset-password/page.tsx
View File

@ -132,8 +132,9 @@ function ResetPasswordForm() {
{/* New Password */} {/* New Password */}
<div> <div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="password" className="block text-sm font-semibold text-gray-900 mb-2">
Nouveau mot de passe <span className="text-red-500">*</span> Nouveau mot de passe <span className="text-red-500" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<div className="relative"> <div className="relative">
<input <input
@ -151,13 +152,14 @@ function ResetPasswordForm() {
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700" className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
aria-label={showPassword ? "Masquer le mot de passe" : "Afficher le mot de passe"}
> >
{showPassword ? ( {showPassword ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
</svg> </svg>
) : ( ) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg> </svg>
@ -168,8 +170,9 @@ function ResetPasswordForm() {
{/* Confirm Password */} {/* Confirm Password */}
<div> <div>
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Confirmer le mot de passe <span className="text-red-500">*</span> Confirmer le mot de passe <span className="text-red-500" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="confirmPassword" id="confirmPassword"
@ -186,7 +189,7 @@ function ResetPasswordForm() {
{/* Password Requirements */} {/* Password Requirements */}
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm font-semibold text-gray-700 mb-2">Le mot de passe doit contenir :</p> <p className="text-sm font-semibold text-gray-900 mb-2">Le mot de passe doit contenir :</p>
<ul className="text-sm text-gray-600 space-y-1"> <ul className="text-sm text-gray-600 space-y-1">
<li className={`flex items-center gap-2 ${password.length >= 8 ? 'text-green-600' : ''}`}> <li className={`flex items-center gap-2 ${password.length >= 8 ? 'text-green-600' : ''}`}>
{password.length >= 8 ? ( {password.length >= 8 ? (