Compare commits

...

1 Commits

Author SHA1 Message Date
STEP35 Burn Agent
1bf7c07137 fix(a11y): V6 — change login heading from <h4> to <h1>
Some checks failed
Architecture Lint / Linter Tests (pull_request) Successful in 28s
Smoke Test / smoke (pull_request) Failing after 26s
Validate Config / YAML Lint (pull_request) Failing after 16s
Validate Config / JSON Validate (pull_request) Successful in 22s
Validate Config / Python Syntax & Import Check (pull_request) Failing after 1m2s
Validate Config / Python Test Suite (pull_request) Has been skipped
Validate Config / Cron Syntax Check (pull_request) Successful in 13s
Validate Config / Shell Script Lint (pull_request) Failing after 1m5s
Validate Config / Deploy Script Dry Run (pull_request) Successful in 14s
Validate Config / Playbook Schema Validation (pull_request) Successful in 25s
Architecture Lint / Lint Repository (pull_request) Failing after 26s
PR Checklist / pr-checklist (pull_request) Successful in 5m11s
The sign-in page heading was `<h4>` breaking heading hierarchy
(WCAG 1.3.1). Override `user/auth/signin_inner.tmpl` with corrected
inner template:
- Change heading to `<h1>` for proper rank
- Fix template structure: remove extraneous base/head/footer includes
- Use proper context variable `ctx.Locale` instead of `.locale`
- Preserve R1 (password visibility) and R2 (aria-required) improvements

Closes #550
2026-04-30 01:02:58 -04:00

View File

@@ -1,96 +1,93 @@
{{/*
Gitea a11y fix: R1 — Password visibility toggle + R2 — aria-required
Gitea a11y fix: V6 — Heading hierarchy + R1 — Password visibility toggle + R2 — aria-required
Override of user/auth/signin_inner.tmpl
Adds:
- Eye icon toggle to show/hide password content
- aria-required="true" on required fields
- Proper label associations
Changes:
- V6: Heading changed from <h4> to <h1> for proper hierarchy (WCAG 1.3.1)
- R2: Add aria-required="true" to required fields (username, password)
- R1: Add eye-icon toggle to show/hide password
Deploy to: custom/templates/user/auth/signin_inner.tmpl
*/}}
{{template "base/head" .}}
<div class="page-content container">
<div class="signin">
<h1>{{.locale.Tr "sign_in"}}</h1>
<form action="{{AppSubUrl}}/user/login" method="post">
{{.CsrfTokenHtml}}
{{/* a11y R2: aria-required on username field */}}
<div class="field">
<label for="user_name">{{.locale.Tr "username"}}</label>
<input
id="user_name"
name="user_name"
type="text"
value="{{.user_name}}"
autofocus
required
aria-required="true"
autocomplete="username"
placeholder="{{.locale.Tr "username"}}"
/>
</div>
{{/* a11y R1: Password field with visibility toggle */}}
<div class="field" style="position:relative">
<label for="password">{{.locale.Tr "password"}}</label>
<div style="display:flex;align-items:center;position:relative">
<input
id="password"
name="password"
type="password"
required
aria-required="true"
autocomplete="current-password"
placeholder="{{.locale.Tr "password"}}"
style="flex:1;padding-right:36px"
/>
<button
type="button"
id="toggle-password"
aria-label="Show password"
title="Show password"
style="position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:16px"
onclick="togglePasswordVisibility()"
>👁</button>
</div>
</div>
<div class="field">
<button type="submit" class="ui green button">
{{.locale.Tr "sign_in"}}
</button>
</div>
{{if .EnableOAuth2}}
<div class="ui divider"></div>
<div class="field">
<a href="{{AppSubUrl}}/user/oauth2" class="ui basic button">
{{.locale.Tr "sign_in_with_provider"}}
</a>
</div>
{{end}}
</form>
</div>
<div class="ui container fluid">
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}}
{{template "base/alert" .}}
{{end}}
<h1 class="ui top attached header center">
{{if .LinkAccountMode}}
{{ctx.Locale.Tr "auth.oauth_signin_title"}}
{{else}}
{{ctx.Locale.Tr "auth.login_userpass"}}
{{end}}
</h1>
<div class="ui attached segment">
{{if .EnablePasswordSignInForm}}
<form class="ui form" action="{{.SignInLink}}" method="post">
{{.CsrfTokenHtml}}
<div class="required field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required aria-required="true" tabindex="1">
</div>
{{if or (not .DisablePassword) .LinkAccountMode}}
<div class="required field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
<div class="tw-flex tw-mb-1">
<label for="password" class="tw-flex-1">{{ctx.Locale.Tr "password"}}</label>
<a href="{{AppSubUrl}}/user/forgot_password" tabindex="4">{{ctx.Locale.Tr "auth.forgot_password"}}</a>
</div>
<div style="position:relative">
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required aria-required="true" tabindex="2" style="padding-right:36px">
<button
type="button"
id="toggle-password"
aria-label="{{ctx.Locale.Tr \"auth.show_password\"}}"
title="{{ctx.Locale.Tr \"auth.show_password\"}}"
style="position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:16px"
onclick="togglePasswordVisibility()"
>👁</button>
</div>
</div>
{{end}}
<div class="field">
<button type="submit" class="ui green button">
{{ctx.Locale.Tr "auth.sign_in"}}
</button>
</div>
{{if not .LinkAccountMode}}
<div class="field">
<a href="{{.RegisterLink}}">{{ctx.Locale.Tr "auth.need_account"}}</a>
</div>
{{end}}
{{if and (not .DisablePublicRegistry) .LinkAccountMode}}
<div class="field tw-mt-4">
{{ctx.Locale.Tr "auth.or"}}
</div>
<div class="field">
<a class="ui button" href="{{.RegisterLink}}">
{{ctx.Locale.Tr "auth.create_account"}}
</a>
</div>
{{end}}
</form>
{{end}}
</div>
</div>
{{/* a11y R1: password visibility toggle */}}
<script>
function togglePasswordVisibility() {
const input = document.getElementById('password');
const btn = document.getElementById('toggle-password');
if (input.type === 'password') {
input.type = 'text';
btn.textContent = '🙈';
btn.setAttribute('aria-label', 'Hide password');
btn.setAttribute('title', 'Hide password');
} else {
input.type = 'password';
btn.textContent = '👁';
btn.setAttribute('aria-label', 'Show password');
btn.setAttribute('title', 'Show password');
}
var pwd = document.getElementById('password');
var btn = document.getElementById('toggle-password');
if (pwd.type === 'password') {
pwd.type = 'text';
btn.textContent = '🙈';
btn.setAttribute('aria-label', '{{ctx.Locale.Tr "auth.hide_password"}}');
btn.setAttribute('title', '{{ctx.Locale.Tr "auth.hide_password"}}');
} else {
pwd.type = 'password';
btn.textContent = '👁';
btn.setAttribute('aria-label', '{{ctx.Locale.Tr "auth.show_password"}}');
btn.setAttribute('title', '{{ctx.Locale.Tr "auth.show_password"}}');
}
}
</script>
{{template "base/footer" .}}
</script>