MDL-42462 - Feedback - Fix for WCAG 2.0 issue with Informational and …

…Error Content Displayed in red 1) The same code used in other Moodle forms is now used in Feedback to display the "There are required fields in this form marked (*/Required field)" message at the top of the screen and each of the asterisks next to required fields. 2) Feedback specific styles (missingrequire, feeback_required_mark), which were used to highlight required and error fields, have been eliminated. These colours are now controlled by the common Moodle styles (mform1, mform, fdescription, required, req and error) that are used throughout the rest of Moodle for a more uniform appearance. 3) Field level error reporting now displays a message instead of just highlighting the field in a similar way that other Moodle forms do. Affected files: - /mod/feedback/styles.css - /mod/feedback/complete.php - /mod/feedback/complete_guest.php - /mod/feedback/edit.php - /mod/feedback/print.php - /mod/feedback/item/captcha/lib.php - /mod/feedback/item/info/lib.php - /mod/feedback/item/multichoice/lib.php - /mod/feedback/item/multichoicerated/lib.php - /mod/feedback/item/numeric/lib.php - /mod/feedback/item/textarea/lib.php - /mod/feedback/item/textfield/lib.php - /mod/feedback/lang/en/feedback.php Signed-off-by: Michael Milette <[email protected]>
abgreeve · Apr 3, 2014 · cba0119 · cba0119
1 parent 1a727e1
commit cba0119
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 123 deletions.
diff --git a/mod/feedback/complete.php b/mod/feedback/complete.php
@@ -403,21 +403,21 @@
         echo $OUTPUT->continue_button($url);
     } else {
         if (isset($savereturn) && $savereturn == 'failed') {
-            echo $OUTPUT->box_start('mform error');
-            echo get_string('saving_failed', 'feedback');
+            echo $OUTPUT->box_start('mform');
+            echo '<span class="error">'.get_string('saving_failed', 'feedback').'</span>';
             echo $OUTPUT->box_end();
         }
 
         if (isset($savereturn) && $savereturn == 'missing') {
-            echo $OUTPUT->box_start('mform error');
-            echo get_string('saving_failed_because_missing_or_false_values', 'feedback');
+            echo $OUTPUT->box_start('mform');
+            echo '<span class="error">'.get_string('saving_failed_because_missing_or_false_values', 'feedback').'</span>';
             echo $OUTPUT->box_end();
         }
 
         //print the items
         if (is_array($feedbackitems)) {
             echo $OUTPUT->box_start('feedback_form');
-            echo '<form action="complete.php" method="post" onsubmit=" ">';
+            echo '<form action="complete.php" class="mform" method="post" onsubmit=" ">';
             echo '<input type="hidden" name="sesskey" value="'.sesskey().'" />';
             echo $OUTPUT->box_start('feedback_anonymousinfo');
             switch ($feedback->anonymous) {
@@ -440,8 +440,9 @@
             $params = array('feedback' => $feedback->id, 'required' => 1);
             $countreq = $DB->count_records('feedback_item', $params);
             if ($countreq > 0) {
-                echo '<span class="feedback_required_mark">(*)';
-                echo get_string('items_are_required', 'feedback');
+                echo '<span class="fdescription required">';
+                echo get_string('somefieldsrequired', 'form', '<img alt="'.get_string('requiredelement', 'form').
+                    '" src="'.$OUTPUT->pix_url('req') .'" class="req" />');
                 echo '</span>';
             }
             echo $OUTPUT->box_start('feedback_items');

diff --git a/mod/feedback/complete_guest.php b/mod/feedback/complete_guest.php
@@ -363,21 +363,22 @@
         echo $OUTPUT->continue_button($url);
     } else {
         if (isset($savereturn) && $savereturn == 'failed') {
-            echo $OUTPUT->box_start('mform error');
-            echo get_string('saving_failed', 'feedback');
+            echo $OUTPUT->box_start('mform');
+            echo '<span class="error">'.get_string('saving_failed', 'feedback').'</span>';
             echo $OUTPUT->box_end();
         }
 
         if (isset($savereturn) && $savereturn == 'missing') {
-            echo $OUTPUT->box_start('mform error');
-            echo get_string('saving_failed_because_missing_or_false_values', 'feedback');
+            echo $OUTPUT->box_start('mform');
+            echo '<span class="error">'.get_string('saving_failed_because_missing_or_false_values', 'feedback').'</span>';
             echo $OUTPUT->box_end();
         }
 
         //print the items
         if (is_array($feedbackitems)) {
             echo $OUTPUT->box_start('feedback_form');
-            echo '<form action="complete_guest.php" method="post" onsubmit=" ">';
+            echo '<form action="complete_guest.php" class="mform" method="post" onsubmit=" ">';
+            echo '<fieldset>';
             echo '<input type="hidden" name="anonymous" value="0" />';
             $inputvalue = 'value="'.FEEDBACK_ANONYMOUS_YES.'"';
             echo '<input type="hidden" name="anonymous_response" '.$inputvalue.' />';
@@ -386,9 +387,10 @@
             $params = array('feedback'=>$feedback->id, 'required'=>1);
             $countreq = $DB->count_records('feedback_item', $params);
             if ($countreq > 0) {
-                echo '<span class="feedback_required_mark">(*)';
-                echo get_string('items_are_required', 'feedback');
-                echo '</span>';
+                echo '<div class="fdescription required">';
+                echo get_string('somefieldsrequired', 'form', '<img alt="'.get_string('requiredelement', 'form').
+                    '" src="'.$OUTPUT->pix_url('req') .'" class="req" />');
+                echo '</div>';
             }
             echo $OUTPUT->box_start('feedback_items');
 

diff --git a/mod/feedback/edit.php b/mod/feedback/edit.php
@@ -258,9 +258,10 @@
         $params = array('feedback' => $feedback->id, 'required' => 1);
         $countreq = $DB->count_records('feedback_item', $params);
         if ($countreq > 0) {
-            echo '<span class="feedback_required_mark">(*)';
-            echo get_string('items_are_required', 'feedback');
-            echo '</span>';
+            echo '<div class="fdescription required">';
+            echo get_string('somefieldsrequired', 'form', '<img alt="'.get_string('requiredelement', 'form').
+                '" src="'.$OUTPUT->pix_url('req') .'" class="req" />');
+            echo '</div>';
         }
 
         //Use list instead a table

diff --git a/mod/feedback/item/captcha/lib.php b/mod/feedback/item/captcha/lib.php
@@ -134,7 +134,8 @@ public function print_item_preview($item) {
             }
         }
 
-        $requiredmark = '<span class="feedback_required_mark">*</span>';
+        $requiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         //print the question and label
         echo '<div class="feedback_item_label_'.$align.'">';
@@ -154,7 +155,7 @@ public function print_item_preview($item) {
      * @return void
      */
     public function print_item_complete($item, $value = '', $highlightrequire = false) {
-        global $SESSION, $CFG, $DB, $USER;
+        global $SESSION, $CFG, $DB, $USER, $OUTPUT;
         require_once($CFG->libdir.'/recaptchalib.php');
 
         $align = right_to_left() ? 'right' : 'left';
@@ -177,11 +178,13 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
         }
 
         if ($falsevalue) {
-            $highlight = 'missingrequire';
+            $highlight = '<br class="error"><span id="id_error_recaptcha_response_field" class="error"> '.
+                get_string('err_required', 'form').'</span><br id="id_error_break_recaptcha_response_field" class="error" >';
         } else {
             $highlight = '';
         }
-        $requiredmark = '<span class="feedback_required_mark">*</span>';
+        $requiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         if (isset($SESSION->feedback->captchacheck) AND
                 $SESSION->feedback->captchacheck == $USER->sesskey AND
@@ -208,7 +211,7 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
         $html = html_writer::script(js_writer::set_variable('RecaptchaOptions', $recaptureoptions));
         $html .= '
 
-        <div  class="'.$highlight.'" id="recaptcha_widget" style="display:none">
+        <div id="recaptcha_widget" style="display:none">
 
         <div id="recaptcha_image"></div>
         <div class="recaptcha_only_if_incorrect_sol" style="color:red">'.
@@ -220,6 +223,7 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
         <span class="recaptcha_only_if_audio">
         <label for="recaptcha_response_field">'.$strenterthenumbersyouhear.'</label>
         </span>
+        <label for="recaptcha_response_field">'.$highlight.'</label>
 
         <input type="text" id="recaptcha_response_field" name="'.$item->typ.'_'.$item->id.'" />
 
@@ -268,7 +272,8 @@ public function print_item_show_value($item, $value = '') {
             }
         }
 
-        $requiredmark = '<span class="feedback_required_mark">*</span>';
+        $requiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         //print the question and label
         echo '<div class="feedback_item_label_'.$align.'">';

diff --git a/mod/feedback/item/info/lib.php b/mod/feedback/item/info/lib.php
@@ -194,7 +194,8 @@ public function print_item_preview($item) {
 
         $align = right_to_left() ? 'right' : 'left';
         $presentation = $item->presentation;
-        $requiredmark =  ($item->required == 1)?'<span class="feedback_required_mark">*</span>':'';
+        $requiredmark = ($item->required == 1)?'<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />':'';
 
         if ($item->feedback) {
             $courseid = $DB->get_field('feedback', 'course', array('id'=>$item->feedback));
@@ -272,11 +273,12 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
 
         $presentation = $item->presentation;
         if ($highlightrequire AND $item->required AND strval($value) == '') {
-            $highlight = ' missingrequire';
+            $highlight = 'error';
         } else {
             $highlight = '';
         }
-        $requiredmark =  ($item->required == 1)?'<span class="feedback_required_mark">*</span>':'';
+        $requiredmark = ($item->required == 1)?'<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />':'';
 
         $feedback = $DB->get_record('feedback', array('id'=>$item->feedback));
 
@@ -326,8 +328,10 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
         }
 
         //print the question and label
-        echo '<div class="feedback_item_label_'.$align.$highlight.'">';
+        echo '<div class="feedback_item_label_'.$align.'">';
+        echo '<span class="'.$highlight.'">';
             echo format_text($item->name.$requiredmark, true, false, false);
+        echo '</span>';
         echo '</div>';
 
         //print the presentation
@@ -350,7 +354,8 @@ public function print_item_show_value($item, $value = '') {
         $align = right_to_left() ? 'right' : 'left';
 
         $presentation = $item->presentation;
-        $requiredmark =  ($item->required == 1)?'<span class="feedback_required_mark">*</span>':'';
+        $requiredmark = ($item->required == 1)?'<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />':'';
 
         if ($presentation == 1) {
             $value = $value ? userdate($value) : '&nbsp;';

diff --git a/mod/feedback/item/multichoice/lib.php b/mod/feedback/item/multichoice/lib.php
@@ -308,11 +308,12 @@ public function print_item_preview($item) {
         $align = right_to_left() ? 'right' : 'left';
 
         $presentation = explode (FEEDBACK_MULTICHOICE_LINE_SEP, $info->presentation);
-        $str_required_mark = '<span class="feedback_required_mark">*</span>';
+        $strrequiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         //test if required and no value is set so we have to mark this item
         //we have to differ check and the other subtypes
-        $requiredmark =  ($item->required == 1) ? $str_required_mark : '';
+        $requiredmark = ($item->required == 1) ? $strrequiredmark : '';
 
         //print the question and label
         echo '<div class="feedback_item_label_'.$align.'">';
@@ -407,45 +408,40 @@ public function print_item_complete($item, $value = null, $highlightrequire = fa
             $value = array();
         }
         $presentation = explode (FEEDBACK_MULTICHOICE_LINE_SEP, $info->presentation);
-        $str_required_mark = '<span class="feedback_required_mark">*</span>';
+        $strrequiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         //test if required and no value is set so we have to mark this item
         //we have to differ check and the other subtypes
-        // if ($info->subtype == 'c') {
-            if (is_array($value)) {
-                $values = $value;
-            } else {
-                $values = explode(FEEDBACK_MULTICHOICE_LINE_SEP, $value);
-            }
-            $highlight = '';
-            if ($highlightrequire AND $item->required) {
-                if (count($values) == 0 OR $values[0] == '' OR $values[0] == 0) {
-                    $highlight = ' missingrequire';
-                }
-            }
-            $requiredmark = ($item->required == 1) ? $str_required_mark : '';
-        // } else {
-            // if ($highlightrequire AND $item->required AND intval($value) <= 0) {
-                // $highlight = ' missingrequire';
-            // } else {
-                // $highlight = '';
-            // }
-            // $requiredmark = ($item->required == 1) ? $str_required_mark : '';
-        // }
+        if (is_array($value)) {
+            $values = $value;
+        } else {
+            $values = explode(FEEDBACK_MULTICHOICE_LINE_SEP, $value);
+        }
+        $requiredmark = ($item->required == 1) ? $strrequiredmark : '';
 
         //print the question and label
-        echo '<div class="feedback_item_label_'.$align.$highlight.'">';
+        $inputname = $item->typ . '_' . $item->id;
+        echo '<div class="feedback_item_label_'.$align.'">';
         if ($info->subtype == 'd') {
-            echo '<label for="'. $item->typ . '_' . $item->id .'">';
-            echo format_text($item->name . $requiredmark, FORMAT_HTML, array('noclean' => true, 'para' => false));
+            echo '<label for="'. $inputname .'">';
+            echo format_text($item->name.$requiredmark, true, false, false);
+            if ($highlightrequire AND $item->required AND (count($values) == 0 OR $values[0] == '' OR $values[0] == 0)) {
+                echo '<br class="error"><span id="id_error_'.$inputname.'" class="error"> '.get_string('err_required', 'form').
+                    '</span><br id="id_error_break_'.$inputname.'" class="error" >';
+            }
             echo '</label>';
         } else {
             echo format_text($item->name . $requiredmark, FORMAT_HTML, array('noclean' => true, 'para' => false));
+            if ($highlightrequire AND $item->required AND (count($values) == 0 OR $values[0] == '' OR $values[0] == 0)) {
+                echo '<br class="error"><span id="id_error_'.$inputname.'" class="error"> '.get_string('err_required', 'form').
+                    '</span><br id="id_error_break_'.$inputname.'" class="error" >';
+            }
         }
         echo '</div>';
 
         //print the presentation
-        echo '<div class="feedback_item_presentation_'.$align.$highlight.'">';
+        echo '<div class="feedback_item_presentation_'.$align.'">';
 
         if ($info->subtype == 'r' || $info->subtype == 'c') {
             // if (r)adio buttons or (c)heckboxes
@@ -534,7 +530,8 @@ public function print_item_show_value($item, $value = null) {
         }
         $requiredmark = '';
         if ($item->required == 1) {
-            $requiredmark = '<span class="feedback_required_mark">*</span>';
+            $requiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+                get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
         }
 
         //print the question and label

diff --git a/mod/feedback/item/multichoicerated/lib.php b/mod/feedback/item/multichoicerated/lib.php
@@ -295,10 +295,11 @@ public function print_item_preview($item) {
 
         $align = right_to_left() ? 'right' : 'left';
         $info = $this->get_info($item);
-        $str_required_mark = '<span class="feedback_required_mark">*</span>';
+        $strrequiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         $lines = explode (FEEDBACK_MULTICHOICERATED_LINE_SEP, $info->presentation);
-        $requiredmark =  ($item->required == 1) ? $str_required_mark : '';
+        $requiredmark = ($item->required == 1) ? $strrequiredmark : '';
         //print the question and label
         echo '<div class="feedback_item_label_'.$align.'">';
         if ($info->subtype == 'd') {
@@ -344,29 +345,34 @@ public function print_item_complete($item, $value = '', $highlightrequire = fals
         global $OUTPUT;
         $align = right_to_left() ? 'right' : 'left';
         $info = $this->get_info($item);
-        $str_required_mark = '<span class="feedback_required_mark">*</span>';
+        $strrequiredmark = '<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />';
 
         $lines = explode (FEEDBACK_MULTICHOICERATED_LINE_SEP, $info->presentation);
-        $requiredmark =  ($item->required == 1) ? $str_required_mark : '';
-        if ($highlightrequire AND $item->required AND intval($value) <= 0) {
-            $highlight = ' missingrequire';
-        } else {
-            $highlight = '';
-        }
+        $requiredmark = ($item->required == 1) ? $strrequiredmark : '';
 
         //print the question and label
-        echo '<div class="feedback_item_label_'.$align.$highlight.'">';
+        $inputname = $item->typ . '_' . $item->id;
+        echo '<div class="feedback_item_label_'.$align.'">';
         if ($info->subtype == 'd') {
-            echo '<label for="'. $item->typ . '_' . $item->id .'">';
-            echo format_text($item->name . $requiredmark, FORMAT_HTML, array('noclean' => true, 'para' => false));
+            echo '<label for="'. $inputname .'">';
+            echo format_text($item->name.$requiredmark, true, false, false);
+            if ($highlightrequire AND $item->required AND intval($value) <= 0) {
+                echo '<br class="error"><span id="id_error_'.$inputname.'" class="error"> '.get_string('err_required', 'form').
+                    '</span><br id="id_error_break_'.$inputname.'" class="error" >';
+            }
             echo '</label>';
         } else {
             echo format_text($item->name . $requiredmark, FORMAT_HTML, array('noclean' => true, 'para' => false));
+            if ($highlightrequire AND $item->required AND intval($value) <= 0) {
+                echo '<br class="error"><span id="id_error_'.$inputname.'" class="error"> '.get_string('err_required', 'form').
+                    '</span><br id="id_error_break_'.$inputname.'" class="error" >';
+            }
         }
         echo '</div>';
 
         //print the presentation
-        echo '<div class="feedback_item_presentation_'.$align.$highlight.'">';
+        echo '<div class="feedback_item_presentation_'.$align.'">';
         switch($info->subtype) {
             case 'r':
                 $this->print_item_radio($item, $value, $info, $align, false, $lines);
@@ -392,7 +398,8 @@ public function print_item_show_value($item, $value = '') {
         $info = $this->get_info($item);
 
         $lines = explode (FEEDBACK_MULTICHOICERATED_LINE_SEP, $info->presentation);
-        $requiredmark = ($item->required == 1)?'<span class="feedback_required_mark">*</span>':'';
+        $requiredmark = ($item->required == 1)?'<img class="req" title="'.get_string('requiredelement', 'form').'" alt="'.
+            get_string('requiredelement', 'form').'" src="'.$OUTPUT->pix_url('req') .'" />':'';
 
         //print the question and label
         echo '<div class="feedback_item_label_'.$align.'">';