⛓️💥 feat: More Accessible Login Page Links (#10997)

* feat: do not open login footer links in new tab

* feat: underline login links on hover for better accessibility

* feat: nicer visuals for links on hover and focus
This commit is contained in:
Dustin Healy 2025-12-16 14:28:25 -08:00 committed by GitHub
parent 8b5ef15071
commit a0df7e8df1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 6 deletions

View file

@ -11,9 +11,10 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
const privacyPolicyRender = privacyPolicy?.externalUrl && (
<a
className="text-sm text-green-600 dark:text-green-500"
className="text-sm text-green-600 underline decoration-transparent transition-all duration-200 hover:text-green-700 hover:decoration-green-700 focus:text-green-700 focus:decoration-green-700 dark:text-green-500 dark:hover:text-green-400 dark:hover:decoration-green-400 dark:focus:text-green-400 dark:focus:decoration-green-400"
href={privacyPolicy.externalUrl}
target={privacyPolicy.openNewTab ? '_blank' : undefined}
// Removed for WCAG compliance
// target={privacyPolicy.openNewTab ? '_blank' : undefined}
rel="noreferrer"
>
{localize('com_ui_privacy_policy')}
@ -22,9 +23,10 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
const termsOfServiceRender = termsOfService?.externalUrl && (
<a
className="text-sm text-green-600 dark:text-green-500"
className="text-sm text-green-600 underline decoration-transparent transition-all duration-200 hover:text-green-700 hover:decoration-green-700 focus:text-green-700 focus:decoration-green-700 dark:text-green-500 dark:hover:text-green-400 dark:hover:decoration-green-400 dark:focus:text-green-400 dark:focus:decoration-green-400"
href={termsOfService.externalUrl}
target={termsOfService.openNewTab ? '_blank' : undefined}
// Removed for WCAG compliance
// target={termsOfService.openNewTab ? '_blank' : undefined}
rel="noreferrer"
>
{localize('com_ui_terms_of_service')}

View file

@ -105,7 +105,7 @@ function Login() {
{localize('com_auth_no_account')}{' '}
<a
href={registerPage()}
className="inline-flex p-1 text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
className="inline-flex p-1 text-sm font-medium text-green-600 underline decoration-transparent transition-all duration-200 hover:text-green-700 hover:decoration-green-700 focus:text-green-700 focus:decoration-green-700 dark:text-green-500 dark:hover:text-green-400 dark:hover:decoration-green-400 dark:focus:text-green-400 dark:focus:decoration-green-400"
>
{localize('com_auth_sign_up')}
</a>

View file

@ -147,7 +147,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
{startupConfig.passwordResetEnabled && (
<a
href="/forgot-password"
className="inline-flex p-1 text-sm font-medium text-green-600 transition-colors hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
className="inline-flex p-1 text-sm font-medium text-green-600 underline decoration-transparent transition-all duration-200 hover:text-green-700 hover:decoration-green-700 focus:text-green-700 focus:decoration-green-700 dark:text-green-500 dark:hover:text-green-400 dark:hover:decoration-green-400 dark:focus:text-green-400 dark:focus:decoration-green-400"
>
{localize('com_auth_password_forgot')}
</a>