fix(login): 포커스 링·type=button·disabled 대비 접근성 보완

- 이메일/비밀번호 input에 focus-visible:ring-2 추가
- Google 로그인 버튼에 type=\"button\" 명시
- disabled 상태 배경 jsm-line → jsm-ink-faint로 변경 (대비 개선)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 02:18:37 +09:00
parent cd1f67d076
commit 76994c28f1

View File

@@ -126,6 +126,7 @@ function LoginForm() {
{/* Google 로그인 */}
<button
type="button"
onClick={handleGoogleLogin}
className="w-full flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-lg text-sm font-medium mb-5"
style={{
@@ -200,7 +201,7 @@ function LoginForm() {
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none"
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
style={{
background: 'var(--jsm-surface)',
border: '1px solid var(--jsm-line)',
@@ -232,7 +233,7 @@ function LoginForm() {
onChange={(e) => setPassword(e.target.value)}
required
minLength={6}
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none"
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
style={{
background: 'var(--jsm-surface)',
border: '1px solid var(--jsm-line)',
@@ -253,8 +254,8 @@ function LoginForm() {
disabled={loading}
className="w-full py-2.5 rounded-lg text-sm font-semibold mt-1"
style={{
background: loading ? 'var(--jsm-line)' : 'var(--jsm-accent)',
color: loading ? 'var(--jsm-ink-soft)' : '#ffffff',
background: loading ? 'var(--jsm-ink-faint)' : 'var(--jsm-accent)',
color: loading ? '#ffffff' : '#ffffff',
border: 'none',
cursor: loading ? 'not-allowed' : 'pointer',
transition: 'background 0.15s, transform 0.15s',