From 78eb95ab19c64210c00b15eaf85551d188613173 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Nov 2026 15:30:59 +0000 Subject: [PATCH] fix: enable more djlint rules and improve keyboard navigation (#40081) Enable djlint's [H018](https://djlint.com/docs/linter/#h018), [H046](https://djlint.com/docs/linter/#h046) and [H054](https://djlint.com/docs/linter/#h054) rules, fix their findings and the keyboard navigation problems around them. H054 found links nested in ` + {{if and (not .IsViewFile) (not $isTreePathRoot)}} - + {{end}} {{end}} diff --git a/templates/shared/user/block_user_dialog.tmpl b/templates/shared/user/block_user_dialog.tmpl index 41b5dbdcdfc..3c5d5450705 100644 --- a/templates/shared/user/block_user_dialog.tmpl +++ b/templates/shared/user/block_user_dialog.tmpl @@ -3,8 +3,8 @@
{{ctx.Locale.Tr "user.block.info"}} {{ctx.Locale.Tr "user.block.info.docs"}}
- - + +
diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index 5fbfdc79217..ae49d9c2725 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -14,22 +14,19 @@
- +
{{if or (not .DisablePassword) .LinkAccountMode}}
-
- - {{ctx.Locale.Tr "auth.forgot_password"}} -
- + +
{{end}} {{if not .LinkAccountMode}}
- +
{{end}} @@ -37,7 +34,7 @@ {{template "user/auth/captcha" .}}
-
+ {{if or (not .DisablePassword) .LinkAccountMode}} +
+ {{ctx.Locale.Tr "auth.forgot_password"}} +
+ {{end}}
{{end}}{{/*end if .EnablePasswordSignInForm*/}} {{$showExternalAuthMethods := or .OAuth2Providers .EnableOpenIDSignIn .EnableSSPI}} @@ -59,14 +61,18 @@ {{if or .EnablePasskeyAuth .ShowRegistrationButton}}
-
+
{{if .EnablePasskeyAuth}} - {{template "user/auth/webauthn_error" .}} - + {{end}} {{if .ShowRegistrationButton}} -
+
{{ctx.Locale.Tr "auth.need_account"}} {{ctx.Locale.Tr "auth.sign_up_now"}}
diff --git a/tests/e2e/login.test.ts b/tests/e2e/login.test.ts index 7f4b97f2ecc..56047fce7c6 100644 --- a/tests/e2e/login.test.ts +++ b/tests/e2e/login.test.ts @@ -7,11 +7,21 @@ test('homepage', async ({page}) => { await expect(page.getByRole('img', {name: 'Logo'})).toHaveAttribute('src', '/assets/img/logo.svg'); }); -test('login form and logout', async ({page}) => { +test('login form in tab order and logout', async ({page}) => { await page.goto('/user/login'); await page.getByLabel('Username or Email Address').fill(env.GITEA_TEST_E2E_USER); - await page.getByLabel('Password').fill(env.GITEA_TEST_E2E_PASSWORD); - await page.getByRole('button', {name: 'Sign In'}).click(); + await page.keyboard.press('Tab'); + const password = page.getByLabel('Password'); + await expect(password).toBeFocused(); + await password.fill(env.GITEA_TEST_E2E_PASSWORD); + await page.keyboard.press('Tab'); + await expect(page.getByLabel('Remember This Device')).toBeFocused(); + await page.keyboard.press('Tab'); + const signIn = page.getByRole('button', {name: 'Sign In', exact: true}); + await expect(signIn).toBeFocused(); + await page.keyboard.press('Tab'); + await expect(page.getByRole('link', {name: 'Forgot password?'})).toBeFocused(); + await signIn.click(); await expect(page.getByRole('link', {name: 'Sign In'})).toBeHidden(); await logout(page); }); diff --git a/tests/e2e/webauthn.test.ts b/tests/e2e/webauthn.test.ts index 9816a4a0048..3c04f824ce1 100644 --- a/tests/e2e/webauthn.test.ts +++ b/tests/e2e/webauthn.test.ts @@ -15,7 +15,7 @@ async function signInWithPassword(page: Page, username: string) { await page.goto('/user/login'); await page.getByLabel('Username or Email Address').fill(username); await page.getByLabel('Password').fill(testUserPassword); - await page.getByRole('button', {name: 'Sign In'}).click(); + await page.getByRole('button', {name: 'Sign In', exact: true}).click(); } // regression: credProtect level 3 hid the credential from the second-factor login diff --git a/web_src/css/base.css b/web_src/css/base.css index ed8e1250ddb..b13b918083a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -331,11 +331,21 @@ a.suppressed:hover { a:focus-visible, button:focus-visible, .ui.button:focus-visible, +.ui.dropdown:not(.selection):focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--color-primary); +} + +button:focus-visible, +.ui.button:focus-visible { outline-offset: -2px; } +.ui:is(.primary, .red, .green).button:focus-visible, +.ui:is(.primary, .red, .green).buttons .button:focus-visible { + outline-color: var(--color-text-dark); +} + a.silenced:hover { text-decoration-line: none; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index b3f728e5570..95608cb4bbb 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -30,6 +30,10 @@ Gitea's private styles use `g-` prefix. .interact-bg:hover { background: var(--color-hover) !important; } .interact-bg:active { background: var(--color-active) !important; } +/* sometimes, we'd like to make "