From dc6e7ee4a89327c3ea129da10b33a0e0ec01a06d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 24 Jul 2026 02:50:25 +0000
Subject: [PATCH] feat: Add accessible password visibility toggle to login

Added a toggle button to the password input in `frontend/login.html`
using Bootstrap 5 `input-group`. Included JavaScript logic in
`frontend/login.js` to dynamically update the input type, FontAwesome
icon, and `aria-label` attribute on click, improving accessibility for
screen reader users. Updated `.jules/palette.md` with relevant learning.

Co-authored-by: shadowcoder8 <185462083+shadowcoder8@users.noreply.github.com>
---
 .jules/palette.md   |  6 ++++++
 frontend/login.html |  7 ++++++-
 frontend/login.js   | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index a88203d..ec8db4c 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -9,3 +9,9 @@
 **Learning:** The application's HTML forms heavily rely on `placeholder` attributes instead of visible `<label>` tags. To ensure accessibility for screen readers without breaking the existing layout or visual design, it is critical to add explicit `aria-label` attributes to all non-hidden input, select, and textarea elements.
 
 **Action:** Added `aria-label` attributes corresponding to the placeholder or intended function for all `input` (excluding `type="hidden"`) and `select` elements across the main management forms (`labor-management.html`, `inventory-management.html`, and `payment-management.html`).
+
+## 2024-07-24 - Dynamic ARIA Labels for Stateful Icon-Only Buttons
+
+**Learning:** When using stateful icon-only buttons (like a password visibility toggle), relying solely on visual icon changes leaves screen reader users unaware of the state change. The `aria-label` must be dynamically updated via JavaScript (e.g., "Show password" to "Hide password") to ensure the accessibility tree remains accurate.
+
+**Action:** Added a password visibility toggle to the login form and included JavaScript logic to dynamically update both the FontAwesome icon and the `aria-label` attribute on click, ensuring an accessible experience for screen reader users.
diff --git a/frontend/login.html b/frontend/login.html
index 4aab7bc..e66cdb8 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -68,7 +68,12 @@ <h2 class="text-center mb-4 font-weight-bold" style="color: var(--text-main);">A
                             </div>
                             <div class="mb-4">
                                 <label for="password" class="form-label fw-bold" style="color: var(--text-muted);">Password</label>
-                                <input type="password" id="password" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
+                                <div class="input-group">
+                                    <input type="password" id="password" class="form-control" style="border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
+                                    <button class="btn btn-outline-secondary" type="button" id="toggle-password" aria-label="Show password" style="border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); display: flex; align-items: center;">
+                                        <i class="fas fa-eye" id="toggle-password-icon"></i>
+                                    </button>
+                                </div>
                             </div>
                             <button type="submit" class="btn btn-primary w-100 py-2" style="border-radius: var(--radius-md); font-weight: 600;">Sign In</button>
                         </form>
diff --git a/frontend/login.js b/frontend/login.js
index 133271b..a0037a5 100644
--- a/frontend/login.js
+++ b/frontend/login.js
@@ -1,3 +1,20 @@
+document.getElementById("toggle-password").addEventListener("click", function() {
+    const passwordInput = document.getElementById("password");
+    const icon = document.getElementById("toggle-password-icon");
+
+    if (passwordInput.type === "password") {
+        passwordInput.type = "text";
+        icon.classList.remove("fa-eye");
+        icon.classList.add("fa-eye-slash");
+        this.setAttribute("aria-label", "Hide password");
+    } else {
+        passwordInput.type = "password";
+        icon.classList.remove("fa-eye-slash");
+        icon.classList.add("fa-eye");
+        this.setAttribute("aria-label", "Show password");
+    }
+});
+
 document.getElementById("login-form").addEventListener("submit", (e) => {
     e.preventDefault();