Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PR: Questions with checkboxes - Roles provided for the checkboxes are not valid #8467

Merged
merged 5 commits into from
Jun 27, 2024
Merged

PR: Questions with checkboxes - Roles provided for the checkboxes are not valid #8467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad70f9f
work for the https://github.com/surveyjs/survey-library/issues/8460
dmitry-kurmanov Jun 25, 2024
6a83fd5
Merge branch 'master' into a11y/8460-checkboxes
dmitry-kurmanov Jun 25, 2024
4ea234c
Merge branch 'master' into a11y/8460-checkboxes
dmitry-kurmanov Jun 26, 2024
9789cac
work for the https://github.com/surveyjs/survey-library/issues/8460
dmitry-kurmanov Jun 26, 2024
07758a8
Merge branch 'master' into a11y/8460-checkboxes
dmitry-kurmanov Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/questions/checkbox-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<input type="checkbox" role="option" [name]="question.name+model.id" [id]="question.getItemId(model)" [class]="question.cssClasses.itemControl"
<input type="checkbox" [name]="question.name+model.id" [id]="question.getItemId(model)" [class]="question.cssClasses.itemControl" [required]="question.hasRequiredError()"
[disabled]="!question.getItemEnabled(model)" [readonly]="question.isReadOnlyAttr" [checked]="question.isItemSelected(model)" [value]="model.value" (change)="onChange($event)"/>
<ng-content></ng-content>
2 changes: 1 addition & 1 deletion packages/survey-vue3-ui/src/CheckboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<label :class="question.getLabelClass(item)">
<input
type="checkbox"
role="option"
:name="question.name + item.id"
:checked="question.isItemSelected(item)"
@input="
Expand All @@ -16,6 +15,7 @@
:disabled="!question.getItemEnabled(item)"
:readonly="question.isReadOnlyAttr"
:class="question.cssClasses.itemControl"
:required="question.hasRequiredError()"
/><span
v-if="question.cssClasses.materialDecorator"
:class="question.cssClasses.materialDecorator"
Expand Down
3 changes: 2 additions & 1 deletion src/knockout/templates/question-checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,11 @@
<!-- /ko -->
</fieldset>
</script>

<script type="text/html" id="survey-checkbox-item">
<div role="presentation" data-bind="css: question.getItemClass($data)">
<label data-bind="css: question.getLabelClass($data)">
<input type="checkbox" role="option" data-bind="attr: {name: question.name + id, id: question.getItemId($data), readonly: question.isReadOnlyAttr}, value: $data.value, checked: question.isItemSelected($data), event: { change: (i, e) => { question.clickItemHandler($data, e.target.checked); } }, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"/>
<input type="checkbox" data-bind="attr: {name: question.name + id, id: question.getItemId($data), readonly: question.isReadOnlyAttr, required: question.hasRequiredError()}, value: $data.value, checked: question.isItemSelected($data), event: { change: (i, e) => { question.clickItemHandler($data, e.target.checked); } }, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"/>
<!-- ko if: question.cssClasses.materialDecorator -->
<span data-bind="css: question.cssClasses.materialDecorator">
<!-- ko if: question.itemSvgIcon -->
Expand Down
2 changes: 1 addition & 1 deletion src/question.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2194,7 +2194,7 @@ export class Question extends SurveyElement<Question>
}
}
}
protected hasRequiredError(): boolean {
public hasRequiredError(): boolean {
return this.isRequired && this.isEmpty();
}
private validatorRunner: ValidatorRunner;
Expand Down
5 changes: 4 additions & 1 deletion src/question_checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,7 +659,10 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase {
return true;
}
public get a11y_input_ariaRole(): string {
return "listbox";
return "group";
}
public get a11y_input_ariaRequired(): "true" | "false" {
return null;
}
// EO a11y
}
Expand Down
2 changes: 1 addition & 1 deletion src/question_expression.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export class QuestionExpressionModel extends Question {
protected canCollectErrors(): boolean {
return true;
}
protected hasRequiredError(): boolean {
public hasRequiredError(): boolean {
return false;
}
private createRunner(): ExpressionRunner {
Expand Down
2 changes: 1 addition & 1 deletion src/react/reactquestion_checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ export class SurveyQuestionCheckboxItem extends ReactSurveyElement {
<input
className={this.cssClasses.itemControl}
type="checkbox"
role="option"
name={this.question.name + this.item.id}
value={this.item.value}
id={id}
Expand All @@ -222,6 +221,7 @@ export class SurveyQuestionCheckboxItem extends ReactSurveyElement {
readOnly={this.question.isReadOnlyAttr}
checked={isChecked}
onChange={this.handleOnChange}
required={this.question.hasRequiredError()}
/>
{
this.cssClasses.materialDecorator ?
Expand Down
4 changes: 2 additions & 2 deletions src/vue/checkboxitem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<div role="presentation" :class="question.getItemClass(item)">
<label :class="question.getLabelClass(item)">
<input
type="checkbox" role="option" :name="question.name+item.id"
type="checkbox" :name="question.name+item.id"
:checked="question.isItemSelected(item)"
@input="
(e) => {
question.clickItemHandler(item, e.target.checked);
}
"
:value="item.value"
:value="item.value" :required="question.hasRequiredError()"
:id="question.getItemId(item)" :disabled="!question.getItemEnabled(item)" :readonly="question.isReadOnlyAttr"
:class="question.cssClasses.itemControl" /><span
v-if="question.cssClasses.materialDecorator" :class="question.cssClasses.materialDecorator">
Expand Down
2 changes: 2 additions & 0 deletions tests/markup/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,8 @@ function clearAttributes(el: Element, removeIds = false) {
}
if(el.hasAttribute("readonly"))
el.setAttribute("readonly", "");
if(el.hasAttribute("required"))
el.setAttribute("required", "");
if (el.hasAttribute("disabled"))
el.setAttribute("disabled", "");
if(el.hasAttribute("ng-reflect-value")) {
Expand Down
12 changes: 6 additions & 6 deletions tests/markup/snapshots/checkbox-columns-head-foot.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_qcbc sv_qcbx" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv_qcbc sv_qcbx" role="group">
<legend class="sv-hidden">Question title</legend>
<div class="sv_q_checkbox sv_q_checkbox_selectall" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameselectall" role="option" type="checkbox" value="">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameselectall" type="checkbox" value="">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">Select All</span>
</span>
Expand All @@ -12,7 +12,7 @@
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item1</span>
</span>
Expand All @@ -22,7 +22,7 @@
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item2</span>
</span>
Expand All @@ -32,15 +32,15 @@
</div>
<div class="sv_q_checkbox sv_q_checkbox_none" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_3" name="namenone" role="option" type="checkbox" value="none">
<input class="sv_q_checkbox_control_item" id="testid0i_3" name="namenone" type="checkbox" value="none">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">None</span>
</span>
</label>
</div>
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_4" name="nameother" role="option" type="checkbox" value="other">
<input class="sv_q_checkbox_control_item" id="testid0i_4" name="nameother" type="checkbox" value="other">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">Other (describe)</span>
</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/checkbox-columns-mobile.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_qcbc sv_qcbx" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv_qcbc sv_qcbx" role="group">
<legend class="sv-hidden">Question title</legend>
<div class="sv_q_checkbox sv-q-col-2" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item1</span>
</span>
</label>
</div>
<div class="sv_q_checkbox sv-q-col-2" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item2</span>
</span>
</label>
</div>
<div class="sv_q_checkbox sv-q-col-2" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem3" role="option" type="checkbox" value="item3">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item3</span>
</span>
Expand Down
12 changes: 6 additions & 6 deletions tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_qcbc sv_qcbx" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv_qcbc sv_qcbx" role="group">
<legend class="sv-hidden">Question title</legend>
<div>
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox sv_q_checkbox_selectall" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameselectall" role="option" type="checkbox" value="">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameselectall" type="checkbox" value="">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">Select All</span>
</span>
</label>
</div>
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv_q_checkbox_control_item" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item2</span>
</span>
</label>
</div>
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_4" name="nameother" role="option" type="checkbox" value="other">
<input class="sv_q_checkbox_control_item" id="testid0i_4" name="nameother" type="checkbox" value="other">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">Other (describe)</span>
</span>
Expand All @@ -30,15 +30,15 @@
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item1</span>
</span>
</label>
</div>
<div class="sv_q_checkbox sv_q_checkbox_none" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_3" name="namenone" role="option" type="checkbox" value="none">
<input class="sv_q_checkbox_control_item" id="testid0i_3" name="namenone" type="checkbox" value="none">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">None</span>
</span>
Expand Down
6 changes: 3 additions & 3 deletions tests/markup/snapshots/checkbox-columns.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_qcbc sv_qcbx" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv_qcbc sv_qcbx" role="group">
<legend class="sv-hidden">Question title</legend>
<div>
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv_q_checkbox_control_item" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item1</span>
</span>
Expand All @@ -14,7 +14,7 @@
<div class="sv_q_select_column sv-q-column-2" role="presentation">
<div class="sv_q_checkbox" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv_q_checkbox_control_item" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-viewer">item2</span>
</span>
Expand Down
6 changes: 3 additions & 3 deletions tests/markup/snapshots/checkbox-comment-V2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="listbox">
<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
<legend class="sv-hidden">name</legend>
<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
<label class="sd-selectbase__label">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sd-checkbox__decorator sd-item__decorator">
<svg class="sd-checkbox__svg sd-item__svg">
<use xlink:href="#icon-v2check" class="">
Expand All @@ -19,6 +19,6 @@
<div>
<span class="sv-string-viewer">Other (describe)</span>
</div>
<textarea aria-label="name" aria-required="false" class="sd-comment sd-input sd-selectbase__other" id="testid0_comment" placeholder="" style="resize:both;">
<textarea aria-label="name" class="sd-comment sd-input sd-selectbase__other" id="testid0_comment" placeholder="" style="resize:both;">
</textarea>
</div>
8 changes: 4 additions & 4 deletions tests/markup/snapshots/checkbox-disabled.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_qcbc sv_qcbx" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv_qcbc sv_qcbx" role="group">
<legend class="sv-hidden">Question title</legend>
<div class="sv_q_checkbox sv-q-col-1" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-editor" contenteditable="true">item1</span>
</span>
</label>
</div>
<div class="sv_q_checkbox sv-q-col-1" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_1" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-editor" contenteditable="true">item2</span>
</span>
</label>
</div>
<div class="sv_q_checkbox sv-q-col-1" role="presentation">
<label class="sv_q_checkbox_label">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_2" name="nameitem3" role="option" type="checkbox" value="item3">
<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
<span class="sv_q_checkbox_control_label">
<span class="sv-string-editor" contenteditable="true">item3</span>
</span>
Expand Down
6 changes: 3 additions & 3 deletions tests/markup/snapshots/checkbox-modern.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-selectbase" role="listbox">
<fieldset aria-invalid="false" aria-label="Question title" class="sv-selectbase" role="group">
<legend class="sv-hidden">Question title</legend>
<div class="sv-checkbox sv-checkbox--allowhover sv-item sv-q-col-1 sv-selectbase__item" role="presentation">
<label class="sv-selectbase__label">
<input class="sv-item__control sv-visuallyhidden" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sv-item__control sv-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sv-checkbox__decorator sv-item__decorator sv-selectbase__decorator">
<svg class="sv-checkbox__svg sv-item__svg">
<use xlink:href="#icon-moderncheck" class="">
Expand All @@ -16,7 +16,7 @@
</div>
<div class="sv-checkbox sv-checkbox--allowhover sv-item sv-q-col-1 sv-selectbase__item" role="presentation">
<label class="sv-selectbase__label">
<input class="sv-item__control sv-visuallyhidden" id="testid0i_1" name="nameitem2" role="option" type="checkbox" value="item2">
<input class="sv-item__control sv-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
<span class="sv-checkbox__decorator sv-item__decorator sv-selectbase__decorator">
<svg class="sv-checkbox__svg sv-item__svg">
<use xlink:href="#icon-moderncheck" class="">
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/checkbox-other-V2.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="listbox">
<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
<legend class="sv-hidden">name</legend>
<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
<label class="sd-selectbase__label">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" role="option" type="checkbox" value="item1">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
<span class="sd-checkbox__decorator sd-item__decorator">
<svg class="sd-checkbox__svg sd-item__svg">
<use xlink:href="#icon-v2check" class="">
Expand All @@ -16,7 +16,7 @@
</div>
<div class="sd-checkbox sd-checkbox--checked sd-item sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
<label class="sd-selectbase__label">
<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameother" role="option" type="checkbox" value="other">
<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameother" type="checkbox" value="other">
<span class="sd-checkbox__decorator sd-item__decorator">
<svg class="sd-checkbox__svg sd-item__svg">
<use xlink:href="#icon-v2check" class="">
Expand All @@ -29,7 +29,7 @@
</label>
</div>
<div class="form-group sd-question__comment-area">
<textarea aria-label="name" aria-required="false" class="sd-comment sd-input sd-selectbase__other" id="testid0_other" placeholder="" style="resize:both;">
<textarea aria-label="name" class="sd-comment sd-input sd-selectbase__other" id="testid0_other" placeholder="" style="resize:both;">
</textarea>
</div>
</fieldset>
Loading
Loading