From 573f0e62cc9d1a1bb2319aa534d6f4b7c198e978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 26 Feb 2025 08:57:30 +0100
Subject: [PATCH] Use a button to show/hide password in the management area

When using a link, people using screen readers might think they're going
to a new page where the password is going to be shown. With a button,
they get a better idea about what to expect.

Furthermore, with a button, we can use the `aria-pressed` attribute to
indicate whether the password is currently being shown.
---
 app/assets/javascripts/managers.js                         | 5 ++---
 .../management/account/edit_password_manually.scss         | 4 ++++
 .../account/edit_password_manually_component.html.erb      | 4 ++--
 spec/system/management/account_spec.rb                     | 7 +++++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/managers.js b/app/assets/javascripts/managers.js
index 78774bb29..2926c8e0a 100644
--- a/app/assets/javascripts/managers.js
+++ b/app/assets/javascripts/managers.js
@@ -39,14 +39,13 @@
         e.stopPropagation();
         $("#user_password").val(App.Managers.generatePassword());
       });
-      $(".show-password").on("click", function(e) {
-        e.preventDefault();
-        e.stopPropagation();
+      $(".show-password").on("click", function() {
         if ($("#user_password").is("input[type='password']")) {
           App.Managers.togglePassword("text");
         } else {
           App.Managers.togglePassword("password");
         }
+        $(this).attr("aria-pressed", !JSON.parse($(this).attr("aria-pressed")));
       });
     }
   };
diff --git a/app/assets/stylesheets/management/account/edit_password_manually.scss b/app/assets/stylesheets/management/account/edit_password_manually.scss
index 6b5613e36..4d8aaa3ce 100644
--- a/app/assets/stylesheets/management/account/edit_password_manually.scss
+++ b/app/assets/stylesheets/management/account/edit_password_manually.scss
@@ -3,4 +3,8 @@
   [type=text] {
     margin-bottom: 0 !important;
   }
+
+  .show-password {
+    cursor: pointer;
+  }
 }
diff --git a/app/components/management/account/edit_password_manually_component.html.erb b/app/components/management/account/edit_password_manually_component.html.erb
index c59848e62..9887cbcac 100644
--- a/app/components/management/account/edit_password_manually_component.html.erb
+++ b/app/components/management/account/edit_password_manually_component.html.erb
@@ -10,10 +10,10 @@
     <div class="input-group">
       <%= f.password_field :password, class: "input-group-field", label: false, value: nil %>
       <span class="input-group-label">
-        <a href="#" class="show-password">
+        <button type="button" class="show-password" aria-pressed="false">
           <span class="icon-eye"></span>
           <span class="show-for-sr"><%= t("management.account.edit.password.show") %></span>
-        </a>
+        </button>
       </span>
     </div>
 
diff --git a/spec/system/management/account_spec.rb b/spec/system/management/account_spec.rb
index b2d219de0..100c3502c 100644
--- a/spec/system/management/account_spec.rb
+++ b/spec/system/management/account_spec.rb
@@ -60,14 +60,17 @@ describe "Account" do
     new_password = find_field("user_password").value
 
     expect(page).to have_field "Password", type: :password
+    expect(page).to have_css "button[aria-pressed=false]", exact_text: "Show password"
 
-    click_link "Show password"
+    click_button "Show password"
 
     expect(page).to have_field "Password", type: :text
+    expect(page).to have_css "button[aria-pressed=true]", exact_text: "Show password"
 
-    click_link "Show password"
+    click_button "Show password"
 
     expect(page).to have_field "Password", type: :password
+    expect(page).to have_css "button[aria-pressed=false]", exact_text: "Show password"
 
     click_button "Save password"