Fix accessibility errors

decidim · Jul 28, 2023 · 7445340 · 7445340
1 parent 1466d1c
commit 7445340
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/decidim-accountability/app/views/decidim/accountability/results/_search.html.erb b/decidim-accountability/app/views/decidim/accountability/results/_search.html.erb
@@ -10,6 +10,8 @@
             value: "",
             title: t("search", scope: "decidim.accountability.results.search")
           ) %>
+    </label>
+    <label>
       <button type="submit" aria-label="<%= t("search", scope: "decidim.accountability.results.search") %>">
         <%= icon "search-line" %>
       </button>

diff --git a/decidim-core/app/packs/src/decidim/password_toggler.js b/decidim-core/app/packs/src/decidim/password_toggler.js
@@ -12,8 +12,8 @@ export default class PasswordToggler {
       shownPassword: this.password.getAttribute("data-shown-password") || "Your password is shown"
     }
     this.icons = {
-      show: icon("eye-fill", {title: this.texts.showPassword}),
-      hide: icon("eye-off-fill", {title: this.texts.hidePassword})
+      show: icon("eye-line"),
+      hide: icon("eye-off-line")
     }
   }
 
@@ -39,28 +39,34 @@ export default class PasswordToggler {
   }
 
   createControls() {
-    let button = document.createElement("button");
-    button.classList.add("mt-3")
+    const buttonLabel = document.createElement("label");
+    const button = document.createElement("button");
+    button.classList.add("mt-10")
     button.setAttribute("aria-controls", this.input.getAttribute("id"));
     button.setAttribute("aria-label", this.texts.showPassword);
-    button.textContent = this.icons.show;
+    button.innerHTML = this.icons.show;
+    buttonLabel.appendChild(button)
+    this.button = button;
 
-    let statusText = document.createElement("span");
+    const statusText = document.createElement("span");
     statusText.classList.add("sr-only");
     statusText.setAttribute("aria-live", "polite");
     statusText.textContent = this.texts.hiddenPassword;
-
-    this.button = button;
     this.statusText = statusText;
 
-    let inputGroupWrapper = document.createElement("div");
+    const inputGroupWrapper = document.createElement("div");
     inputGroupWrapper.classList.add("filter-search", "filter-container");
+
     const inputParent = this.input.parentNode;
-    inputParent.replaceChild(inputGroupWrapper, this.input);
-    inputGroupWrapper.appendChild(this.input);
+    const inputGrandParent = inputParent.parentNode;
+    const label = this.password.querySelector("label");
+
+    inputGrandParent.replaceChild(inputGroupWrapper, this.input.parentNode);
+    inputGroupWrapper.appendChild(label);
+    label.appendChild(this.input);
 
-    this.input.after(this.button);
-    this.input.after(this.statusText);
+    label.after(this.button);
+    label.after(this.statusText);
   }
 
   toggleVisibiliy(evt) {
@@ -75,14 +81,14 @@ export default class PasswordToggler {
   showPassword() {
     this.statusText.textContent = this.texts.shownPassword;
     this.button.setAttribute("aria-label", this.texts.hidePassword);
-    this.button.textContent = this.icons.hide;
+    this.button.innerHTML = this.icons.hide;
     this.input.setAttribute("type", "text");
   }
 
   hidePassword() {
     this.statusText.textContent = this.texts.hiddenPassword;
     this.button.setAttribute("aria-label", this.texts.showPassword);
-    this.button.textContent = this.icons.show;
+    this.button.innerHTML = this.icons.show;
     this.input.setAttribute("type", "password");
   }
 

diff --git a/decidim-core/app/views/decidim/account/_password_fields.html.erb b/decidim-core/app/views/decidim/account/_password_fields.html.erb
@@ -1,4 +1,4 @@
-<span class="user-password"
+<div class="user-password"
   data-show-password="<%= t "show_password", scope: "decidim.devise.shared.password_fields" %>"
   data-hide-password="<%= t "hide_password", scope: "decidim.devise.shared.password_fields" %>"
   data-hidden-password="<%= t "hidden_password", scope: "decidim.devise.shared.password_fields" %>"
@@ -8,4 +8,4 @@
   <% else %>
     <%= form.password_field :password, autocomplete: "current-password" %>
   <% end %>
-</span>
+</div>