Fixed issue #18276: Changed HTML in arrays causing issues with JavaSc…

…ript and CSS. Revert "Fixed issue #18243: ARIA Attribute role on Array question not correct. (#2512)" This reverts commit d820a52.
LimeSurvey · Jul 27, 2022 · 167f2d4 · 167f2d4
1 parent 49e2d2f
commit 167f2d4
Show file tree

Hide file tree

Showing 36 changed files with 172 additions and 164 deletions.
diff --git a/application/views/survey/questions/answer/arrays/10point/answer.twig b/application/views/survey/questions/answer/arrays/10point/answer.twig
@@ -12,20 +12,22 @@
 <!-- Array 10 point choice -->
 
 <!-- answer -->
-<table class="{{ coreClass }} table table-bordered table-hover table-10-point-array" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
+<table class="{{ coreClass }} table table-bordered table-hover table-10-point-array" role="group" aria-labelledby="ls-question-text-{{ basename }}">
     <!-- Columns -->
     <colgroup class="col-responses">
         <col class="col-answers" style='width: {{ answerwidth }}%;' />
             {# columns/col.php #}
             {{ sColumns }}
     </colgroup>
-    <tbody>
+    <thead aria-hidden="true">
         <tr class="ls-heading">
                 {# rows/cell/thead.php #}
                 {{ sHeaders }}
         </tr>
-        {# rows/answer_row.php #}
-        {{ sRows }}
+    </thead>
+    <tbody>
+            {# rows/answer_row.php #}
+            {{ sRows }}
     </tbody>
 </table>
 

diff --git a/application/views/survey/questions/answer/arrays/10point/rows/answer_row.twig b/application/views/survey/questions/answer/arrays/10point/rows/answer_row.twig
@@ -12,7 +12,7 @@
 
 <!-- answer_row -->
 <tr id="javatbd{{ myfname }}" class="answers-list radio-list form-group {% if odd %}ls-odd{% else %}ls-even{% endif %} {% if error %} ls-error-mandatory has-error{% endif %}"  {{ sDisplayStyle }}  role="radiogroup"  aria-labelledby="answertext{{ myfname }}">
-    <td id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
+    <th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
         {{ processString(answertext) }}
 
         {# Value for expression manager javascript (use id) ; no need to submit #}
@@ -21,10 +21,10 @@
             'disabled' : true,
         }))
         }}
-    </td>
+    </th>
 
-    {# defined in rows/cells #}
-    {{ answer_tds }}
+        {# defined in rows/cells #}
+        {{ answer_tds }}
 
 </tr>
 <!-- end of answer_row -->
diff --git a/application/views/survey/questions/answer/arrays/10point/rows/cells/answer_td_input.twig b/application/views/survey/questions/answer/arrays/10point/rows/cells/answer_td_input.twig
@@ -15,11 +15,10 @@
         type="radio"
         name="{{ myfname }}"
         id="answer{{ myfname }}-{{ i }}"
-        aria-labelledby="label-{{ myfname }}-{{ i }}"
         value="{{ value }}"
         {{ CHECKED }}
      />
-    <label for="answer{{ myfname }}-{{ i }}"  class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ i }}">
+    <label for="answer{{ myfname }}-{{ i }}"  class="ls-label-xs-visibility">
         {{ processString(labelText) }}
     </label>
 </td>

diff --git a/application/views/survey/questions/answer/arrays/5point/answer.twig b/application/views/survey/questions/answer/arrays/5point/answer.twig
@@ -15,17 +15,23 @@
     <!-- Columns -->
     <colgroup class="col-responses">
         <col class="col-answers" style='width: {{ answerwidth }}%;' />
+
             {# columns/col.php #}
             {{ sColumns }}
 
     </colgroup>
-    <!-- No header or th : table used for presentation -->
+    <!-- Table headers -->
+    <thead aria-hidden="true">
+        <tr class="ls-heading"><!-- same class for repeat heading too -->
+
+                {# rows/cell/thead.php #}
+                {{ sHeaders }}
+
+        </tr>
+    </thead>
+    <!-- Table Body -->
     <tbody>
-    <tr class="ls-heading"><!-- same class for repeat heading too -->
-            {# rows/cell/thead.php #}
-            {{ sHeaders }}
 
-    </tr>
             {#rows/answer_row.php #}
             {{ sRows }}
 

diff --git a/application/views/survey/questions/answer/arrays/5point/rows/answer_row.twig b/application/views/survey/questions/answer/arrays/5point/rows/answer_row.twig
@@ -14,7 +14,7 @@
 
 <!-- answer_row -->
 <tr id="javatbd{{ myfname }}" class="answers-list radio-list form-group {% if odd %}ls-odd{% else %}ls-even{% endif %}{% if error %} ls-error-mandatory has-error{% endif %}" {{ sDisplayStyle }}  role="radiogroup"  aria-labelledby="answertext{{ myfname }}">
-    <td id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} hidden sr-only  {% endif %}}">
+    <th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} hidden sr-only  {% endif %}}">
         {{ processString(answertext) }}
 
         {# Value for expression manager javascript (use id) ; no need to submit #}
@@ -23,7 +23,7 @@
             'disabled' : true,
         }))
         }}
-    </td>
+    </th>
             {# defined in rows/cells/ #}
         {{ answer_tds }}
 

diff --git a/application/views/survey/questions/answer/arrays/5point/rows/cells/answer_td_input.twig b/application/views/survey/questions/answer/arrays/5point/rows/cells/answer_td_input.twig
@@ -15,11 +15,10 @@
         type="radio"
         name="{{ myfname }}"
         id="answer{{ myfname }}-{{ i }}"
-        aria-labelledby="label-{{ myfname }}-{{ i }}"
         value="{{ value }}"
         {{ CHECKED }}
      />
-    <label for="answer{{ myfname }}-{{ i }}" class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ i }}">
+    <label for="answer{{ myfname }}-{{ i }}" class="ls-label-xs-visibility">
         {{ processString(labelText) }}
     </label>
 </td>

diff --git a/application/views/survey/questions/answer/arrays/array/dropdown/answer.twig b/application/views/survey/questions/answer/arrays/array/dropdown/answer.twig
@@ -12,7 +12,7 @@
 <!-- Array -->
 
 <!-- answer -->
-<table class="{{ coreClass }} table table-bordered table-hover table-array-dropdown" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
+<table class="{{ coreClass }} table table-bordered table-hover table-array-dropdown" role="group" aria-labelledby="ls-question-text-{{ basename }}">
     <colgroup class="col-responses">
         <col class="col-answers" style='width: {{ answerwidth }}%;' />
         <col class="odd" style='width: {{ columnswidth }}%;' />
@@ -21,6 +21,7 @@
         {% endif %}
     </colgroup>
     <tbody>
+
             {# rows/answer_row.php #}
             {{ sRows }}
             {% for aRow in aRows %}

diff --git a/application/views/survey/questions/answer/arrays/array/dropdown/rows/answer_row.twig b/application/views/survey/questions/answer/arrays/array/dropdown/rows/answer_row.twig
@@ -13,7 +13,7 @@
  */
 #}
 <tr id="javatbd{{ myfname }}" class="question-item answer-item dropdown-item {% if odd %} ls-odd {% else %} ls-even{% endif %}{% if error %} ls-error-mandatory has-error{% endif %}" >
-    <td class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
+    <th class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
         <label for="answer{{ myfname }}">
             {{ processString(answertext) }}
         </label>
@@ -24,7 +24,7 @@
             'disabled' : true,
         }))
         }}
-    </td>
+    </th>
     <td>
         <select class="form-control" name="{{ myfname }}" id="answer{{ myfname }}">
             {% for option in options %}
@@ -35,6 +35,6 @@
         </select>
     </td>
     {% if right_exists %}
-        <td class='answertextright information-item'>{{ processString(answertextright) }}</td>
+        <th class='answertextright information-item'>{{ processString(answertextright) }}</th>
     {% endif %}
 </tr>
diff --git a/application/views/survey/questions/answer/arrays/array/no_dropdown/answer.twig b/application/views/survey/questions/answer/arrays/array/no_dropdown/answer.twig
@@ -14,28 +14,32 @@
 <!-- Array -->
 
 <!-- answer -->
-<table class="{{ coreClass }} table table-bordered table-hover table-array-radio" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
+<table class="{{ coreClass }} table table-bordered table-hover table-array-radio" role="group" aria-labelledby="ls-question-text-{{ basename }}">
     <colgroup class="col-responses">
         <col class="col-answers"  style='width: {{ answerwidth }}%;' />
         {# columns/col.php #}
         {% for aColumn in aColumns %}
             <col class="{{ aColumn.class }}" style='width: {{ aColumn.cellwidth }}%'/>
         {% endfor %}
     </colgroup>
-    <tbody>
+    <thead aria-hidden="true">
         <tr class="ls-heading">
             {{sHeaders}}
         </tr>
+    </thead>
+    <tbody>
          {% if anscount==0 %}
             <tr>
-                <td class="answertext">
+                <th class="answertext">
                      {{ gT('Error: This question has no answers.') }}
-                </td>
+                </th>
             </tr>
          {% endif %}
-        {% for aRow in aRows %}
-            {% include aRow.template with aRow.content only %}
-        {% endfor %}
+
+            {% for aRow in aRows %}
+                {% include aRow.template with aRow.content only %}
+            {% endfor %}
+
     </tbody>
 </table>
 <!-- end of answer -->
diff --git a/application/views/survey/questions/answer/arrays/array/no_dropdown/rows/answer_row.twig b/application/views/survey/questions/answer/arrays/array/no_dropdown/rows/answer_row.twig
@@ -14,7 +14,7 @@
 <!-- answer_row -->
 <tr id="javatbd{{ myfname }}" class="answers-list radio-list {% if odd %} ls-odd{% else %} ls-even{% endif %}{%
  if error %} ls-error-mandatory has-error{% endif %}" role="radiogroup"  aria-labelledby="answertext{{ myfname }}">
-    <td id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
+    <th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
         {{ processString(answertext) }}
 
         {# Value for expression manager javascript (use id) ; no need to submit #}
@@ -23,15 +23,15 @@
             'disabled' : true,
         }))
         }}
-    </td>
+    </th>
 
         {% for aAnswerColumn in aAnswerColumns %}
             {% include 'survey/questions/answer/arrays/array/no_dropdown/rows/cells/answer_td.twig' with aAnswerColumn only %}
         {% endfor %}
         {# Defined in answer_td view #}
 
     {% if right_exists %}
-        <td class='answertextright information-item{% if answerwidth==0 %} sr-only{% endif %}'>{{ processString(answertextright) }}</td>
+        <th class='answertextright information-item{% if answerwidth==0 %} sr-only{% endif %}'>{{ processString(answertextright) }}</th>
     {% endif %}
 
         {# No answer should come after right text at bipolar question #}

diff --git a/application/views/survey/questions/answer/arrays/array/no_dropdown/rows/cells/answer_td.twig b/application/views/survey/questions/answer/arrays/array/no_dropdown/rows/cells/answer_td.twig
@@ -17,10 +17,9 @@
         name="{{ myfname }}"
         value="{{ ld }}"
         id="answer{{ myfname }}-{{ ld }}"
-        aria-labelledby="label-{{ myfname }}-{{ ld }}"
         {{ CHECKED }}
     />
-    <label for="answer{{ myfname }}-{{ ld }}" class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ ld }}">
+    <label for="answer{{ myfname }}-{{ ld }}" class="ls-label-xs-visibility">
         {{ processString(label) }}
     </label>
 </td>

diff --git a/application/views/survey/questions/answer/arrays/column/answer.twig b/application/views/survey/questions/answer/arrays/column/answer.twig
@@ -10,42 +10,45 @@
  <!-- Array by column -->
 
  <!-- answer -->
-<table class="{{ coreClass }} table table-bordered table-col-hover" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
+<table class="{{ coreClass }} table table-bordered table-col-hover" role="group" aria-labelledby="ls-question-text-{{ basename }}">
     <colgroup>
         <col class="col-answers" style='width: {{ answerwidth }}%;' />
         {% for i, question in aQuestions %}
             <col
                 class="answers-list radio-list {% if i % 2 %}ls-odd{% else %}ls-even{% endif %} {% if question.errormandatory %} ls-error-mandatory has-error{% endif %}"
                 style='width: {{ cellwidth }}%;'
+                role="radiogroup"
+                aria-labelledby="answertext{{ question.myfname }}"
                 >
+                <!-- @todo : control if radiogroup can be used in col : https://www.w3.org/TR/wai-aria/roles -->
         {% endfor %}
     </colgroup>
-    <!-- The global concept is hard to understand : must control if aria-labelledby for radiogroup is OK and if we can add aria-hidden here -->
-    <tbody>
+    <thead><!-- The global concept is hard to understand : must control if aria-labelledby for radiogroup is OK and if we can add aria-hidden here -->
         <tr class='ls-heading'><!-- unsure for ls-heading class here -->
             <td></td>
             {% for i, question in aQuestions %}
-                <td id="answertext{{ question.myfname }}" class="answertext control-label {% if question.errormandatory %} has-error error-mandatory{% endif %}">
+                <th id="answertext{{ question.myfname }}" class="answertext control-label {% if question.errormandatory %} has-error error-mandatory{% endif %}">
                     {{ processString(question.question) }}
-                </td>
+                </th>
             {% endfor %}
         </tr>
+    </thead>
+    <tbody>
         {% for key, ansrow in labels %}
-            <tr id="javatbd{{ basename }}-{{ ansrow.code }}" class="answers-list">
-                <td id="label-{{ ansrow.code }}" class="answertext{% if answerwidth==0 %} sr-only{% endif %}">
+            <tr id="javatbd{{ aQuestions[key].myfname }}" class="answers-list">
+                <th id="label-{{ ansrow.code }}" class="answertext{% if answerwidth==0 %} sr-only{% endif %}">
                     {{ ansrow.answer }}
-                </td>
+                </th>
                 {% for i, ld in anscode %}
                     <td class="answer_cell_{{ ld }}{% if ansrow.code=="" %} noanswer-item{% endif %} answer-item radio-item">
                             <input
                                 type="radio"
                                 name="{{ aQuestions[i].myfname }}"
                                 value="{{ ansrow.code }}"
                                 id="answer{{ aQuestions[i].myfname }}-{{ ansrow.code }}"
-                                aria-labelledby="label-{{ ansrow.code }} label-{{ aQuestions[i].myfname }}-{{ ansrow.code }}"
                                 {{ checked[ansrow.code][ld] }}
                                  />
-                                <label class="ls-label-xs-visibility " for="answer{{ aQuestions[i].myfname }}-{{ ansrow.code }}"  id="label-{{ aQuestions[i].myfname }}-{{ ansrow.code }}">
+                                <label class="ls-label-xs-visibility " for="answer{{ aQuestions[i].myfname }}-{{ ansrow.code }}">
                                     {{ processString(aQuestions[i].question) }}
                                 </label>
                     </td>