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

fix: improve color contrast for WCAG accessibility compliance

Browse Source 
- Change required field asterisks from text-red-500 to text-red-700 font-bold
- Improve delete button contrast from bg-red-500 to bg-red-600
- Update helper text from text-gray-500 to text-gray-600

Fixes contrast errors reported by WAVE accessibility tool

🤖 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 16:15:07 +01:00
parent b41602b35c
commit d5fe670a2b
5 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@ export default function ForgotPasswordPage() {
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
Email <span className="text-red-500" aria-hidden="true">*</span>
Email <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<input

4
app/login/page.tsx
View File

@ -119,7 +119,7 @@ export default function LoginPage() {
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
Email <span className="text-red-500" aria-hidden="true">*</span>
Email <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<input
@ -137,7 +137,7 @@ export default function LoginPage() {
{/* Password */}
<div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-900 mb-2">
Mot de passe <span className="text-red-500" aria-hidden="true">*</span>
Mot de passe <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<div className="relative">

4
app/profil/page.tsx
View File

@ -172,7 +172,7 @@ export default function ProfilePage() {
</button>
<button
onClick={() => setShowDeleteModal(true)}
className="bg-red-500 hover:bg-red-600 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
className="bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
>
Supprimer mon compte
</button>
@ -325,7 +325,7 @@ export default function ProfilePage() {
<button
onClick={handleDeleteAccount}
disabled={isDeleting}
className="flex-1 bg-red-500 hover:bg-red-600 disabled:bg-red-300 text-white font-bold px-6 py-3 rounded-lg transition-all"
className="flex-1 bg-red-600 hover:bg-red-700 disabled:bg-red-300 text-white font-bold px-6 py-3 rounded-lg transition-all"
>
{isDeleting ? "Suppression..." : "Supprimer"}
</button>

14
app/register/page.tsx
View File

@ -139,7 +139,7 @@ export default function RegisterPage() {
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="firstName" className="block text-sm font-semibold text-gray-900 mb-2">
Prénom <span className="text-red-500" aria-hidden="true">*</span>
Prénom <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<input
@ -156,7 +156,7 @@ export default function RegisterPage() {
<div>
<label htmlFor="lastName" className="block text-sm font-semibold text-gray-900 mb-2">
Nom <span className="text-red-500" aria-hidden="true">*</span>
Nom <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<input
@ -175,7 +175,7 @@ export default function RegisterPage() {
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-900 mb-2">
Email <span className="text-red-500" aria-hidden="true">*</span>
Email <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<div className="relative">
@ -239,7 +239,7 @@ export default function RegisterPage() {
{...register("phone")}
className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent`}
/>
<p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
<p className="mt-1 text-xs text-gray-600">Optionnel - Format: 06 12 34 56 78</p>
{errors.phone && (
<p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
)}
@ -248,7 +248,7 @@ export default function RegisterPage() {
{/* Mot de passe */}
<div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-900 mb-2">
Mot de passe <span className="text-red-500" aria-hidden="true">*</span>
Mot de passe <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<div className="relative">
@ -286,7 +286,7 @@ export default function RegisterPage() {
{/* Confirmer mot de passe */}
<div>
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Confirmer le mot de passe <span className="text-red-500" aria-hidden="true">*</span>
Confirmer le mot de passe <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<div className="relative">
@ -337,7 +337,7 @@ export default function RegisterPage() {
<Link href="/privacy" className="text-beige-800 underline hover:text-primary-500">
politique de confidentialité
</Link>{' '}
<span className="text-red-500">*</span>
<span className="text-red-700 font-bold" aria-hidden="true">*</span>
</label>
</div>

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

@ -133,7 +133,7 @@ function ResetPasswordForm() {
{/* New Password */}
<div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-900 mb-2">
Nouveau mot de passe <span className="text-red-500" aria-hidden="true">*</span>
Nouveau mot de passe <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<div className="relative">
@ -171,7 +171,7 @@ function ResetPasswordForm() {
{/* Confirm Password */}
<div>
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-900 mb-2">
Confirmer le mot de passe <span className="text-red-500" aria-hidden="true">*</span>
Confirmer le mot de passe <span className="text-red-700 font-bold" aria-hidden="true">*</span>
<span className="sr-only">(obligatoire)</span>
</label>
<input