Skip to content

Commit

Permalink
Fixed issue #18243: ARIA Attribute role on Array question not correct. (
Browse files Browse the repository at this point in the history 
#2512)
  • Loading branch information
@Shnoulle
Shnoulle committed Jul 22, 2022
1 parent 738132d commit d820a52
Show file tree
Hide file tree
Showing 36 changed files with 164 additions and 172 deletions.
10 changes: 4 additions & 6 deletions application/views/survey/questions/answer/arrays/10point/answer.twig
View file
Expand Up @@ -12,22 +12,20 @@
<!-- Array 10 point choice -->

<!-- answer -->
<table class="{{ coreClass }} table table-bordered table-hover table-10-point-array" role="group" aria-labelledby="ls-question-text-{{ basename }}">
<table class="{{ coreClass }} table table-bordered table-hover table-10-point-array" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
<!-- Columns -->
<colgroup class="col-responses">
<col class="col-answers" style='width: {{ answerwidth }}%;' />
{# columns/col.php #}
{{ sColumns }}
</colgroup>
<thead aria-hidden="true">
<tbody>
<tr class="ls-heading">
{# rows/cell/thead.php #}
{{ sHeaders }}
</tr>
</thead>
<tbody>
{# rows/answer_row.php #}
{{ sRows }}
{# rows/answer_row.php #}
{{ sRows }}
</tbody>
</table>

Expand Down
8 changes: 4 additions & 4 deletions application/views/survey/questions/answer/arrays/10point/rows/answer_row.twig
View file
Expand Up @@ -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 }}">
<th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
<td 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 #}
Expand All @@ -21,10 +21,10 @@
'disabled' : true,
}))
}}
</th>
</td>

{# defined in rows/cells #}
{{ answer_tds }}
{# defined in rows/cells #}
{{ answer_tds }}

</tr>
<!-- end of answer_row -->
3 changes: 2 additions & 1 deletion application/views/survey/questions/answer/arrays/10point/rows/cells/answer_td_input.twig
View file
Expand Up @@ -15,10 +15,11 @@
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">
<label for="answer{{ myfname }}-{{ i }}" class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ i }}">
{{ processString(labelText) }}
</label>
</td>
Expand Down
16 changes: 5 additions & 11 deletions application/views/survey/questions/answer/arrays/5point/answer.twig
View file
Expand Up @@ -15,23 +15,17 @@
<!-- Columns -->
<colgroup class="col-responses">
<col class="col-answers" style='width: {{ answerwidth }}%;' />

{# columns/col.php #}
{{ sColumns }}

</colgroup>
<!-- 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 -->
<!-- No header or th : table used for presentation -->
<tbody>
<tr class="ls-heading"><!-- same class for repeat heading too -->
{# rows/cell/thead.php #}
{{ sHeaders }}

</tr>
{#rows/answer_row.php #}
{{ sRows }}

Expand Down
4 changes: 2 additions & 2 deletions application/views/survey/questions/answer/arrays/5point/rows/answer_row.twig
View file
Expand Up @@ -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 }}">
<th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} hidden sr-only {% endif %}}">
<td 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 #}
Expand All @@ -23,7 +23,7 @@
'disabled' : true,
}))
}}
</th>
</td>
{# defined in rows/cells/ #}
{{ answer_tds }}

Expand Down
3 changes: 2 additions & 1 deletion application/views/survey/questions/answer/arrays/5point/rows/cells/answer_td_input.twig
View file
Expand Up @@ -15,10 +15,11 @@
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">
<label for="answer{{ myfname }}-{{ i }}" class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ i }}">
{{ processString(labelText) }}
</label>
</td>
Expand Down
3 changes: 1 addition & 2 deletions application/views/survey/questions/answer/arrays/array/dropdown/answer.twig
View file
Expand Up @@ -12,7 +12,7 @@
<!-- Array -->

<!-- answer -->
<table class="{{ coreClass }} table table-bordered table-hover table-array-dropdown" role="group" aria-labelledby="ls-question-text-{{ basename }}">
<table class="{{ coreClass }} table table-bordered table-hover table-array-dropdown" role="presentation" aria-labelledby="ls-question-text-{{ basename }}">
<colgroup class="col-responses">
<col class="col-answers" style='width: {{ answerwidth }}%;' />
<col class="odd" style='width: {{ columnswidth }}%;' />
Expand All @@ -21,7 +21,6 @@
{% endif %}
</colgroup>
<tbody>

{# rows/answer_row.php #}
{{ sRows }}
{% for aRow in aRows %}
Expand Down
6 changes: 3 additions & 3 deletions application/views/survey/questions/answer/arrays/array/dropdown/rows/answer_row.twig
View file
Expand Up @@ -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 %}" >
<th class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
<td class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
<label for="answer{{ myfname }}">
{{ processString(answertext) }}
</label>
Expand All @@ -24,7 +24,7 @@
'disabled' : true,
}))
}}
</th>
</td>
<td>
<select class="form-control" name="{{ myfname }}" id="answer{{ myfname }}">
{% for option in options %}
Expand All @@ -35,6 +35,6 @@
</select>
</td>
{% if right_exists %}
<th class='answertextright information-item'>{{ processString(answertextright) }}</th>
<td class='answertextright information-item'>{{ processString(answertextright) }}</td>
{% endif %}
</tr>
18 changes: 7 additions & 11 deletions application/views/survey/questions/answer/arrays/array/no_dropdown/answer.twig
View file
Expand Up @@ -14,32 +14,28 @@
<!-- Array -->

<!-- answer -->
<table class="{{ coreClass }} table table-bordered table-hover table-array-radio" role="group" aria-labelledby="ls-question-text-{{ basename }}">
<table class="{{ coreClass }} table table-bordered table-hover table-array-radio" role="presentation" 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>
<thead aria-hidden="true">
<tbody>
<tr class="ls-heading">
{{sHeaders}}
</tr>
</thead>
<tbody>
{% if anscount==0 %}
<tr>
<th class="answertext">
<td class="answertext">

This comment has been minimized.

Sign in to view

Copy link
@tpartner

tpartner Jul 26, 2022

Collaborator

Changing this HTML destroys many JavaScript workarounds and custom CSS. Why was it changed?

This comment has been minimized.

Sign in to view

Copy link
@Shnoulle

Shnoulle Jul 26, 2022

Author Collaborator

Issue reported by @c-schmitz

ARIA Attribute role on Array question not correct.

My 1st answer :

The table have : aria-labelledby="ls-question-text-49728X31X104" and role="group"
The head have the aria-hidden="true" because there are readable label
Each tr have the role="radiogroup" and aria-labelledby="answertext49728X31X104SQ01"
Each input have own label.

I can not do better …
Make clear proposition …

After more anlysis

See : https://wave.webaim.org/report#/https://demo.sondages.me/49728?lang=fr#

The alert is about «A group of check boxes or radio buttons is not enclosed in a fieldset.» but we have the role action : check https://www.w3.org/WAI/tutorials/forms/grouping/#associating-related-controls-with-wai-aria

See : https://gitlab.com/SondagesPro/SurveyThemes/skelvanilla/-/issues/39

PS : i test with ORCA on firefox … take time : but when navigate : we hear the good label and each only one time except the final one on each radio …
And with skelvanilla : we have the help and expression help by aria-describedby

You're right … it broke API but i don't have other clean solution …
{{ gT('Error: This question has no answers.') }}
</th>
</td>
</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 -->
6 changes: 3 additions & 3 deletions application/views/survey/questions/answer/arrays/array/no_dropdown/rows/answer_row.twig
View file
Expand Up @@ -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 }}">
<th id="answertext{{ myfname }}" class="answertext control-label{% if answerwidth==0 %} sr-only{% endif %}">
<td 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 #}
Expand All @@ -23,15 +23,15 @@
'disabled' : true,
}))
}}
</th>
</td>

{% 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 %}
<th class='answertextright information-item{% if answerwidth==0 %} sr-only{% endif %}'>{{ processString(answertextright) }}</th>
<td class='answertextright information-item{% if answerwidth==0 %} sr-only{% endif %}'>{{ processString(answertextright) }}</td>
{% endif %}

{# No answer should come after right text at bipolar question #}
Expand Down
3 changes: 2 additions & 1 deletion application/views/survey/questions/answer/arrays/array/no_dropdown/rows/cells/answer_td.twig
View file
Expand Up @@ -17,9 +17,10 @@
name="{{ myfname }}"
value="{{ ld }}"
id="answer{{ myfname }}-{{ ld }}"
aria-labelledby="label-{{ myfname }}-{{ ld }}"
{{ CHECKED }}
/>
<label for="answer{{ myfname }}-{{ ld }}" class="ls-label-xs-visibility">
<label for="answer{{ myfname }}-{{ ld }}" class="ls-label-xs-visibility" id="label-{{ myfname }}-{{ ld }}">
{{ processString(label) }}
</label>
</td>
Expand Down
23 changes: 10 additions & 13 deletions application/views/survey/questions/answer/arrays/column/answer.twig
View file
Expand Up @@ -10,45 +10,42 @@
<!-- Array by column -->

<!-- answer -->
<table class="{{ coreClass }} table table-bordered table-col-hover" role="group" aria-labelledby="ls-question-text-{{ basename }}">
<table class="{{ coreClass }} table table-bordered table-col-hover" role="presentation" 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>
<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 -->
<!-- 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>
<tr class='ls-heading'><!-- unsure for ls-heading class here -->
<td></td>
{% for i, question in aQuestions %}
<th id="answertext{{ question.myfname }}" class="answertext control-label {% if question.errormandatory %} has-error error-mandatory{% endif %}">
<td id="answertext{{ question.myfname }}" class="answertext control-label {% if question.errormandatory %} has-error error-mandatory{% endif %}">
{{ processString(question.question) }}
</th>
</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for key, ansrow in labels %}
<tr id="javatbd{{ aQuestions[key].myfname }}" class="answers-list">
<th id="label-{{ ansrow.code }}" class="answertext{% if answerwidth==0 %} sr-only{% endif %}">
<tr id="javatbd{{ basename }}-{{ ansrow.code }}" class="answers-list">
<td id="label-{{ ansrow.code }}" class="answertext{% if answerwidth==0 %} sr-only{% endif %}">
{{ ansrow.answer }}
</th>
</td>
{% 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 }}">
<label class="ls-label-xs-visibility " for="answer{{ aQuestions[i].myfname }}-{{ ansrow.code }}" id="label-{{ aQuestions[i].myfname }}-{{ ansrow.code }}">
{{ processString(aQuestions[i].question) }}
</label>
</td>
Expand Down

0 comments on commit d820a52

Please sign in to comment.