fixed #5226 (#5269)

surveyjs · Nov 22, 2022 · 78f939f · 78f939f
1 parent a44056c
commit 78f939f
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 78 deletions.
diff --git a/packages/survey-angular-ui/src/questions/checkbox-item.component.html b/packages/survey-angular-ui/src/questions/checkbox-item.component.html
@@ -1,5 +1,5 @@
-<input *ngIf="model == question.selectAllItem" type="checkbox" [name]="question.name" [id]="question.getItemId(model)" [attr.aria-describedby]="question.ariaDescribedBy" [class]="question.cssClasses.itemControl"
+<input *ngIf="model == question.selectAllItem" role="option" type="checkbox" [name]="question.name" [id]="question.getItemId(model)" [attr.aria-describedby]="question.ariaDescribedBy" [class]="question.cssClasses.itemControl"
   [disabled]="!question.getItemEnabled(model)" [checked]="question.isAllSelected" [value]="''" (change)="onSelectAllChange($event)"/>
-<input *ngIf="model != question.selectAllItem" type="checkbox" [name]="question.name" [id]="question.getItemId(model)" [attr.aria-describedby]="question.ariaDescribedBy" [class]="question.cssClasses.itemControl"
+<input *ngIf="model != question.selectAllItem" role="option" type="checkbox" [name]="question.name" [id]="question.getItemId(model)" [attr.aria-describedby]="question.ariaDescribedBy" [class]="question.cssClasses.itemControl"
   [disabled]="!question.getItemEnabled(model)" [checked]="question.isItemSelected(model)" [value]="model.value" (change)="onChange($event)"/>
 <ng-content></ng-content>
diff --git a/src/knockout/templates/question-checkbox.html b/src/knockout/templates/question-checkbox.html
@@ -50,10 +50,10 @@
   <div role="presentation" data-bind="css: question.getItemClass(item)">
       <label data-bind="css: question.getLabelClass(item), attr: { 'aria-label': question.getAriaItemLabel(item) }">
           <!-- ko if: item == question.selectAllItem -->
-          <input type="checkbox" value="" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checked: question.koAllSelected, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>
+          <input role="option" type="checkbox" value="" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checked: question.koAllSelected, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>
           <!-- /ko -->
           <!-- ko if: item != question.selectAllItem -->
-          <input type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checkedValue: item.value, checked: question.koValue, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>
+          <input role="option" type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checkedValue: item.value, checked: question.koValue, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>
           <!-- /ko -->
               <!-- ko if: question.koCss().materialDecorator -->
               <span data-bind="css: question.koCss().materialDecorator">

diff --git a/src/react/reactquestion_checkbox.tsx b/src/react/reactquestion_checkbox.tsx
@@ -89,7 +89,7 @@ export class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
   }
 
   protected getBody(cssClasses: any): JSX.Element {
-    if(this.question.blockedRow) {
+    if (this.question.blockedRow) {
       return <div className={cssClasses.rootRow}>{this.getItems(cssClasses, this.question.dataChoices)}</div>;
     }
     else return <>{this.getItems(cssClasses, this.question.bodyItems)}</>;
@@ -139,7 +139,7 @@ export class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
     });
     const survey = this.question.survey as SurveyModel;
     let wrappedItem = null;
-    if(!!survey) {
+    if (!!survey) {
       wrappedItem = ReactSurveyElementsWrapper.wrapItemValue(survey, renderedItem, this.question, item);
     }
     return wrappedItem ?? renderedItem;
@@ -226,6 +226,7 @@ export class SurveyQuestionCheckboxItem extends ReactSurveyElement {
         <label className={labelClass} aria-label={this.question.getAriaItemLabel(this.item)}>
           <input
             className={this.cssClasses.itemControl}
+            role="option"
             type="checkbox"
             name={this.question.name}
             value={this.item.value != "selectall" ? this.item.value : undefined}
@@ -239,12 +240,12 @@ export class SurveyQuestionCheckboxItem extends ReactSurveyElement {
           {
             this.cssClasses.materialDecorator ?
               <span className={this.cssClasses.materialDecorator}>
-                { this.question.itemSvgIcon ?
+                {this.question.itemSvgIcon ?
                   <svg
                     className={this.cssClasses.itemDecorator}
                   >
                     <use xlinkHref={this.question.itemSvgIcon}></use>
-                  </svg>:
+                  </svg> :
                   null
                 }
               </span> :

diff --git a/src/vue/checkboxitem.vue b/src/vue/checkboxitem.vue
@@ -1,36 +1,18 @@
 <template>
   <div role="presentation">
     <label :class="question.getLabelClass(item)" :aria-label="question.getAriaItemLabel(item)">
-      <input
-        v-if="item == question.selectAllItem"
-        type="checkbox"
-        :name="question.name"
-        :value="isAllSelected"
-        v-model="isAllSelected"
-        :id="question.getItemId(item)"
-        :disabled="!question.getItemEnabled(item)"
-        :aria-describedby="question.ariaDescribedBy"
-        :class="question.cssClasses.itemControl"
-      /><input
-        v-if="item != question.selectAllItem"
-        type="checkbox"
-        :name="question.name"
-        :value="item.value"
-        v-model="question.renderedValue"
-        :id="question.getItemId(item)"
-        :disabled="!question.getItemEnabled(item)"
-        :aria-describedby="question.ariaDescribedBy"
-        :class="question.cssClasses.itemControl"
-      /><span v-if="question.cssClasses.materialDecorator" :class="question.cssClasses.materialDecorator">
+      <input v-if="item == question.selectAllItem" role="option" type="checkbox" :name="question.name"
+        :value="isAllSelected" v-model="isAllSelected" :id="question.getItemId(item)"
+        :disabled="!question.getItemEnabled(item)" :aria-describedby="question.ariaDescribedBy"
+        :class="question.cssClasses.itemControl" /><input v-if="item != question.selectAllItem" role="option"
+        type="checkbox" :name="question.name" :value="item.value" v-model="question.renderedValue"
+        :id="question.getItemId(item)" :disabled="!question.getItemEnabled(item)"
+        :aria-describedby="question.ariaDescribedBy" :class="question.cssClasses.itemControl" /><span
+        v-if="question.cssClasses.materialDecorator" :class="question.cssClasses.materialDecorator">
         <svg v-if="question.itemSvgIcon" :class="question.cssClasses.itemDecorator">
-          <use
-            :xlink:href="question.itemSvgIcon"
-          ></use>
+          <use :xlink:href="question.itemSvgIcon"></use>
         </svg>
-      </span><span
-        v-if="!hideLabel"
-        :class="question.cssClasses.controlLabel"
-      >
+      </span><span v-if="!hideLabel" :class="question.cssClasses.controlLabel">
         <survey-string :locString="item.locText" />
       </span>
     </label>

diff --git a/tests/markup/snapshots/checkbox-columns-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
@@ -3,7 +3,7 @@
 	</legend>
 	<div class="sv_q_checkbox sv_q_checkbox_selectall" role="presentation">
 		<label aria-label="Select All" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" type="checkbox" value="">
+			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" role="option" type="checkbox" value="">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">Select All</span>
 			</span>
@@ -13,7 +13,7 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox" role="presentation">
 				<label aria-label="item1" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" type="checkbox" value="item1">
+					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" role="option" type="checkbox" value="item1">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">item1</span>
 					</span>
@@ -23,7 +23,7 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox" role="presentation">
 				<label aria-label="item2" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" type="checkbox" value="item2">
+					<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" role="option" type="checkbox" value="item2">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">item2</span>
 					</span>
@@ -33,15 +33,15 @@
 	</div>
 	<div class="sv_q_checkbox sv_q_checkbox_none" role="presentation">
 		<label aria-label="None" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_3" name="name" type="checkbox" value="none">
+			<input class="sv_q_checkbox_control_item" id="testid0i_3" name="name" role="option" 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 aria-label="Other (describe)" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_4" name="name" type="checkbox" value="other">
+			<input class="sv_q_checkbox_control_item" id="testid0i_4" name="name" role="option" type="checkbox" value="other">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">Other (describe)</span>
 			</span>

diff --git a/tests/markup/snapshots/checkbox-columns-mobile.snap.html b/tests/markup/snapshots/checkbox-columns-mobile.snap.html
@@ -3,23 +3,23 @@
 	</legend>
 	<div class="sv_q_checkbox sv-q-col-2" role="presentation">
 		<label aria-label="item1" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" type="checkbox" value="item1">
+			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" role="option" 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 aria-label="item2" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" type="checkbox" value="item2">
+			<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" role="option" 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 aria-label="item3" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" type="checkbox" value="item3">
+			<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" role="option" type="checkbox" value="item3">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">item3</span>
 			</span>

diff --git a/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
@@ -5,23 +5,23 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox sv_q_checkbox_selectall" role="presentation">
 				<label aria-label="Select All" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" type="checkbox" value="">
+					<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" role="option" 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 aria-label="item2" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" type="checkbox" value="item2">
+					<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" role="option" 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 aria-label="Other (describe)" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_4" name="name" type="checkbox" value="other">
+					<input class="sv_q_checkbox_control_item" id="testid0i_4" name="name" role="option" type="checkbox" value="other">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">Other (describe)</span>
 					</span>
@@ -31,15 +31,15 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox" role="presentation">
 				<label aria-label="item1" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" type="checkbox" value="item1">
+					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" role="option" 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 aria-label="None" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_3" name="name" type="checkbox" value="none">
+					<input class="sv_q_checkbox_control_item" id="testid0i_3" name="name" role="option" type="checkbox" value="none">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">None</span>
 					</span>

diff --git a/tests/markup/snapshots/checkbox-columns.snap.html b/tests/markup/snapshots/checkbox-columns.snap.html
@@ -5,7 +5,7 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox" role="presentation">
 				<label aria-label="item1" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" type="checkbox" value="item1">
+					<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" role="option" type="checkbox" value="item1">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">item1</span>
 					</span>
@@ -15,7 +15,7 @@
 		<div class="sv_q_select_column sv-q-column-2" role="presentation">
 			<div class="sv_q_checkbox" role="presentation">
 				<label aria-label="item2" class="sv_q_checkbox_label">
-					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" type="checkbox" value="item2">
+					<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" role="option" type="checkbox" value="item2">
 					<span class="sv_q_checkbox_control_label">
 						<span class="sv-string-viewer">item2</span>
 					</span>

diff --git a/tests/markup/snapshots/checkbox-modern.snap.html b/tests/markup/snapshots/checkbox-modern.snap.html
@@ -3,7 +3,7 @@
 	</legend>
 	<div class="sv-checkbox sv-checkbox--allowhover sv-item sv-q-col-1 sv-selectbase__item" role="presentation">
 		<label aria-label="item1" class="sv-selectbase__label">
-			<input class="sv-item__control sv-visuallyhidden" id="testid0i_0" name="name" type="checkbox" value="item1">
+			<input class="sv-item__control sv-visuallyhidden" id="testid0i_0" name="name" role="option" 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="">
@@ -17,7 +17,7 @@
 	</div>
 	<div class="sv-checkbox sv-checkbox--allowhover sv-item sv-q-col-1 sv-selectbase__item" role="presentation">
 		<label aria-label="item2" class="sv-selectbase__label">
-			<input class="sv-item__control sv-visuallyhidden" id="testid0i_1" name="name" type="checkbox" value="item2">
+			<input class="sv-item__control sv-visuallyhidden" id="testid0i_1" name="name" role="option" 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="">

diff --git a/tests/markup/snapshots/checkbox-other.snap.html b/tests/markup/snapshots/checkbox-other.snap.html
@@ -3,31 +3,31 @@
 	</legend>
 	<div class="sv_q_checkbox sv-q-col-1" role="presentation">
 		<label aria-label="item1" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" type="checkbox" value="item1">
+			<input class="sv_q_checkbox_control_item" id="testid0i_0" name="name" role="option" 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-1" role="presentation">
 		<label aria-label="item2" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" type="checkbox" value="item2">
+			<input class="sv_q_checkbox_control_item" id="testid0i_1" name="name" role="option" 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-1" role="presentation">
 		<label aria-label="item3" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" type="checkbox" value="item3">
+			<input class="sv_q_checkbox_control_item" id="testid0i_2" name="name" role="option" type="checkbox" value="item3">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">item3</span>
 			</span>
 		</label>
 	</div>
 	<div class="checked sv_q_checkbox sv-q-col-1" role="presentation">
 		<label aria-label="Other (describe)" class="sv_q_checkbox_label">
-			<input checked="" class="sv_q_checkbox_control_item" id="testid0i_3" name="name" type="checkbox" value="other">
+			<input checked="" class="sv_q_checkbox_control_item" id="testid0i_3" name="name" role="option" type="checkbox" value="other">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">Other (describe)</span>
 			</span>

diff --git a/tests/markup/snapshots/checkbox-readonly-selected.snap.html b/tests/markup/snapshots/checkbox-readonly-selected.snap.html
@@ -3,23 +3,23 @@
 	</legend>
 	<div class="checked sv_q_checkbox sv-q-col-1" role="presentation">
 		<label aria-label="item1" class="sv_q_checkbox_label">
-			<input checked="" class="sv_q_checkbox_control_item" disabled="" id="testid0i_0" name="name" type="checkbox" value="item1">
+			<input checked="" class="sv_q_checkbox_control_item" disabled="" id="testid0i_0" name="name" role="option" 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-1" role="presentation">
 		<label aria-label="item2" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_1" name="name" type="checkbox" value="item2">
+			<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_1" name="name" role="option" 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-1" role="presentation">
 		<label aria-label="item3" class="sv_q_checkbox_label">
-			<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_2" name="name" type="checkbox" value="item3">
+			<input class="sv_q_checkbox_control_item" disabled="" id="testid0i_2" name="name" role="option" type="checkbox" value="item3">
 			<span class="sv_q_checkbox_control_label">
 				<span class="sv-string-viewer">item3</span>
 			</span>