PR: Yes/No Boolean Question - A screen reader doesn't announce the Ye…

…s/No Options (#7716) * work for the #7691 * work for the #7691
surveyjs · Jan 23, 2024 · ebe752f · ebe752f
1 parent 2a9cdae
commit ebe752f
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 21 deletions.
diff --git a/packages/survey-angular-ui/src/questions/boolean.component.html b/packages/survey-angular-ui/src/questions/boolean.component.html
@@ -2,7 +2,13 @@
     <label [class]="model.getItemCss()">
       <input
         type="checkbox"
-        [attr.name]="model.name" [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-describedby]="model.ariaDescribedBy"
+        [attr.name]="model.name" [attr.id]="model.inputId" 
+        [attr.role]="model.a11y_input_ariaRole"
+        [attr.aria-required]="model.a11y_input_ariaRequired"
+        [attr.aria-label]="model.a11y_input_ariaLabel"
+        [attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
+        [attr.aria-invalid]="model.a11y_input_ariaInvalid"
+        [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
         [class]="model.cssClasses.control" [disabled]="model.isInputReadOnly"  [indeterminate]="model.isIndeterminate" [value]="model.booleanValue" [(ngModel)]="model.booleanValue" />
       <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, false)">
         <span [class]="model.getLabelCss(false)" [model]="model.locLabelFalse" sv-ng-string></span>

diff --git a/packages/survey-vue3-ui/src/BooleanSwitch.vue b/packages/survey-vue3-ui/src/BooleanSwitch.vue
@@ -14,10 +14,12 @@
         :id="question.inputId"
         :indeterminate.prop="question.isIndeterminate"
         :disabled="question.isInputReadOnly"
-        :aria-required="question.ariaRequired"
-        :aria-label="question.ariaLabel"
-        :aria-invalid="question.ariaInvalid"
-        :aria-describedby="question.ariaDescribedBy"
+        :role="question.a11y_input_ariaRole"
+        :aria-required="question.a11y_input_ariaRequired"
+        :aria-label="question.a11y_input_ariaLabel"
+        :aria-labelledby="question.a11y_input_ariaLabelledBy"
+        :aria-invalid="question.a11y_input_ariaInvalid"
+        :aria-describedby="question.a11y_input_ariaDescribedBy"
       />
       <div
         :class="question.cssClasses.sliderGhost"

diff --git a/src/knockout/templates/question-boolean.html b/src/knockout/templates/question-boolean.html
@@ -3,7 +3,7 @@
     <label data-bind="css: question.getItemCss()">
       <input
         type="checkbox"
-        data-bind="value: question.booleanValue, css: question.cssClasses.control, attr: {name: question.name, id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"
+        data-bind="value: question.booleanValue, css: question.cssClasses.control, attr: {name: question.name, id: question.inputId, 'role': question.a11y_input_ariaRole, 'aria-required': question.a11y_input_ariaRequired, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-label': question.a11y_input_ariaLabel}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"
       />
       <div data-bind="css: question.cssClasses.sliderGhost, click: onFalseLabelClick">
         <span data-bind="css: question.getLabelCss(false)">

diff --git a/src/question_boolean.ts b/src/question_boolean.ts
@@ -285,6 +285,15 @@ export class QuestionBooleanModel extends Question {
   protected createActionContainer(allowAdaptiveActions?: boolean): ActionContainer {
     return super.createActionContainer(this.renderAs !== "checkbox");
   }
+
+  //a11y
+  public get isNewA11yStructure(): boolean {
+    return true;
+  }
+  public get a11y_input_ariaRole(): string {
+    return "switch";
+  }
+  // EO a11y
 }
 
 Serializer.addClass(

diff --git a/src/react/boolean.tsx b/src/react/boolean.tsx
@@ -73,10 +73,12 @@ export class SurveyQuestionBoolean extends SurveyQuestionElementBase {
             disabled={this.isDisplayMode}
             checked={this.question.booleanValue || false}
             onChange={this.handleOnChange}
-            aria-required={this.question.ariaRequired}
-            aria-label={this.question.ariaLabel}
-            aria-invalid={this.question.ariaInvalid}
-            aria-describedby={this.question.ariaDescribedBy}
+            role={this.question.a11y_input_ariaRole}
+            aria-required={this.question.a11y_input_ariaRequired}
+            aria-label={this.question.a11y_input_ariaLabel}
+            aria-labelledby={this.question.a11y_input_ariaLabelledBy}
+            aria-invalid={this.question.a11y_input_ariaInvalid}
+            aria-describedby={this.question.a11y_input_ariaDescribedBy}
           />
           <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, false)}>
             <span className={this.question.getLabelCss(false)}>

diff --git a/src/vue/boolean-switch.vue b/src/vue/boolean-switch.vue
@@ -10,10 +10,12 @@
         :id="question.inputId"
         :indeterminate.prop="question.isIndeterminate"
         :disabled="question.isInputReadOnly"
-        :aria-required="question.ariaRequired"
-        :aria-label="question.ariaLabel"
-        :aria-invalid="question.ariaInvalid"
-        :aria-describedby="question.ariaDescribedBy"
+        :role="question.a11y_input_ariaRole"
+        :aria-required="question.a11y_input_ariaRequired"
+        :aria-label="question.a11y_input_ariaLabel"
+        :aria-labelledby="question.a11y_input_ariaLabelledBy"
+        :aria-invalid="question.a11y_input_ariaInvalid"
+        :aria-describedby="question.a11y_input_ariaDescribedBy"
       />
       <div
         :class="question.cssClasses.sliderGhost"

diff --git a/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html b/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
@@ -1,7 +1,7 @@
 <div class="sv_qbln sv_qcbc">
 	<div class="sv-boolean sv-boolean--indeterminate">
 		<label>
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyvisible" id="testid0i" name="name" type="checkbox" value="">
+			<input class="sv-visuallyvisible" id="testid0i" name="name" type="checkbox" value="">
 			<span class="sv-boolean__decorator sv-item__decorator">
 				<svg class="sv-boolean__svg sv-item__svg">
 					<use xlink:href="#test-icon" class="">

diff --git a/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
@@ -1,7 +1,7 @@
 <div class="sd-selectbase">
 	<div class="sd-checkbox sd-checkbox--checked sd-item sd-item--checked sd-selectbase__item">
 		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
+			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
 			<span class="sd-checkbox__decorator sd-item__decorator">
 				<svg class="sd-checkbox__svg sd-item__svg">
 					<use xlink:href="#icon-v2check" class="">

diff --git a/tests/markup/snapshots/boolean-checkbox-disabled-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-disabled-defaultV2.snap.html
@@ -1,7 +1,7 @@
 <div class="sd-selectbase">
 	<div class="sd-checkbox sd-checkbox--checked sd-checkbox--disabled sd-item sd-item--checked sd-item--disabled sd-selectbase__item">
 		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="true">
+			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="true">
 			<span class="sd-checkbox__decorator sd-item__decorator">
 				<svg class="sd-checkbox__svg sd-item__svg">
 					<use xlink:href="#icon-v2check" class="">

diff --git a/tests/markup/snapshots/boolean-checkbox.snap.html b/tests/markup/snapshots/boolean-checkbox.snap.html
@@ -1,7 +1,7 @@
 <div class="sv_qbln sv_qcbc">
 	<div class="sv-boolean sv-boolean--indeterminate">
 		<label>
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyvisible" id="testid0i" name="name" type="checkbox" value="">
+			<input class="sv-visuallyvisible" id="testid0i" name="name" type="checkbox" value="">
 			<span class="sv-boolean__decorator sv-item__decorator">
 				<span class="check">
 				</span>

diff --git a/tests/markup/snapshots/boolean-v2.snap.html b/tests/markup/snapshots/boolean-v2.snap.html
@@ -1,6 +1,6 @@
 <div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+		<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
 		<div class="sd-boolean__thumb-ghost">
 			<span class="sd-boolean__label">
 				<span class="sv-string-viewer">No</span>

diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -1,6 +1,6 @@
 <div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
+		<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="true">
 		<div class="sd-boolean__thumb-ghost">
 			<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
 				<span class="sv-string-viewer">No</span>

diff --git a/tests/markup/snapshots/boolean.snap.html b/tests/markup/snapshots/boolean.snap.html
@@ -1,6 +1,6 @@
 <div class="sv_qbln sv_qcbc">
 	<label class="sv-boolean sv-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+		<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sv-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
 		<div class="sv-boolean__thumb-ghost">
 			<span class="sv-boolean__label">
 				<span class="sv-string-viewer">No</span>