fix(a11y): add aria-live to password strength, role=meter to signal bar
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -110,7 +110,7 @@ export function PasswordStrengthMeter({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Score label */}
|
{/* Score label */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between" aria-live="polite" aria-atomic="true">
|
||||||
<span className={cn('text-xs font-medium', config.color)}>
|
<span className={cn('text-xs font-medium', config.color)}>
|
||||||
{config.label}
|
{config.label}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -46,6 +46,11 @@ export function SignalBar({ signal, label }: SignalBarProps) {
|
|||||||
<div
|
<div
|
||||||
className={cn('h-full rounded-full transition-all', barColor)}
|
className={cn('h-full rounded-full transition-all', barColor)}
|
||||||
style={{ width: `${pct}%` }}
|
style={{ width: `${pct}%` }}
|
||||||
|
role="meter"
|
||||||
|
aria-label={label || 'Signal strength'}
|
||||||
|
aria-valuenow={signal ?? 0}
|
||||||
|
aria-valuemin={-100}
|
||||||
|
aria-valuemax={0}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/* dBm value */}
|
{/* dBm value */}
|
||||||
|
|||||||
Reference in New Issue
Block a user