Bug 1606730: Adding required message above forms with required fields

Also adding aria-required="true" to required fields

behatnotneeded - existing test are ok

Change-Id: Iaba02ea6653d28da298a0e410ab3d79773f810db
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/lang/en.utf8/pieforms.php

@@ -77,3 +77,5 @@ $string['switchbox.on'] = 'On';
 $string['switchbox.off'] = 'Off';
 $string['switchbox.yes'] = 'Yes';
 $string['switchbox.no'] = 'No';
+
+$string['requiredfields'] = "Fields marked by '%s' are required.";
\ No newline at end of file

htdocs/lib/mahara.php

@@ -2479,7 +2479,7 @@ function pieform_configure() {
         'language'  => current_language(),
         'autofocus' => true,
         'renderer'  => $renderer,
-        'requiredmarker' => true,
+        'requiredmarker' => '*',
         'elementclasses' => true,
         'descriptionintwocells' => true,
         'jsdirectory'    => get_config('wwwroot') . 'lib/pieforms/static/core/',

htdocs/lib/pieforms/pieform.php

@@ -145,6 +145,9 @@ class Pieform {/*{{{*/
      */
     private $submitted_by_dropzone = false;
 
+    private $has_required_fields = false;
+    private $all_required_field_labels_hidden = false;
+
     private $submitvalue = 'submit';
 
     /*}}}*/
@@ -777,6 +780,13 @@ class Pieform {/*{{{*/
                 $result = $this->get_form_tag() . "\n";
             }
 
+            if ($this->has_required_fields) {
+                $result .= '<div class="form-group requiredmarkerdesc';
+                if ($this->all_required_field_labels_hidden) {
+                    $result .= ' hidden';
+                }
+                $result .= '">' . get_string('requiredfields', 'pieforms', $this->get_property('requiredmarker')) . '</div>';
+            }
             $this->include_plugin('renderer',  $this->data['renderer']);
 
             // Form header
@@ -1204,6 +1214,10 @@ EOF;
             }
         }
 
+        if (!empty($element['rules']['required'])) {
+            $result .= ' aria-required="true"';
+        }
+
         return $result;
     }/*}}}*/
 
@@ -1493,7 +1507,14 @@ EOF;
             $title = self::hsc($element['title']);
 
             if ($this->get_property('requiredmarker') && !empty($element['rules']['required'])) {
-                $requiredmarker = ' <span class="requiredmarker">*</span>';
+                $requiredmarker = ' <span class="requiredmarker">' . $this->get_property('requiredmarker') . '</span>';
+                $this->has_required_fields = true;
+                if (!empty($element['hiddenlabel'])) {
+                    $this->all_required_field_labels_hidden = true;
+                }
+                else {
+                    $this->all_required_field_labels_hidden = false;
+                }
             }
             else {
                 $requiredmarker = '';

htdocs/lib/pieforms/pieform/elements/fieldset.php

@@ -174,7 +174,7 @@ function _render_elements_as_multicolumn($form, $element) {
                 $result .= '<th>';
                 $result .= Pieform::hsc($data['value']);
                 if ($form->get_property('requiredmarker') && !empty($data['rules']['required'])) {
-                    $result .= ' <span class="requiredmarker">*</span>';
+                    $result .= ' <span class="requiredmarker">' . $form->get_property('requiredmarker') . '</span>';
                 }
                 $result .= "</th>\n\t";
                 $count ++;

htdocs/theme/raw/js/formtabs.js

@@ -37,9 +37,24 @@ jQuery(function($) {
 
         // set first tab active
         mahara.tabnav.find('li:first-child a').tab('show');
-
+        if ($(mahara.tabnav.find('li:first-child a').attr('href')).find('.requiredmarker').length) {
+            // show 'required' header message
+            mahara.tabnav.closest('form').find('.requiredmarkerdesc').removeClass('hidden');
+        }
+        else {
+            // hide 'required' header message
+            mahara.tabnav.closest('form').find('.requiredmarkerdesc').addClass('hidden');
+        }
         // Store current tab on change
         $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
+            if ($($(e.target).attr('href')).find('.requiredmarker').length) {
+                // show 'required' header message
+                $(e.target).closest('form').find('.requiredmarkerdesc').removeClass('hidden');
+            }
+            else {
+                // hide 'required' header message
+                $(e.target).closest('form').find('.requiredmarkerdesc').addClass('hidden');
+            }
             saveTab(e);
         });
     }

htdocs/theme/raw/plugintype/artefact/file/templates/form/editfile.tpl

@@ -4,6 +4,7 @@
             <h4 id="{$prefix}_edit_heading" class="edit-heading">
                 {if $fileinfo}{if $fileinfo->artefacttype == 'folder'}{str tag=editfolder section=artefact.file}{else}{str tag=editfile section=artefact.file}{/if}{/if}
             </h4>
+            <div class="form-group requiredmarkerdesc">{str tag='requiredfields' section='pieforms' arg1='*'}</div>
             <div class="required form-group">
                 <label for="{$prefix}_edit_title">{str tag=name}<span class="requiredmarker"> *</span>
                 </label>

htdocs/theme/raw/sass/form/_form-group.scss

@@ -527,6 +527,13 @@
         color: darken($brand-danger, 5%);
     }
 
+    &.requiredmarkerdesc {
+        color: darken($brand-danger, 5%);
+        border: 0;
+        font-style: italic;
+        font-size: $font-size-base - 1;
+        padding-bottom: 0;
+    }
     @media (min-width: $screen-sm-min) {
         &.input-small {
             max-width: 100%;