Merge pull request #2256 from canonical/WD-31831-fix-a-11-y-tests-for-form-gen-on-c-com

Fix a 11 y tests for the form generator template.

Author: Skazitron

.pa11yci

@@ -7,14 +7,6 @@
         "--no-sandbox"
       ]
     },
-    "ignore": [
-      "WCAG2AA.Principle1.Guideline1_3.1_3_1.H71.NoLegend",
-      "WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NotFormControl",
-      "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Textarea.Name",
-      "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name",
-      "WCAG2AA.Principle1.Guideline1_1.1_1_1.H65",
-      "WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1.NoTitle"
-    ],
     "hideElements": "iframe[style*='display: none'], [style*='visibility: hidden;']"
   },
   "urls": [

static/sass/styles.scss

@@ -743,6 +743,11 @@ $p-small-lh-diff: map-get($line-heights, default-text) -
   }
 }
 
+.p-heading--4.legend-is-required::before {
+    content: " * ";
+    position: relative;
+}
+
 .u-extra-space {
   margin-bottom: 4rem;
 }

templates/shared/forms/form-fields.html

@@ -22,10 +22,13 @@
         <hr class="p-rule is-fixed-width" />
         <fieldset class="p-fieldset-section{% if fieldset.inputType == 'checkbox-visibility' %} js-toggle-checkbox-visibility{% elif fieldset.isRequired and fieldset.inputType == 'checkbox' %} js-required-checkbox{% elif fieldset.inputType == 'radio' %} js-remove-radio-names{% endif %} {% if fieldset.inputType == 'checkbox' or fieldset.inputType == 'checkbox-visibility' %}js-remove-checkbox-names{% endif %}"
                   aria-labelledby="{{ fieldset_id }}-legend">
+            <legend class="u-off-screen">
+                {{ fieldset.title }}{% if fieldset.isRequired %} (required) {% endif %}
+            </legend>
           <div class="row--50-50 {% if fieldset.noCommentsFromLead != True %}js-formfield{% endif %}">
             <div class="col">
-              <legend class="p-heading--4 js-formfield-title {% if fieldset.isRequired %}is-required{% endif %}"
-                      id="{{ fieldset_id }}-legend">{{ fieldset.title }}</legend>
+              <p class="p-heading--4 js-formfield-title {% if fieldset.isRequired %}legend-is-required{% endif %}"
+                      id="{{ fieldset_id }}-legend">{{ fieldset.title }}</p>
             </div>
             <div class="col">
               <ul class="p-list">