Skip to content

Commit

Permalink
PR: Questions with checkboxes - Roles provided for the checkboxes are…
Browse files Browse the repository at this point in the history 
… not valid (#8467)

* work for the #8460

* work for the #8460
  • Loading branch information
@dmitry-kurmanov
dmitry-kurmanov authored Jun 27, 2024
1 parent 1b94692 commit 49642c2
Show file tree
Hide file tree
Showing 27 changed files with 89 additions and 83 deletions.
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/questions/checkbox-item.component.html
View file
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
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
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
Original file line number Diff line number Diff line change
Expand Up @@ -2196,7 +2196,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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 49642c2

Please sign in to comment.