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

@@ -39,14 +39,13 @@
         e.stopPropagation();
         $("#user_password").val(App.Managers.generatePassword());
       });
-      $(".show-password").on("click", function(e) {
+      $(".show-password").on("click", function() {
-        e.preventDefault();
-        e.stopPropagation();
         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")));
       });
     }
   };

app/assets/stylesheets/management/account/edit_password_manually.scss

@@ -3,4 +3,8 @@
   [type=text] {
     margin-bottom: 0 !important;
   }
+
+  .show-password {
+    cursor: pointer;
+  }
 }

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>
 

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"