timmy-config/deploy/gitea-a11y/custom/templates/user/auth/signin_inner.tmpl

{{/*
  Gitea a11y fix: V6 — Heading hierarchy + R1 — Password visibility toggle + R2 — aria-required

  Override of user/auth/signin_inner.tmpl
  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
*/}}

<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() {
    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>