work for the #8209 (booleans)

surveyjs · May 21, 2024 · 7b8b1ac · 7b8b1ac
1 parent 6975b13
commit 7b8b1ac
Show file tree

Hide file tree

Showing 19 changed files with 114 additions and 34 deletions.
diff --git a/...urvey-angular-ui/src/components/renderAs/boolean-checkbox/boolean-checkbox.component.html b/...urvey-angular-ui/src/components/renderAs/boolean-checkbox/boolean-checkbox.component.html
@@ -6,7 +6,7 @@
  [value]="model.booleanValue" [class]="model.cssClasses.controlCheckbox" 
  [attr.name]="model.name" [id]="model.inputId" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel"
  [attr.aria-invalid]="model.ariaInvalid" [attr.aria-errormessage]="model.ariaErrormessage" [(ngModel)]="model.booleanValue" [value]="model.booleanValue"
- [disabled]="model.isInputReadOnly" [indeterminate]="model.isIndeterminate"
+ [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [indeterminate]="model.isIndeterminate"
  />
  <span [class]="model.cssClasses.checkboxMaterialDecorator">
  <svg *ngIf="!!model.svgIcon" [class]="model.cssClasses.checkboxItemDecorator">

diff --git a/...survey-angular-ui/src/components/renderAs/boolean-radio/boolean-radio-item.component.html b/...survey-angular-ui/src/components/renderAs/boolean-radio/boolean-radio-item.component.html
@@ -3,7 +3,7 @@
  <input
  type="radio"
  [attr.name]="question.name" [attr.aria-errormessage]="question.ariaErrormessage" [value]="value" [(ngModel)]="question.booleanValue"
- [disabled]="question.isInputReadOnly" [class]="question.cssClasses.itemRadioControl || ''"
+ [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [class]="question.cssClasses.itemRadioControl || ''"
  />
  <span *ngIf="question.cssClasses.materialRadioDecorator" [class]="question.cssClasses.materialRadioDecorator">
  <svg

diff --git a/packages/survey-angular-ui/src/questions/boolean.component.html b/packages/survey-angular-ui/src/questions/boolean.component.html
@@ -10,7 +10,7 @@
  [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
  [attr.aria-invalid]="model.a11y_input_ariaInvalid"
  [attr.aria-errormessage]="model.a11y_input_ariaErrormessage"
- [class]="model.cssClasses.control" [disabled]="model.isInputReadOnly" [indeterminate]="model.isIndeterminate" [value]="model.booleanValue" [(ngModel)]="model.booleanValue" />
+ [class]="model.cssClasses.control" [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [indeterminate]="model.isIndeterminate" [value]="model.booleanValue" [(ngModel)]="model.booleanValue" />
  <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, model.swapOrder)">
  <span [class]="model.getLabelCss(model.swapOrder)" [model]="model.locLabelLeft" sv-ng-string></span>
  </div>

diff --git a/packages/survey-vue3-ui/src/BooleanCheckbox.vue b/packages/survey-vue3-ui/src/BooleanCheckbox.vue
@@ -10,7 +10,8 @@
  :class="question.cssClasses.controlCheckbox"
  :id="question.inputId"
  :indeterminate.prop="question.isIndeterminate"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel"
  :aria-invalid="question.ariaInvalid"

diff --git a/packages/survey-vue3-ui/src/BooleanRadioItem.vue b/packages/survey-vue3-ui/src/BooleanRadioItem.vue
@@ -10,7 +10,8 @@
  :value="value"
  :checked="value === question.booleanValueRendered"
  :aria-errormessage="question.ariaErrormessage"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :class="question.cssClasses.itemRadioControl"
  @change="handleChange"
  />

diff --git a/packages/survey-vue3-ui/src/BooleanSwitch.vue b/packages/survey-vue3-ui/src/BooleanSwitch.vue
@@ -13,7 +13,8 @@
  :class="question.cssClasses.control"
  :id="question.inputId"
  :indeterminate.prop="question.isIndeterminate"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :role="question.a11y_input_ariaRole"
  :aria-required="question.a11y_input_ariaRequired"
  :aria-label="question.a11y_input_ariaLabel"

diff --git a/src/knockout/components/boolean-checkbox/boolean-checkbox.html b/src/knockout/components/boolean-checkbox/boolean-checkbox.html
@@ -3,7 +3,7 @@
  <label data-bind="css: question.cssClasses.checkboxLabel">
  <input
  type="checkbox"
- data-bind="value: question.booleanValue, css: question.cssClasses.controlCheckbox, attr: {name: question.name, id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"
+ data-bind="value: question.booleanValue, css: question.cssClasses.controlCheckbox, attr: {name: question.name, id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage, readonly: question.isReadOnlyAttr}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isDisabledAttr"
  />
  <span data-bind="css: question.cssClasses.checkboxMaterialDecorator">
  <!-- ko if: question.svgIcon -->

diff --git a/src/knockout/components/boolean-radio/boolean-radio-item.html b/src/knockout/components/boolean-radio/boolean-radio-item.html
@@ -2,7 +2,7 @@
  <label data-bind="css: question.cssClasses.radioLabel">
  <input
  type="radio"
- data-bind="event: { change: handleChange }, attr: { name: question.name, 'aria-errormessage': question.ariaErrormessage, value: ''+$data.value, checked: $data.value === question.booleanValue }, enable: !question.isInputReadOnly, css: question.cssClasses.itemRadioControl"
+ data-bind="event: { change: handleChange }, attr: { name: question.name, 'aria-errormessage': question.ariaErrormessage, value: ''+$data.value, checked: $data.value === question.booleanValue, readonly: question.isReadOnlyAttr }, enable: !question.isDisabledAttr, css: question.cssClasses.itemRadioControl"
  />
  <!-- ko if: question.cssClasses.materialRadioDecorator -->
  <span data-bind="css: question.cssClasses.materialRadioDecorator">

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, 'role': question.a11y_input_ariaRole, 'aria-required': question.a11y_input_ariaRequired, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage, 'aria-label': question.a11y_input_ariaLabel}, 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-describedby': question.a11y_input_ariaDescribedBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage, 'aria-label': question.a11y_input_ariaLabel, readonly: question.isReadOnlyAttr}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isDisabledAttr"
  />
  <div data-bind="css: question.cssClasses.sliderGhost, click: onFalseLabelClick">
  <span data-bind="css: question.getLabelCss(swapOrder)">

diff --git a/src/react/boolean-checkbox.tsx b/src/react/boolean-checkbox.tsx
@@ -29,7 +29,8 @@ export class SurveyQuestionBooleanCheckbox extends SurveyQuestionBoolean {
  }
  id={this.question.inputId}
  className={cssClasses.controlCheckbox}
- disabled={this.isDisplayMode}
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  checked={this.question.booleanValue || false}
  onChange={this.handleOnChange}
  aria-required={this.question.ariaRequired}

diff --git a/src/react/boolean-radio.tsx b/src/react/boolean-radio.tsx
@@ -18,7 +18,8 @@ export class SurveyQuestionBooleanRadio extends SurveyQuestionBoolean {
  value = { value }
  aria-errormessage = { this.question.ariaErrormessage }
  checked={value === this.question.booleanValueRendered}
- disabled = { this.question.isInputReadOnly }
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  className = { cssClasses.itemRadioControl }
  onChange={ this.handleOnChange }
  />

diff --git a/src/react/boolean.tsx b/src/react/boolean.tsx
@@ -70,7 +70,8 @@ export class SurveyQuestionBoolean extends SurveyQuestionElementBase {
  }
  id={this.question.inputId}
  className={cssClasses.control}
- disabled={this.isDisplayMode}
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  checked={this.question.booleanValue || false}
  onChange={this.handleOnChange}
  role={this.question.a11y_input_ariaRole}

diff --git a/src/vue/boolean-checkbox.vue b/src/vue/boolean-checkbox.vue
@@ -10,7 +10,8 @@
  :class="question.cssClasses.controlCheckbox"
  :id="question.inputId"
  :indeterminate.prop="question.isIndeterminate"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel"
  :aria-invalid="question.ariaInvalid"

diff --git a/src/vue/boolean-radio-item.vue b/src/vue/boolean-radio-item.vue
@@ -7,7 +7,8 @@
  :value="value"
  :checked="value === question.booleanValueRendered"
  :aria-errormessage="question.ariaErrormessage"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :class="question.cssClasses.itemRadioControl"
  @change="handleChange"
  />

diff --git a/src/vue/boolean-switch.vue b/src/vue/boolean-switch.vue
@@ -9,7 +9,8 @@
  :class="question.cssClasses.control"
  :id="question.inputId"
  :indeterminate.prop="question.isIndeterminate"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :read-only="question.isReadOnlyAttr"
  :role="question.a11y_input_ariaRole"
  :aria-required="question.a11y_input_ariaRequired"
  :aria-label="question.a11y_input_ariaLabel"

diff --git a/tests/markup/etalon_boolean.ts b/tests/markup/etalon_boolean.ts
@@ -1,4 +1,4 @@
-import { StylesManager } from "survey-core";
+import { StylesManager, settings } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -16,6 +16,39 @@ registerMarkupTests(
  },
  snapshot: "boolean",
  },
+ {
+ name: "Test Boolean question markup: Readonly",
+ json: {
+ mode: "display",
+ questions: [
+ {
+ name: "name",
+ type: "boolean",
+ title: "Question title",
+ titleLocation: "hidden"
+ }
+ ]
+ },
+ snapshot: "boolean-readonly",
+ },
+ {
+ name: "Test Boolean question markup: Disabled",
+ json: {
+ mode: "display",
+ questions: [
+ {
+ name: "name",
+ type: "boolean",
+ title: "Question title",
+ titleLocation: "hidden"
+ }
+ ]
+ },
+ snapshot: "boolean-disabled",
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; },
+ after: () => { settings.supportCreatorV2 = false; },
+ },
  {
  name: "Test Boolean question markup Default V2",
  json: {
@@ -84,7 +117,7 @@ registerMarkupTests(
  },
  before: () => StylesManager.applyTheme("defaultV2"),
  after: () => StylesManager.applyTheme("default"),
- snapshot: "boolean-checkbox-disabled-defaultV2",
+ snapshot: "boolean-checkbox-readonly-defaultV2",
  },
  {
  name: "Test Boolean Checkbox defaultV2",

diff --git a/...ean-checkbox-disabled-defaultV2.snap.html → ...ean-checkbox-readonly-defaultV2.snap.html b/...ean-checkbox-disabled-defaultV2.snap.html → ...ean-checkbox-readonly-defaultV2.snap.html
@@ -1,18 +1,18 @@
-<div class="sd-selectbase">
- <div class="sd-checkbox sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
- <label class="sd-selectbase__label">
- <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="">
- </use>
- </svg>
- <span class="check">
- </span>
- </span>
- <span class="sd-item__control-label" id="testid0_ariaTitle">
- <span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
- </span>
- </label>
- </div>
+<div class="sd-selectbase">
+ <div class="sd-checkbox sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
+ <label class="sd-selectbase__label">
+ <input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" readonly="" 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 sv-string-viewer--multiline">Question title</span>
+ </span>
+ </label>
+ </div>
 </div>
diff --git a/tests/markup/snapshots/boolean-disabled.snap.html b/tests/markup/snapshots/boolean-disabled.snap.html
@@ -0,0 +1,19 @@
+<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="">
+ <div class="sv-boolean__thumb-ghost">
+ <span class="sv-boolean__label">
+ <span class="sv-string-editor" contenteditable="true">No</span>
+ </span>
+ </div>
+ <div class="sv-boolean__switch">
+ <span class="sv-boolean__slider">
+ </span>
+ </div>
+ <div class="sv-boolean__thumb-ghost">
+ <span class="sv-boolean__label">
+ <span class="sv-string-editor" contenteditable="true">Yes</span>
+ </span>
+ </div>
+ </label>
+</div>
diff --git a/tests/markup/snapshots/boolean-readonly.snap.html b/tests/markup/snapshots/boolean-readonly.snap.html
@@ -0,0 +1,19 @@
+<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="">
+ <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>
+ </span>
+ </div>
+ <div class="sv-boolean__switch">
+ <span class="sv-boolean__slider">
+ </span>
+ </div>
+ <div class="sv-boolean__thumb-ghost">
+ <span class="sv-boolean__label sv-boolean__label--disabled">
+ <span class="sv-string-viewer sv-string-viewer--multiline">Yes</span>
+ </span>
+ </div>
+ </label>
+</div>