Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 19 Wiki Activity

Enhance accessibility and improve form semantics across multiple pages
Build & Push Docker Image / build (push) Successful in 4m4s
Details

Browse Source 
- Added `htmlFor` attributes to labels for better accessibility in Calendar, Dashboard, GuestJoin, Login, Register, RoomDetail, and Settings pages.
- Included `aria-hidden` attributes for icons to improve screen reader experience.
- Set `autoComplete` attributes for input fields to enhance user experience during form filling.
- Implemented `role` and `aria` attributes for radio groups and buttons to improve accessibility compliance.
This commit is contained in:
Michelle
2026-05-28 10:07:19 +02:00
parent cff5398ebd
commit 7f48685717
18 changed files with 288 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Register.jsx
+20 -10
View File
@@ -104,11 +104,13 @@ export default function Register() {
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
<label htmlFor="register-username" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.username')}</label>
<div className="relative">
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
<input
id="register-username"
type="text"
autoComplete="username"
value={username}
onChange={e => setUsername(e.target.value)}
className="input-field pl-11"
@@ -120,11 +122,13 @@ export default function Register() {
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
<label htmlFor="register-display-name" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.displayName')}</label>
<div className="relative">
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
<input
id="register-display-name"
type="text"
autoComplete="name"
value={displayName}
onChange={e => setDisplayName(e.target.value)}
className="input-field pl-11"
@@ -135,11 +139,13 @@ export default function Register() {
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
<label htmlFor="register-email" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
<div className="relative">
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
<input
id="register-email"
type="email"
autoComplete="email"
value={email}
onChange={e => setEmail(e.target.value)}
className="input-field pl-11"
@@ -150,11 +156,13 @@ export default function Register() {
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
<label htmlFor="register-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
<div className="relative">
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
<input
id="register-password"
type="password"
autoComplete="new-password"
value={password}
onChange={e => setPassword(e.target.value)}
className="input-field pl-11"
@@ -166,11 +174,13 @@ export default function Register() {
</div>
<div>
<label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
<label htmlFor="register-confirm-password" className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
<div className="relative">
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
<Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" aria-hidden="true" />
<input
id="register-confirm-password"
type="password"
autoComplete="new-password"
value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)}
className="input-field pl-11"