[TAC025] Improve the required fields on the forms for screen reader

ahukkanen · ahukkanen · commit 5cb97445660e · 2020-03-27T21:15:25.000+02:00
diff --git a/decidim-core/app/assets/stylesheets/decidim/extras/_label-required.scss b/decidim-core/app/assets/stylesheets/decidim/extras/_label-required.scss
@@ -1,3 +1,12 @@
 .label-required{
+  cursor: help;
+  border-bottom: $abbr-underline;
+  text-decoration: none;
+  padding-right: 0;
   margin-left: 5px;
+
+  > span{
+    padding-right: 0;
+    margin-right: 0;
+  }
 }
diff --git a/decidim-core/app/assets/stylesheets/decidim/modules/_forms.scss b/decidim-core/app/assets/stylesheets/decidim/modules/_forms.scss
@@ -12,13 +12,6 @@ $checkboxes-minimum-width: 200px;
   line-height: 1.2;
 }
 
-.label-required{
-  cursor: help;
-  border-bottom: $abbr-underline;
-  text-decoration: none;
-  padding-right: 0;
-}
-
 .form-input-extra-before,
 .form-input-extra-after{
   display: block;
diff --git a/decidim-core/lib/decidim/form_builder.rb b/decidim-core/lib/decidim/form_builder.rb
@@ -685,10 +685,20 @@ def file_is_present?(file)
 
     def required_for_attribute(attribute)
       if attribute_required?(attribute)
-        return content_tag(:span, "*", title: I18n.t("required", scope: "forms"),
-                                       data: { tooltip: true, disable_hover: false, keep_on_hover: true },
-                                       "aria-haspopup": true,
-                                       class: "label-required").html_safe
+        visible_title = content_tag(:span, "*", "aria-hidden": true)
+        screenreader_title = content_tag(
+          :span,
+          I18n.t("required", scope: "forms"),
+          class: "show-for-sr"
+        )
+        return content_tag(
+          :span,
+          visible_title + screenreader_title,
+          title: I18n.t("required", scope: "forms"),
+          data: { tooltip: true, disable_hover: false, keep_on_hover: true },
+          "aria-haspopup": true,
+          class: "label-required"
+        ).html_safe
       end
       "".html_safe
     end
