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

fix(a11y): corriger accessibilité pages login et register

Browse Source 
- Améliorer le contraste des labels (text-gray-700 → text-gray-900)
- Ajouter aria-label sur les boutons show/hide password
- Ajouter aria-hidden sur les icônes SVG décoratives
- Ajouter sr-only pour les champs obligatoires

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-12-07 17:02:56 +01:00
parent 6b03ad8053
commit 788b2a17e7
2 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/login/page.tsx
View File

@ -116,8 +116,9 @@ export default function LoginPage() {
{/* 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"
@ -133,8 +134,9 @@ export default function LoginPage() {
{/* Password */} {/* 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">
Mot de passe <span className="text-red-500">*</span> 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
@ -148,13 +150,14 @@ export default function LoginPage() {
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>

41
app/register/page.tsx
View File

@ -136,8 +136,9 @@ export default function RegisterPage() {
{/* Prénom et Nom */} {/* Prénom et Nom */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label htmlFor="firstName" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="firstName" className="block text-sm font-semibold text-gray-900 mb-2">
Prénom <span className="text-red-500">*</span> Prénom <span className="text-red-500" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="firstName" id="firstName"
@ -152,8 +153,9 @@ export default function RegisterPage() {
</div> </div>
<div> <div>
<label htmlFor="lastName" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="lastName" className="block text-sm font-semibold text-gray-900 mb-2">
Nom <span className="text-red-500">*</span> Nom <span className="text-red-500" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label> </label>
<input <input
id="lastName" id="lastName"
@ -170,8 +172,9 @@ export default function RegisterPage() {
{/* 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>
<div className="relative"> <div className="relative">
<input <input
@ -224,8 +227,8 @@ export default function RegisterPage() {
{/* Téléphone */} {/* Téléphone */}
<div> <div>
<label htmlFor="phone" className="block text-sm font-semibold text-gray-700 mb-2"> <label htmlFor="phone" className="block text-sm font-semibold text-gray-900 mb-2">
Téléphone Téléphone <span className="sr-only">(optionnel)</span>
</label> </label>
<input <input
id="phone" id="phone"
@ -242,8 +245,9 @@ export default function RegisterPage() {
{/* Mot de passe */} {/* Mot de passe */}
<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">
Mot de passe <span className="text-red-500">*</span> 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
@ -257,20 +261,21 @@ export default function RegisterPage() {
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>
)} )}
</button> </button>
</div> </div>
<p className="mt-1 text-xs text-gray-500">Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre</p> <p className="mt-1 text-xs text-gray-600">Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre</p>
{errors.password && ( {errors.password && (
<p className="mt-1 text-sm text-red-500">{errors.password.message}</p> <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
)} )}
@ -278,8 +283,9 @@ export default function RegisterPage() {
{/* Confirmer mot de passe */} {/* Confirmer mot de passe */}
<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>
<div className="relative"> <div className="relative">
<input <input
@ -293,13 +299,14 @@ export default function RegisterPage() {
type="button" type="button"
onClick={() => setShowConfirmPassword(!showConfirmPassword)} onClick={() => setShowConfirmPassword(!showConfirmPassword)}
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={showConfirmPassword ? "Masquer la confirmation du mot de passe" : "Afficher la confirmation du mot de passe"}
> >
{showConfirmPassword ? ( {showConfirmPassword ? (
<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>