#7440 WAVE Alert (Level A and Level AA) - Skipped heading level becau…

…se a survey title uses H5 and survey description uses H3 - The H4 tag is missing Fixes #7440
surveyjs · Dec 6, 2023 · 3999607 · 3999607
1 parent 33ea3f2
commit 3999607
Show file tree

Hide file tree

Showing 18 changed files with 128 additions and 27 deletions.
diff --git a/packages/survey-angular-ui/src/components/header/header-cell.component.html b/packages/survey-angular-ui/src/components/header/header-cell.component.html
@@ -11,7 +11,7 @@
         <sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
       </div>
       <div *ngIf="model.showDescription" class="sv-header__description" [style]="{ maxWidth: model.textAreaWidth }">
-        <h5 *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></h5>
+        <div *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></div>
       </div>
     </div>
   </div>

diff --git a/packages/survey-angular-ui/src/components/header/header-mobile.component.html b/packages/survey-angular-ui/src/components/header/header-mobile.component.html
@@ -10,7 +10,7 @@
       <sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
     </div>
     <div *ngIf="model.survey.renderedHasDescription" class="sv-header__description" [style]="{ maxWidth: model.textAreaWidth }">
-      <h5 *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></h5>
+      <div *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></div>
     </div>
   </div>
 </ng-template>
diff --git a/packages/survey-angular-ui/src/components/survey-header/survey-header.component.html b/packages/survey-angular-ui/src/components/survey-header/survey-header.component.html
@@ -5,7 +5,7 @@
   [style.maxWidth]="survey.titleMaxWidth"
 >
   <sv-ng-element-title [element]="survey"></sv-ng-element-title>
-  <h5 *ngIf="survey.renderedHasDescription" [class]="survey.css.description" [model]="survey.locDescription" sv-ng-string></h5>
+  <div *ngIf="survey.renderedHasDescription" [class]="survey.css.description" [model]="survey.locDescription" sv-ng-string></div>
 </div>
 
 <ng-template *ngIf="survey.isLogoAfter" [component]="{ name: survey.getElementWrapperComponentName(survey, 'logo-image'), data: { data: survey.getElementWrapperComponentData(survey, 'logo-image') } }"></ng-template>

diff --git a/packages/survey-vue3-ui/src/Header.vue b/packages/survey-vue3-ui/src/Header.vue
@@ -11,9 +11,9 @@
       v-bind:style="{ maxWidth: survey.titleMaxWidth }"
     >
       <survey-element-title :element="survey" :css="survey.css" />
-      <h5 v-if="survey.renderedHasDescription" :class="survey.css.description">
-        <survey-string :locString="survey.locDescription" />
-      </h5>
+          <div v-if="survey.renderedHasDescription" :class="survey.css.description">
+          <survey-string :locString="survey.locDescription" />
+          </div>
     </div>
 
     <component v-if="survey.isLogoAfter"

diff --git a/packages/survey-vue3-ui/src/components/header/HeaderCell.vue b/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
@@ -25,12 +25,12 @@
         class="sv-header__description"
         :style="{ maxWidth: model.textAreaWidth }"
       >
-        <h5
+        <div
           v-if="model.survey.renderedHasDescription"
           :class="model.survey.css.description"
         >
           <survey-string :locString="model.survey.locDescription" />
-        </h5>
+        </div>
       </div>
     </div>
   </div>

diff --git a/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue b/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue
@@ -16,9 +16,9 @@
       <survey-element-title :element="model.survey" :css="model.survey.css" />
     </div>
     <div v-if="model.survey.renderedHasDescription" class="sv-header__description" :style="{ 'maxWidth': model.textAreaWidth }">
-      <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
+      <div v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
         <survey-string :locString="model.survey.locDescription" />
-      </h5>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/knockout/components/header/cell.html b/src/knockout/components/header/cell.html
@@ -14,10 +14,10 @@
     <!-- /ko -->
     <!-- ko if: showDescription -->
     <div class="sv-header__description" data-bind="style: { maxWidth: textAreaWidth }">
-      <h5 data-bind="css: survey.css.description">
+      <div data-bind="css: survey.css.description">
         <!-- ko template: { name: 'survey-string', data: survey.locDescription } -->
         <!-- /ko -->
-      </h5>
+      </div>
     </div>
     <!-- /ko -->
   </div>

diff --git a/src/knockout/components/header/mobile.html b/src/knockout/components/header/mobile.html
@@ -13,10 +13,10 @@
   <!-- /ko -->
   <!-- ko if: survey.renderedHasDescription -->
   <div class="sv-header__description" data-bind="style: { maxWidth: textAreaWidth }">
-    <h5 data-bind="css: survey.css.description">
+    <div data-bind="css: survey.css.description">
       <!-- ko template: { name: 'survey-string', data: survey.locDescription } -->
       <!-- /ko -->
-    </h5>
+    </div>
   </div>
   <!-- /ko -->
 </div>
diff --git a/src/knockout/templates/header.html b/src/knockout/templates/header.html
@@ -11,10 +11,10 @@
     <!-- ko component: { name: 'survey-element-title', params: {element: $data } } -->
     <!-- /ko -->
     <!-- ko if: renderedHasDescription -->
-    <h5 data-bind="css: css.description">
+    <div data-bind="css: css.description">
       <!-- ko template: { name: 'survey-string', data: locDescription } -->
       <!-- /ko -->
-    </h5>
+    </div>
     <!-- /ko -->
   </div>
   <!-- /ko -->

diff --git a/src/react/components/header.tsx b/src/react/components/header.tsx
@@ -37,9 +37,9 @@ export class HeaderMobile extends React.Component<any, any> {
         <TitleElement element={this.model.survey}/>
       </div>) : null}
       {this.model.survey.renderedHasDescription ? (<div className="sv-header__description" style={{ maxWidth: this.model.textAreaWidth }}>
-        <h5 className={this.model.survey.css.description}>
+        <div className={this.model.survey.css.description}>
           {SurveyElementBase.renderLocString(this.model.survey.locDescription)}
-        </h5>
+        </div>
       </div>) : null}
     </div>);
   }
@@ -74,9 +74,9 @@ export class HeaderCell extends React.Component<any, any> {
           <TitleElement element={this.model.survey}/>
         </div>) : null}
         {this.model.showDescription ? (<div className="sv-header__description" style={{ maxWidth: this.model.textAreaWidth }}>
-          <h5 className={this.model.survey.css.description}>
+          <div className={this.model.survey.css.description}>
             {SurveyElementBase.renderLocString(this.model.survey.locDescription)}
-          </h5>
+          </div>
         </div>) : null}
       </div>
     </div>);

diff --git a/src/react/components/survey-header/survey-header.tsx b/src/react/components/survey-header/survey-header.tsx
@@ -45,7 +45,7 @@ export class SurveyHeader extends React.Component<ISurveyHeaderProps, any> {
         style={{ maxWidth: this.survey.titleMaxWidth }}
       >
         <TitleElement element={this.survey}></TitleElement>
-        { this.survey.renderedHasDescription ? <h5 className={this.css.description}>{description}</h5> : null }
+        {this.survey.renderedHasDescription ? <div className={this.css.description}>{description}</div> : null}
       </div>
     );
   }

diff --git a/src/vue/components/header/header-cell.vue b/src/vue/components/header/header-cell.vue
@@ -17,9 +17,9 @@
         <survey-element-title :element="model.survey" :css="model.survey.css" />
       </div>
       <div v-if="model.showDescription" class="sv-header__description" :style="{ 'maxWidth': model.textAreaWidth }">
-        <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
+        <div v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
           <survey-string :locString="model.survey.locDescription" />
-        </h5>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/vue/components/header/header-mobile.vue b/src/vue/components/header/header-mobile.vue
@@ -16,9 +16,9 @@
       <survey-element-title :element="model.survey" :css="model.survey.css" />
     </div>
     <div v-if="model.survey.renderedHasDescription" class="sv-header__description" :style="{ 'maxWidth': model.textAreaWidth }">
-      <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
+      <div v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
         <survey-string :locString="model.survey.locDescription" />
-      </h5>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/vue/header.vue b/src/vue/header.vue
@@ -17,9 +17,9 @@
       v-bind:style="{ maxWidth: survey.titleMaxWidth }"
     >
       <survey-element-title :element="survey" :css="survey.css" />
-      <h5 v-if="survey.renderedHasDescription" :class="survey.css.description">
+      <div v-if="survey.renderedHasDescription" :class="survey.css.description">
         <survey-string :locString="survey.locDescription" />
-      </h5>
+      </div>
     </div>
 
     <div v-if="survey.isLogoAfter" :class="survey.logoClassNames">

diff --git a/tests/markup/etalon_survey.ts b/tests/markup/etalon_survey.ts
@@ -122,5 +122,74 @@ registerMarkupTests(
         div.appendChild(image);
         return div;
       }
+    },
+    {
+      name: "Test survey description",
+      json: {
+        "title": "Test",
+        "description": "Description",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ]
+          }
+        ]
+      },
+      event: "onAfterRenderHeader",
+      snapshot: "survey-header"
+    },
+    {
+      name: "Test survey description - header advanced mode",
+      json: {
+        "title": "Test",
+        "description": "Description",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ]
+          }
+        ],
+        "headerView": "advanced"
+      },
+      event: "onAfterRenderSurvey",
+      getSnapshot: el => {
+        return el.querySelector(".sv-header__cell.sv-header__cell--middle.sv-header__cell--right")?.outerHTML || "";
+      },
+      snapshot: "survey-header-advanced"
+    },
+    {
+      name: "Test survey description - header advanced mode mobile",
+      json: {
+        "title": "Test",
+        "description": "Description",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ]
+          }
+        ],
+        "headerView": "advanced"
+      },
+      event: "onAfterRenderSurvey",
+      initSurvey: survey => survey.setIsMobile(true),
+      getSnapshot: el => {
+        return el.querySelector(".sv-header--mobile")?.outerHTML || "";
+      },
+      snapshot: "survey-header-advanced-mobile"
     }
   ]);
diff --git a/tests/markup/snapshots/survey-header-advanced-mobile.snap.html b/tests/markup/snapshots/survey-header-advanced-mobile.snap.html
@@ -0,0 +1,12 @@
+<div class="sv-header--mobile">
+	<div class="sv-header__title" style="max-width:512px;">
+		<h3 aria-label="Test">
+			<span class="sv-string-viewer">Test</span>
+		</h3>
+	</div>
+	<div class="sv-header__description" style="max-width:512px;">
+		<div>
+			<span class="sv-string-viewer">Description</span>
+		</div>
+	</div>
+</div>
diff --git a/tests/markup/snapshots/survey-header-advanced.snap.html b/tests/markup/snapshots/survey-header-advanced.snap.html
@@ -0,0 +1,14 @@
+<div class="sv-header__cell sv-header__cell--middle sv-header__cell--right" style="grid-area:2 / 3;">
+	<div class="sv-header__cell-content" style="align-items:flex-end; justify-content:center; text-align:end;">
+		<div class="sv-header__title" style="max-width:512px;">
+			<h3 aria-label="Test">
+				<span class="sv-string-viewer">Test</span>
+			</h3>
+		</div>
+		<div class="sv-header__description" style="max-width:512px;">
+			<div>
+				<span class="sv-string-viewer">Description</span>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/tests/markup/snapshots/survey-header.snap.html b/tests/markup/snapshots/survey-header.snap.html
@@ -0,0 +1,6 @@
+<h3 aria-label="Test">
+	<span class="sv-string-viewer">Test</span>
+</h3>
+<div>
+	<span class="sv-string-viewer">Description</span>
+</div>