Merge PR #560: deploy/gitea-a11y/custom/templates/user/auth/signin_inner.tmpl (added)

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

@@ -0,0 +1,96 @@
+{{/*
+  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" .}}