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

{{/*
  Gitea a11y fix: 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

  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>

<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');
  }
}
</script>
{{template "base/footer" .}}