[TAC027] Improve the usability of the floating help

ahukkanen · ahukkanen · commit 9f03f9a01f94 · 2020-05-21T19:05:20.000+03:00
After the accessibility changes the floating help buttons were
making the user jump in the view.
diff --git a/decidim-core/app/assets/javascripts/decidim/floating_help.js.es6 b/decidim-core/app/assets/javascripts/decidim/floating_help.js.es6
@@ -28,6 +28,13 @@ $(function() {
   $(".floating-helper-container").each((_index, elem) => {
     let id = $(elem).data("help-id");
 
+    $(
+      ".floating-helper__trigger, .floating-helper__content-close",
+      elem
+    ).on("click", (ev) => {
+      ev.preventDefault();
+    });
+
     if (!dismissedHelpers.includes(id)) {
       $(".floating-helper", elem).foundation("toggle");
       $(".floating-helper__wrapper", elem).foundation("toggle");
diff --git a/decidim-core/app/views/decidim/shared/_floating_help.html.erb b/decidim-core/app/views/decidim/shared/_floating_help.html.erb
@@ -6,7 +6,7 @@
           <%= t ".help" %>
         </div>
         <div class="floating-helper__icon">
-          <%= icon "question-mark", class: "icon--small", role: "img" %>
+          <%= icon "question-mark", class: "icon--small", role: "img", aria_label: t(".help") %>
         </div>
       </a>
     </div>
@@ -16,15 +16,15 @@
     <div class="floating-helper__content">
       <div class="floating-helper__content-inner">
         <div class="floating-helper__icon-big show-for-medium">
-          <%= icon "question-mark", class: "icon--large", role: "img" %>
+          <%= icon "question-mark", class: "icon--large", role: "img", aria_label: t(".help") %>
         </div>
         <div class="mb-s">
           <%= content %>
         </div>
       </div>
     </div>
     <a href="#floating-helper-tip" class="floating-helper__content-close" data-toggle="floating-helper-block floating-helper-tip">
-      <%= icon "x", class: "icon--small", role: "img" %>
+      <%= icon "x", class: "icon--small", role: "img", aria_label: t(".close") %>
     </a>
   </div>
 </div>
