Work for #6869: add missing disabled class for boolean rendered as ch…

…eckbox
surveyjs · Sep 14, 2023 · 817649c · 817649c
1 parent 6de4a7b
commit 817649c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -300,7 +300,7 @@ export var defaultV2Css = {
     checkboxItemIndeterminate: "sd-checkbox--intermediate",
     checkboxItemChecked: "sd-item--checked sd-checkbox--checked",
     checkboxItemDecorator: "sd-item__svg sd-checkbox__svg",
-    checkboxItemDisabled: "sd-checkbox--disabled",
+    checkboxItemDisabled: "sd-item--disabled sd-checkbox--disabled",
     controlCheckbox: "sd-visuallyhidden sd-item__control sd-checkbox__control",
     checkboxMaterialDecorator: "sd-item__decorator sd-checkbox__decorator",
     checkboxControlLabel: "sd-item__control-label",

diff --git a/tests/markup/etalon_boolean.ts b/tests/markup/etalon_boolean.ts
@@ -67,6 +67,25 @@ registerMarkupTests(
     after: () => StylesManager.applyTheme("default"),
     snapshot: "boolean-checkbox-defaultV2",
   },
+  {
+    name: "Test Boolean Checkbox question markup",
+    json: {
+      questions: [
+        {
+          name: "name",
+          type: "boolean",
+          readOnly: true,
+          title: "Question title",
+          titleLocation: "hidden",
+          defaultValue: "true",
+          renderAs: "checkbox"
+        }
+      ]
+    },
+    before: () => StylesManager.applyTheme("defaultV2"),
+    after: () => StylesManager.applyTheme("default"),
+    snapshot: "boolean-checkbox-disabled-defaultV2",
+  },
   {
     name: "Test Boolean Checkbox defaultV2",
     json: {

diff --git a/tests/markup/snapshots/boolean-checkbox-disabled-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-disabled-defaultV2.snap.html
@@ -0,0 +1,18 @@
+<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">
+			<span class="sd-checkbox__decorator sd-item__decorator">
+				<svg class="sd-checkbox__svg sd-item__svg">
+					<use xlink:href="#icon-v2check" class="">
+					</use>
+				</svg>
+				<span class="check">
+				</span>
+			</span>
+			<span class="sd-item__control-label" id="testid0_ariaTitle">
+				<span class="sv-string-viewer">Question title</span>
+			</span>
+		</label>
+	</div>
+</div>