PR: aria-describedby id generation checks for title instead of descri…

…ption (#9105) * work for the #9083 * work for the #9083 * work for the #9083
surveyjs · Nov 26, 2024 · 65c2682 · 65c2682
1 parent ef3f8a5
commit 65c2682
Show file tree

Hide file tree

Showing 16 changed files with 42 additions and 23 deletions.
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
@@ -2765,7 +2765,7 @@ export class Question extends SurveyElement<Question>
   public get ariaDescribedBy(): string {
     if (this.isNewA11yStructure) return null;
 
-    if (this.hasTitle) {
+    if (this.hasTitle && this.hasDescription) {
       return this.ariaDescriptionId;
     } else {
       return null;
@@ -2804,7 +2804,7 @@ export class Question extends SurveyElement<Question>
     }
   }
   public get a11y_input_ariaDescribedBy(): string {
-    if (this.hasTitle && !this.parentQuestion) {
+    if (this.hasTitle && !this.parentQuestion && this.hasDescription) {
       return this.ariaDescriptionId;
     } else {
       return null;

diff --git a/packages/survey-core/tests/a11y.ts b/packages/survey-core/tests/a11y.ts
@@ -72,6 +72,24 @@ QUnit.test(
   }
 );
 
+QUnit.test(
+  "a11y: aria-describedbby: empty description",
+  function(assert) {
+    var json = {
+      questions: [
+        {
+          type: "text",
+          title: "Title",
+          name: "q1"
+        },
+      ],
+    };
+    var survey = new SurveyModel(json);
+    var question = survey.getQuestionByName("q1");
+    assert.equal(question.a11y_input_ariaDescribedBy, null, "aria-describedbby is null");
+  }
+);
+
 QUnit.test(
   "a11y: aria-invalid",
   function(assert) {

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

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

diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -1,12 +1,13 @@
 <div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
-		<input aria-describedby="testid0_ariaDescription" 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">
+		<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 sv-string-viewer--multiline">No</span>
-				</span>
-			</div>
-			<div class="sd-boolean__switch"><span class="sd-boolean__thumb">
+			</span>
+		</div>
+		<div class="sd-boolean__switch">
+			<span class="sd-boolean__thumb">
 				<span class="sd-boolean__thumb-text">
 					<span class="sv-string-viewer sv-string-viewer--multiline">Yes</span>
 				</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-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sv-visuallyhidden" id="testid0i" name="name" role="switch" 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 sv-string-viewer--multiline">No</span>

diff --git a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
@@ -22,7 +22,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid1_ariaDescription" aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
@@ -24,7 +24,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle"
 							</h5>
 						</div>
 						<div class="sd-question__content sd-text__content" role="presentation">
-							<input aria-describedby="testid1_ariaDescription" aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
 						</div>
 					</div>
 				</div>

diff --git a/tests/markup/snapshots/page-questionTitleWidth.snap.html b/tests/markup/snapshots/page-questionTitleWidth.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-question__content--left sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/page-swnl-title-v2.snap.html b/tests/markup/snapshots/page-swnl-title-v2.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
@@ -22,7 +22,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid1_ariaDescription" aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/page-title-v2.snap.html b/tests/markup/snapshots/page-title-v2.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
@@ -24,7 +24,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle"
 							</h5>
 						</div>
 						<div class="sd-question__content sd-text__content" role="presentation">
-							<input aria-describedby="testid1_ariaDescription" aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid1i" placeholder="" type="text">
 						</div>
 					</div>
 				</div>

diff --git a/tests/markup/snapshots/question-errors-v2-bottom.snap.html b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
@@ -10,7 +10,7 @@ <h5 class="sd-element__title sd-question__title sd-question__title--error sd-que
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-errormessage="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-input sd-input--error sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-errormessage="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-input sd-input--error sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 		<div aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors" role="alert">
 			<div>

diff --git a/tests/markup/snapshots/question-errors-v2-top.snap.html b/tests/markup/snapshots/question-errors-v2-top.snap.html
@@ -19,7 +19,7 @@ <h5 class="sd-element__title sd-question__title sd-question__title--error sd-que
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-errormessage="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-input sd-input--error sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-errormessage="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-input sd-input--error sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/question-with-indent.snap.html b/tests/markup/snapshots/question-with-indent.snap.html
@@ -8,7 +8,7 @@ <h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle"
 			</h5>
 		</div>
 		<div class="sd-question__content sd-text__content" role="presentation">
-			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
 		</div>
 	</div>
 </div>