Questionnaire/Accessibility: Radio buttons & Yes/No missing group lab…

…el (#511) Co-authored-by: Emanoil Manoylov <[email protected]>
PoetOS · Feb 23, 2024 · b2ee5bd · b2ee5bd
1 parent e8607f8
commit b2ee5bd
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 38 deletions.
diff --git a/classes/question/radio.php b/classes/question/radio.php
@@ -122,6 +122,9 @@ protected function question_survey_display($response, $dependants=[], $blankques
                 }
                 $contents = questionnaire_choice_values($choice->content);
                 $radio->label = $value.format_text($contents->text, FORMAT_HTML, ['noclean' => true]).$contents->image;
+                if (!empty($this->qlegend)) {
+                    $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");
+                }
             } else {             // Radio button with associated !other text field.
                 $othertext = $choice->other_choice_display();
                 $cname = choice::id_other_choice_name($id);
@@ -143,6 +146,10 @@ protected function question_survey_display($response, $dependants=[], $blankques
                     $radio->ovalue = format_string(stripslashes($odata));
                 }
                 $radio->olabel = 'Text for '.format_text($othertext, FORMAT_HTML, ['noclean' => true]);
+                if (!empty($this->qlegend)) {
+                    $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");
+                    $radio->aolabel = strip_tags("{$this->qlegend} {$radio->olabel}");
+                }
             }
             $choicetags->qelements[] = (object)['choice' => $radio];
         }
@@ -164,6 +171,9 @@ protected function question_survey_display($response, $dependants=[], $blankques
             }
             $content = get_string('noanswer', 'questionnaire');
             $radio->label = format_text($content, FORMAT_HTML, ['noclean' => true]);
+            if (!empty($this->qlegend)) {
+                $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");
+            }
 
             $choicetags->qelements[] = (object)['choice' => $radio];
         }
@@ -213,6 +223,9 @@ protected function response_survey_display($response) {
             } else {
                 $chobj->content = ($choice->content === '' ? $id : format_text($choice->content, FORMAT_HTML, ['noclean' => true]));
             }
+            if (!empty($this->qlegend)) {
+                $chobj->alabel = strip_tags("{$this->qlegend} {$chobj->content}");
+            }
             $resptags->choices[] = $chobj;
         }
 

diff --git a/classes/question/yesno.php b/classes/question/yesno.php
@@ -154,6 +154,9 @@ protected function question_survey_display($response, $dependants=[], $blankques
             if ($blankquestionnaire) {
                 $option->disabled = true;
             }
+            if (!empty($this->qlegend)) {
+                $option->alabel = strip_tags("{$this->qlegend} {$option->label}");
+            }
             $choicetags->qelements->choice[] = $option;
         }
         // CONTRIB-846.
@@ -169,6 +172,9 @@ protected function question_survey_display($response, $dependants=[], $blankques
             if (!$ischecked && !$blankquestionnaire) {
                 $option->checked = true;
             }
+            if (!empty($this->qlegend)) {
+                $option->alabel = strip_tags("{$this->qlegend} {$option->label}");
+            }
             $choicetags->qelements->choice[] = $option;
         }
         // End CONTRIB-846.
@@ -201,6 +207,10 @@ protected function response_survey_display($response) {
         if ($answer->value == 'n') {
             $resptags->noselected = 1;
         }
+        if (!empty($this->qlegend)) {
+            $resptags->alabelyes = strip_tags("{$this->qlegend} {$resptags->stryes}");
+            $resptags->alabelno = strip_tags("{$this->qlegend} {$resptags->strno}");
+        }
 
         return $resptags;
     }

diff --git a/templates/question_radio.mustache b/templates/question_radio.mustache
@@ -39,7 +39,8 @@
                     "checked": "",
                     "disabled": 1,
                     "onclick": 1,
-                    "label": "Choice question label"
+                    "label": "Choice label",
+                    "alabel": "Some question Choice label"
                 }
             },
             {
@@ -50,9 +51,11 @@
                     "name": "choiceid2",
                     "checked": "1",
                     "onclick": 1,
-                    "label": "Choice question label",
+                    "label": "Choice label",
+                    "alabel": "Some question Choice label",
                     "oid": "choiceid2_7",
-                    "olabel": "Choice question other label",
+                    "olabel": "Choice other label",
+                    "aolabel": "Some question Choice other label",
                     "oname": "Other",
                     "ovalue": "another choice"
                 }
@@ -62,15 +65,19 @@
     }}
 <!-- Begin HTML generated from question_radio template. -->
 {{#qelements}}
-{{#choice}}
-{{#choice.horizontal}}<span style="white-space:nowrap;">{{/choice.horizontal}}
-<input id="{{choice.id}}" value="{{choice.value}}" name="{{choice.name}}" type="radio" {{#choice.checked}}checked="checked"{{/choice.checked}} {{#choice.disabled}}disabled="disabled"{{/choice.disabled}} {{#choice.onclick}}onclick="{{choice.onclick}}"{{/choice.onclick}}/>
-<label for="{{choice.id}}">{{{choice.label}}}</label>
-{{#choice.oname}}
-<input size="25" name="{{choice.oname}}" id="{{choice.oid}}" onclick="other_check(name)" value="{{choice.ovalue}}" type="text" /><label for="{{choice.oid}}" class="accesshide">{{{choice.olabel}}}</label>&nbsp;
-{{/choice.oname}}
-{{#choice.horizontal}}</span>{{/choice.horizontal}}
-{{^choice.horizontal}}<br />{{/choice.horizontal}}
-{{/choice}}
+    {{#choice}}
+        {{#choice.horizontal}}<span style="white-space:nowrap;">{{/choice.horizontal}}
+            <input id="{{choice.id}}" value="{{choice.value}}" name="{{choice.name}}" type="radio"
+                   {{#choice.checked}}checked="checked"{{/choice.checked}} {{#choice.disabled}}disabled="disabled"{{/choice.disabled}}
+                {{#choice.onclick}}onclick="{{choice.onclick}}"{{/choice.onclick}} aria-label="{{alabel}}"/>
+            <label for="{{choice.id}}">{{{choice.label}}}</label>
+        {{#choice.oname}}
+                <input size="25" name="{{choice.oname}}" id="{{choice.oid}}" onclick="other_check(name)"
+                       value="{{choice.ovalue}}" type="text" aria-label="{{aolabel}}"/>
+                <label for="{{choice.oid}}" class="accesshide">{{{choice.olabel}}}</label>&nbsp;
+        {{/choice.oname}}
+        {{#choice.horizontal}}</span>{{/choice.horizontal}}
+        {{^choice.horizontal}}<br/>{{/choice.horizontal}}
+    {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_radio template. -->
diff --git a/templates/question_yesno.mustache b/templates/question_yesno.mustache
@@ -38,7 +38,8 @@
                     "checked": 1,
                     "disabled": "",
                     "onclick": "dosomething()",
-                    "label": "Yes"
+                    "label": "Yes",
+                    "alabel": "Some question Yes"
                 },
                 {
                     "id": "choice2",
@@ -47,17 +48,20 @@
                     "checked": 0,
                     "disabled": "",
                     "onclick": "dosomething()",
-                    "label": "No"
+                    "label": "No",
+                    "alabel": "Some question No"
                 }
             ]
         }
     }
     }}
 <!-- Begin HTML generated from question_yesno template. -->
 {{#qelements}}
-{{#choice}}
-<input id="{{id}}" value="{{value}}" name="{{name}}" type="radio" {{#checked}}checked="checked"{{/checked}} {{#disabled}}disabled="disabled"{{/disabled}} {{#onclick}}onclick="{{onclick}}"{{/onclick}}/>
-<label for="{{id}}">{{{label}}}</label>
-{{/choice}}
+    {{#choice}}
+        <input id="{{id}}" value="{{value}}" name="{{name}}" type="radio"
+               {{#checked}}checked="checked"{{/checked}} {{#disabled}}disabled="disabled"{{/disabled}} {{#onclick}}onclick="{{onclick}}"{{/onclick}}
+               aria-label="{{alabel}}"/>
+        <label for="{{id}}">{{{label}}}</label>
+    {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_yesno template. -->
diff --git a/templates/response_radio.mustache b/templates/response_radio.mustache
@@ -48,20 +48,23 @@
 }}
 <!-- Begin HTML generated from response_radio template. -->
 <div class="questionnaire_response questionnaire_radio">
-{{#choices}}
-    {{#horizontal}}<span style="white-space:nowrap;">{{/horizontal}}
-    {{#selected}}
-    <span class="selected">
-        {{^pdf}}<input type="radio" name="{{name}}" checked="checked" disabled="disabled" />{{/pdf}}
-        {{#pdf}}&#10003;{{/pdf}} {{{content}}}{{#othercontent}} <span class="response text">{{.}}</span>{{/othercontent}}
+    {{#choices}}
+        {{#horizontal}}<span style="white-space:nowrap;">{{/horizontal}}
+        {{#selected}}
+            <span class="selected">
+        {{^pdf}}
+            <input type="radio" name="{{name}}" checked="checked" disabled="disabled"
+                   aria-label="{{alabel}}"/>{{/pdf}}
+                {{#pdf}}&#10003;{{/pdf}} {{{content}}}{{#othercontent}} <span class="response text">{{.}}</span>{{/othercontent}}
     </span>
-    {{/selected}}
-    {{^selected}}
-        <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}<input type="radio" name="{{name}}" disabled="disabled" />{{/pdf}}
-        {{{content}}}</span>&nbsp;
-    {{/selected}}
-    {{#horizontal}}</span>{{/horizontal}}
-    {{^horizontal}}<br />{{/horizontal}}
-{{/choices}}
+        {{/selected}}
+        {{^selected}}
+            <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}
+                <input type="radio" name="{{name}}" disabled="disabled" aria-label="{{alabel}}"/>{{/pdf}}
+                {{{content}}}</span>&nbsp;
+        {{/selected}}
+        {{#horizontal}}</span>{{/horizontal}}
+        {{^horizontal}}<br/>{{/horizontal}}
+    {{/choices}}
 </div>
 <!-- End HTML generated from response_radio template. -->
diff --git a/templates/response_yesno.mustache b/templates/response_yesno.mustache
@@ -34,22 +34,32 @@
         "stryes": "Yes",
         "noselected": 0,
         "noname": "id4102n",
-        "strno": "No"
+        "strno": "No",
+        "alabelyes": "Some question Yes",
+        "alabelno": "Some question No"
     }
     }}
 <!-- Begin HTML generated from response_yesno template. -->
 <div class="questionnaire_response questionnaire_yesno">
     {{#yesselected}}
-    {{#pdf}}&#10003;{{/pdf}}<span class="selected">{{^pdf}}<input type="radio" name="{{yesname}}" checked="checked" disabled="disabled"/>{{/pdf}} {{{stryes}}}</span>
+        {{#pdf}}&#10003;{{/pdf}}<span class="selected">{{^pdf}}
+        <input type="radio" name="{{yesname}}" checked="checked" disabled="disabled"
+               aria-label="{{alabelyes}}"/>{{/pdf}} {{{stryes}}}</span>
     {{/yesselected}}
     {{^yesselected}}
-        <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}<input type="radio" name="{{yesname}}" disabled="disabled"/>{{/pdf}} {{{stryes}}}</span>
+        <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}
+            <input type="radio" name="{{yesname}}" disabled="disabled"
+                   aria-label="{{alabelyes}}"/>{{/pdf}} {{{stryes}}}</span>
     {{/yesselected}}
     {{#noselected}}
-    {{#pdf}}&nbsp; &#10003;{{/pdf}}<span class="selected">{{^pdf}}<input type="radio" name="{{noname}}" checked="checked" disabled="disabled"/>{{/pdf}} {{{strno}}}</span>
+        {{#pdf}}&nbsp; &#10003;{{/pdf}}<span class="selected">{{^pdf}}
+        <input type="radio" name="{{noname}}" checked="checked" disabled="disabled"
+               aria-label="{{alabelno}}"/>{{/pdf}} {{{strno}}}</span>
     {{/noselected}}
     {{^noselected}}
-        <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}<input type="radio" name="{{noname}}" disabled="disabled"/>{{/pdf}} {{{strno}}}</span>
+        <span class="unselected"{{#pdf}} color="gray"{{/pdf}}>{{^pdf}}
+            <input type="radio" name="{{noname}}" disabled="disabled"
+                   aria-label="{{alabelno}}"/>{{/pdf}} {{{strno}}}</span>
     {{/noselected}}
 </div>
 <!-- End HTML generated from response_yesno template. -->