Questionnaire/Accessibility: Radio buttons & Yes/No missing group label (#511)

emanoylov · Emanoil Manoylov · web-flow · commit b2ee5bd7b7b1 · 2024-02-23T12:03:47.000-05:00
Co-authored-by: Emanoil Manoylov &lt;em22699@open.ac.uk&gt;
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. -->

Original file line number	Diff line number	Diff line change
`@@ -122,6 +122,9 @@ protected function question_survey_display($response, $dependants=[], $blankques`
`122`	`122`	`}`
`123`	`123`	`$contents = questionnaire_choice_values($choice->content);`
`124`	`124`	`$radio->label = $value.format_text($contents->text, FORMAT_HTML, ['noclean' => true]).$contents->image;`
	`125`	`+ if (!empty($this->qlegend)) {`
	`126`	`+ $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");`
	`127`	`+ }`
`125`	`128`	`} else { // Radio button with associated !other text field.`
`126`	`129`	`$othertext = $choice->other_choice_display();`
`127`	`130`	`$cname = choice::id_other_choice_name($id);`
`@@ -143,6 +146,10 @@ protected function question_survey_display($response, $dependants=[], $blankques`
`143`	`146`	`$radio->ovalue = format_string(stripslashes($odata));`
`144`	`147`	`}`
`145`	`148`	`$radio->olabel = 'Text for '.format_text($othertext, FORMAT_HTML, ['noclean' => true]);`
	`149`	`+ if (!empty($this->qlegend)) {`
	`150`	`+ $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");`
	`151`	`+ $radio->aolabel = strip_tags("{$this->qlegend} {$radio->olabel}");`
	`152`	`+ }`
`146`	`153`	`}`
`147`	`154`	`$choicetags->qelements[] = (object)['choice' => $radio];`
`148`	`155`	`}`
`@@ -164,6 +171,9 @@ protected function question_survey_display($response, $dependants=[], $blankques`
`164`	`171`	`}`
`165`	`172`	`$content = get_string('noanswer', 'questionnaire');`
`166`	`173`	`$radio->label = format_text($content, FORMAT_HTML, ['noclean' => true]);`
	`174`	`+ if (!empty($this->qlegend)) {`
	`175`	`+ $radio->alabel = strip_tags("{$this->qlegend} {$radio->label}");`
	`176`	`+ }`
`167`	`177`
`168`	`178`	`$choicetags->qelements[] = (object)['choice' => $radio];`
`169`	`179`	`}`
`@@ -213,6 +223,9 @@ protected function response_survey_display($response) {`
`213`	`223`	`} else {`
`214`	`224`	`$chobj->content = ($choice->content === '' ? $id : format_text($choice->content, FORMAT_HTML, ['noclean' => true]));`
`215`	`225`	`}`
	`226`	`+ if (!empty($this->qlegend)) {`
	`227`	`+ $chobj->alabel = strip_tags("{$this->qlegend} {$chobj->content}");`
	`228`	`+ }`
`216`	`229`	`$resptags->choices[] = $chobj;`
`217`	`230`	`}`
`218`	`231`
Original file line number	Diff line number	Diff line change
`@@ -154,6 +154,9 @@ protected function question_survey_display($response, $dependants=[], $blankques`
`154`	`154`	`if ($blankquestionnaire) {`
`155`	`155`	`$option->disabled = true;`
`156`	`156`	`}`
	`157`	`+ if (!empty($this->qlegend)) {`
	`158`	`+ $option->alabel = strip_tags("{$this->qlegend} {$option->label}");`
	`159`	`+ }`
`157`	`160`	`$choicetags->qelements->choice[] = $option;`
`158`	`161`	`}`
`159`	`162`	`// CONTRIB-846.`
`@@ -169,6 +172,9 @@ protected function question_survey_display($response, $dependants=[], $blankques`
`169`	`172`	`if (!$ischecked && !$blankquestionnaire) {`
`170`	`173`	`$option->checked = true;`
`171`	`174`	`}`
	`175`	`+ if (!empty($this->qlegend)) {`
	`176`	`+ $option->alabel = strip_tags("{$this->qlegend} {$option->label}");`
	`177`	`+ }`
`172`	`178`	`$choicetags->qelements->choice[] = $option;`
`173`	`179`	`}`
`174`	`180`	`// End CONTRIB-846.`
`@@ -201,6 +207,10 @@ protected function response_survey_display($response) {`
`201`	`207`	`if ($answer->value == 'n') {`
`202`	`208`	`$resptags->noselected = 1;`
`203`	`209`	`}`
	`210`	`+ if (!empty($this->qlegend)) {`
	`211`	`+ $resptags->alabelyes = strip_tags("{$this->qlegend} {$resptags->stryes}");`
	`212`	`+ $resptags->alabelno = strip_tags("{$this->qlegend} {$resptags->strno}");`
	`213`	`+ }`
`204`	`214`
`205`	`215`	`return $resptags;`
`206`	`216`	`}`