🎨 Palette: Add accessible password visibility toggle

.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.

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>

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