Questionnaire\Accessibility\Numeric: Instructions not programmatically associated with field #672028 (#496)

Co-authored-by: tai.letan <[email protected]>

Author: tailetan

templates/question_numeric.mustache

@@ -29,23 +29,37 @@
 
     Example context (json):
     {
-        "qelements": {
-            "choice": {
-                "onkeypress": "dosomething()",
-                "size": 30,
-                "name": "choiceid1",
-                "maxlength": 50,
-                "value": "473",
-                "id": "choiceid1"
-            }
-        }
+        "qelements": [
+                {
+                    "choice": {
+                    "onkeypress": "dosomething()",
+                    "size": 30,
+                    "name": "choiceid1",
+                    "instruction": "Do not use thousands separators.",
+                    "maxlength": 50,
+                    "value": "473",
+                    "id": "choiceid1"
+                    }
+                },
+                {
+                    "choice": {
+                    "onkeypress": "dosomething()",
+                    "size": 20,
+                    "name": "choiceid2",
+                    "instruction": "Do not use thousands separators.",
+                    "maxlength": 50,
+                    "value": "473",
+                    "id": "choiceid2"
+                    }
+                }
+        ]
     }
     }}
 <!-- Begin HTML generated from question_numeric template. -->
 {{#qelements}}
-{{#choice}}
-    {{#instruction}}<span style="font-style: italic; font-size: 90%">{{.}}<br /></span>{{/instruction}}
-<input {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} type="text" size="{{choice.size}}" name="{{choice.name}}" {{#choice.maxlength}}maxlength="{{choice.maxlength}}"{{/choice.maxlength}} value="{{choice.value}}" id="{{choice.id}}" />
-{{/choice}}
+    {{#choice}}
+        {{#instruction}}<span id="{{choice.id}}-instruction" style="font-style: italic; font-size: 90%">{{.}}<br /></span>{{/instruction}}
+        <input {{#choice.onkeypress}}onkeypress="{{.}}"{{/choice.onkeypress}} aria-describedby="{{choice.id}}-instruction" type="text" size="{{choice.size}}" name="{{choice.name}}" {{#choice.maxlength}}maxlength="{{choice.maxlength}}"{{/choice.maxlength}} value="{{choice.value}}" id="{{choice.id}}" />
+    {{/choice}}
 {{/qelements}}
 <!-- End HTML generated from question_numeric template. -->

tests/behat/numeric_question_digits.feature

@@ -6,29 +6,29 @@ Feature: Numeric questions can specify a maximum number of digits, and minimum n
 
   Background: Add a numeric question to a questionnaire with a max digits and nb decimals specified
     Given the following "users" exist:
-      | username | firstname | lastname | email |
-      | teacher1 | Teacher | 1 | teacher1@example.com |
-      | student1 | Student | 1 | student1@example.com |
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
     And the following "courses" exist:
       | fullname | shortname | category |
-      | Course 1 | C1 | 0 |
+      | Course 1 | C1        | 0        |
     And the following "course enrolments" exist:
-      | user | course | role |
-      | teacher1 | C1 | editingteacher |
-      | student1 | C1 | student |
+      | user     | course | role           |
+      | teacher1 | C1     | editingteacher |
+      | student1 | C1     | student        |
     And the following "activities" exist:
-      | activity | name | description | course | idnumber |
-      | questionnaire | Test questionnaire | Test questionnaire description | C1 | questionnaire0 |
+      | activity      | name               | description                    | course | idnumber       |
+      | questionnaire | Test questionnaire | Test questionnaire description | C1     | questionnaire0 |
     And I log in as "teacher1"
     And I am on "Course 1" course homepage
     And I follow "Test questionnaire"
     And I navigate to "Questions" in current page administration
     And I add a "Numeric" question and I fill the form with:
-      | Question Name | Q1 |
-      | Yes | y |
-      | Max. digits allowed | 6 |
-      | Nb of decimal digits | 2 |
-      | Question Text | Enter no more than six digits including the decimal point |
+      | Question Name        | Q1                                                        |
+      | Yes                  | y                                                         |
+      | Max. digits allowed  | 6                                                         |
+      | Nb of decimal digits | 2                                                         |
+      | Question Text        | Enter no more than six digits including the decimal point |
     Then I should see "position 1"
     And I should see "[Numeric] (Q1)"
     And I should see "Enter no more than six digits including the decimal point"
@@ -49,3 +49,11 @@ Feature: Numeric questions can specify a maximum number of digits, and minimum n
     And I should see "Test questionnaire"
     And I should see "Enter no more than six digits including the decimal point"
     And I should see "1.2345"
+
+  @javascript
+  Scenario: Test question instruction accessibility.
+    Given I am on the "Course 1" course page logged in as admin
+    And I follow "Test questionnaire"
+    When I navigate to "Answer the questions..." in current page administration
+    Then "span[id^='numerical']" "css_element" should exist
+    And "input[aria-describedby^='numerical']" "css_element" should exist