shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y: add aria-labels and aria-pressed/expanded to LoginScreen buttons

Browse Source
This commit is contained in:
Nicolas Varrot
2026-02-25 21:02:23 +00:00
parent a9fb646662
commit d49d118e26
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/LoginScreen.tsx
View File

@@ -107,6 +107,8 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
? 'border-[var(--pc-accent-dim)] bg-[var(--pc-accent-dim)]/10 text-pc-text' ? 'border-[var(--pc-accent-dim)] bg-[var(--pc-accent-dim)]/10 text-pc-text'
: 'border-pc-border bg-pc-elevated/30 text-pc-text-muted hover:bg-pc-elevated/50' : 'border-pc-border bg-pc-elevated/30 text-pc-text-muted hover:bg-pc-elevated/50'
}`} }`}
aria-label={t('login.authToken')}
aria-pressed={authMode === 'token'}
> >
<Key size={14} /> <Key size={14} />
{t('login.authToken')} {t('login.authToken')}
@@ -120,6 +122,8 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
? 'border-[var(--pc-accent-dim)] bg-[var(--pc-accent-dim)]/10 text-pc-text' ? 'border-[var(--pc-accent-dim)] bg-[var(--pc-accent-dim)]/10 text-pc-text'
: 'border-pc-border bg-pc-elevated/30 text-pc-text-muted hover:bg-pc-elevated/50' : 'border-pc-border bg-pc-elevated/30 text-pc-text-muted hover:bg-pc-elevated/50'
}`} }`}
aria-label={t('login.authPassword')}
aria-pressed={authMode === 'password'}
> >
<Lock size={14} /> <Lock size={14} />
{t('login.authPassword')} {t('login.authPassword')}
@@ -159,6 +163,8 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
type="button" type="button"
onClick={() => setShowAdvanced(!showAdvanced)} onClick={() => setShowAdvanced(!showAdvanced)}
className="flex items-center gap-1.5 text-xs text-pc-text-muted hover:text-pc-text transition-colors" className="flex items-center gap-1.5 text-xs text-pc-text-muted hover:text-pc-text transition-colors"
aria-expanded={showAdvanced}
aria-label={t('login.advanced')}
> >
<ChevronDown size={14} className={`transition-transform ${showAdvanced ? 'rotate-0' : '-rotate-90'}`} /> <ChevronDown size={14} className={`transition-transform ${showAdvanced ? 'rotate-0' : '-rotate-90'}`} />
{t('login.advanced')} {t('login.advanced')}
@@ -194,6 +200,7 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
type="submit" type="submit"
disabled={!isValidWsUrl || !token.trim() || isConnecting} disabled={!isValidWsUrl || !token.trim() || isConnecting}
className="w-full rounded-xl bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2" className="w-full rounded-xl bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
aria-label={isConnecting ? t('login.connecting') : t('login.connect')}
> >
{isConnecting ? ( {isConnecting ? (
<> <>