feat: add readonly property to checkbox-group

packages/checkbox-group/src/vaadin-checkbox-group.d.ts

@@ -85,6 +85,14 @@ declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementM
    */
   value: string[];
 
+  /**
+   * When true, the user cannot modify the value of the checkbox group.
+   * The difference between `disabled` and `readonly` is that in the
+   * read-only checkbox group, all the checkboxes are also read-only,
+   * and therefore remain focusable and announced by screen readers.
+   */
+  readonly: boolean;
+
   addEventListener<K extends keyof CheckboxGroupEventMap>(
     type: K,
     listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,

packages/checkbox-group/src/vaadin-checkbox-group.js

@@ -141,6 +141,19 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
         notify: true,
         observer: '__valueChanged',
       },
+
+      /**
+       * When true, the user cannot modify the value of the checkbox group.
+       * The difference between `disabled` and `readonly` is that in the
+       * read-only checkbox group, all the checkboxes are also read-only,
+       * and therefore remain focusable and announced by screen readers.
+       */
+      readonly: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '__readonlyChanged',
+      },
     };
   }
 
@@ -250,6 +263,10 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
       checkbox.disabled = true;
     }
 
+    if (this.readonly) {
+      checkbox.readonly = true;
+    }
+
     if (checkbox.checked) {
       this.__addCheckboxToValue(checkbox.value);
     } else if (this.value.includes(checkbox.value)) {
@@ -353,6 +370,15 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     }
   }
 
+  /** @private */
+  __readonlyChanged(readonly, oldReadonly) {
+    if (readonly || oldReadonly) {
+      this.__checkboxes.forEach((checkbox) => {
+        checkbox.readonly = readonly;
+      });
+    }
+  }
+
   /**
    * Override method inherited from `FocusMixin`
    * to prevent removing the `focused` attribute

packages/checkbox-group/test/checkbox-group.test.js

@@ -84,6 +84,38 @@ describe('vaadin-checkbox-group', () => {
     });
   });
 
+  describe('readonly', () => {
+    beforeEach(async () => {
+      group = fixtureSync(`
+        <vaadin-checkbox-group readonly>
+          <vaadin-checkbox value="1" label="Checkbox 1"></vaadin-checkbox>
+          <vaadin-checkbox value="2" label="Checkbox 2"></vaadin-checkbox>
+        </vaadin-checkbox-group>
+      `);
+      await nextFrame();
+      checkboxes = [...group.querySelectorAll('vaadin-checkbox')];
+    });
+
+    it('should propagate readonly property to checkboxes', () => {
+      checkboxes.forEach((checkbox) => {
+        expect(checkbox.readonly).to.be.true;
+      });
+
+      group.readonly = false;
+      checkboxes.forEach((checkbox) => {
+        expect(checkbox.readonly).to.be.false;
+      });
+    });
+
+    it('should set disabled property to dynamically added checkboxes', async () => {
+      const checkbox = document.createElement('vaadin-checkbox');
+      checkbox.value = '3';
+      group.appendChild(checkbox);
+      await nextFrame();
+      expect(checkbox.readonly).to.be.true;
+    });
+  });
+
   describe('value', () => {
     beforeEach(async () => {
       group = fixtureSync(`

packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js

@@ -60,6 +60,70 @@ snapshots["vaadin-checkbox-group host default"] =
 `;
 /* end snapshot vaadin-checkbox-group host default */
 
+snapshots["vaadin-checkbox-group host label"] = 
+`<vaadin-checkbox-group
+  aria-labelledby="label-vaadin-checkbox-group-0"
+  has-label=""
+  role="group"
+>
+  <vaadin-checkbox
+    has-label=""
+    has-value=""
+    label="Checkbox 1"
+    value="1"
+  >
+    <label
+      for="input-vaadin-checkbox-5"
+      id="label-vaadin-checkbox-3"
+      slot="label"
+    >
+      Checkbox 1
+    </label>
+    <input
+      id="input-vaadin-checkbox-5"
+      slot="input"
+      tabindex="0"
+      type="checkbox"
+      value="1"
+    >
+  </vaadin-checkbox>
+  <vaadin-checkbox
+    has-label=""
+    has-value=""
+    label="Checkbox 2"
+    value="2"
+  >
+    <label
+      for="input-vaadin-checkbox-6"
+      id="label-vaadin-checkbox-4"
+      slot="label"
+    >
+      Checkbox 2
+    </label>
+    <input
+      id="input-vaadin-checkbox-6"
+      slot="input"
+      tabindex="0"
+      type="checkbox"
+      value="2"
+    >
+  </vaadin-checkbox>
+  <label
+    id="label-vaadin-checkbox-group-0"
+    slot="label"
+  >
+    Label
+  </label>
+  <div
+    hidden=""
+    id="error-message-vaadin-checkbox-group-2"
+    slot="error-message"
+  >
+  </div>
+</vaadin-checkbox-group>
+`;
+/* end snapshot vaadin-checkbox-group host label */
+
 snapshots["vaadin-checkbox-group host disabled"] = 
 `<vaadin-checkbox-group
   aria-disabled="true"
@@ -129,45 +193,16 @@ snapshots["vaadin-checkbox-group host disabled"] =
 `;
 /* end snapshot vaadin-checkbox-group host disabled */
 
-snapshots["vaadin-checkbox-group shadow default"] = 
-`<div class="vaadin-group-field-container">
-  <div part="label">
-    <slot name="label">
-    </slot>
-    <span
-      aria-hidden="true"
-      part="required-indicator"
-    >
-    </span>
-  </div>
-  <div part="group-field">
-    <slot>
-    </slot>
-  </div>
-  <div part="helper-text">
-    <slot name="helper">
-    </slot>
-  </div>
-  <div part="error-message">
-    <slot name="error-message">
-    </slot>
-  </div>
-</div>
-<slot name="tooltip">
-</slot>
-`;
-/* end snapshot vaadin-checkbox-group shadow default */
-
-snapshots["vaadin-checkbox-group host label"] = 
+snapshots["vaadin-checkbox-group host readonly"] = 
 `<vaadin-checkbox-group
-  aria-labelledby="label-vaadin-checkbox-group-0"
-  has-label=""
+  readonly=""
   role="group"
 >
   <vaadin-checkbox
     has-label=""
     has-value=""
     label="Checkbox 1"
+    readonly=""
     value="1"
   >
     <label
@@ -178,6 +213,7 @@ snapshots["vaadin-checkbox-group host label"] =
       Checkbox 1
     </label>
     <input
+      aria-readonly="true"
       id="input-vaadin-checkbox-5"
       slot="input"
       tabindex="0"
@@ -189,6 +225,7 @@ snapshots["vaadin-checkbox-group host label"] =
     has-label=""
     has-value=""
     label="Checkbox 2"
+    readonly=""
     value="2"
   >
     <label
@@ -199,6 +236,7 @@ snapshots["vaadin-checkbox-group host label"] =
       Checkbox 2
     </label>
     <input
+      aria-readonly="true"
       id="input-vaadin-checkbox-6"
       slot="input"
       tabindex="0"
@@ -210,7 +248,6 @@ snapshots["vaadin-checkbox-group host label"] =
     id="label-vaadin-checkbox-group-0"
     slot="label"
   >
-    Label
   </label>
   <div
     hidden=""
@@ -220,7 +257,7 @@ snapshots["vaadin-checkbox-group host label"] =
   </div>
 </vaadin-checkbox-group>
 `;
-/* end snapshot vaadin-checkbox-group host label */
+/* end snapshot vaadin-checkbox-group host readonly */
 
 snapshots["vaadin-checkbox-group host required"] = 
 `<vaadin-checkbox-group
@@ -419,3 +456,32 @@ snapshots["vaadin-checkbox-group host error"] =
 `;
 /* end snapshot vaadin-checkbox-group host error */
 
+snapshots["vaadin-checkbox-group shadow default"] = 
+`<div class="vaadin-group-field-container">
+  <div part="label">
+    <slot name="label">
+    </slot>
+    <span
+      aria-hidden="true"
+      part="required-indicator"
+    >
+    </span>
+  </div>
+  <div part="group-field">
+    <slot>
+    </slot>
+  </div>
+  <div part="helper-text">
+    <slot name="helper">
+    </slot>
+  </div>
+  <div part="error-message">
+    <slot name="error-message">
+    </slot>
+  </div>
+</div>
+<slot name="tooltip">
+</slot>
+`;
+/* end snapshot vaadin-checkbox-group shadow default */
+

packages/checkbox-group/test/dom/checkbox-group.test.js

@@ -31,6 +31,11 @@ describe('vaadin-checkbox-group', () => {
       await expect(group).dom.to.equalSnapshot();
     });
 
+    it('readonly', async () => {
+      group.readonly = true;
+      await expect(group).dom.to.equalSnapshot();
+    });
+
     it('required', async () => {
       group.required = true;
       await expect(group).dom.to.equalSnapshot();

packages/checkbox-group/test/visual/lumo/checkbox-group.test.js

@@ -60,6 +60,12 @@ describe('checkbox-group', () => {
       await visualDiff(div, 'value');
     });
 
+    it('readonly', async () => {
+      element.readonly = true;
+      element.value = ['a', 'c'];
+      await visualDiff(div, 'readonly');
+    });
+
     it('required', async () => {
       element.label = 'Label';
       element.required = true;

packages/checkbox-group/test/visual/material/checkbox-group.test.js

@@ -60,6 +60,12 @@ describe('checkbox-group', () => {
       await visualDiff(div, 'value');
     });
 
+    it('readonly', async () => {
+      element.readonly = true;
+      element.value = ['a', 'c'];
+      await visualDiff(div, 'readonly');
+    });
+
     it('required', async () => {
       element.label = 'Label';
       element.required = true;