Checkbox readonly state

[rolfsmeds]

Description

Support for read-only state in Checkbox and Checkbox Group.

(This is distinct from the disabled state which is not appropriate when the checkbox, or the options in a checkbox group, should be readable but not editable.)

Acceptance criteria

• [ ] WC API: readonly attribute supported on vaadin-checkbox and vaadin-checkbox-group
• [ ] Flow CheckboxGroup.setReadonly(true) should use CB readonly state instead of setting itself disabled
• [ ] Hover and active states disabled and interactions disabled when in readonly state
• [ ] Appropriate styling implemented on both components (see below)
• [ ] New style property introduced: --vaadin-checkbox-readonly-checked-background
• [ ] Documentation (Readonly section added under States) and style properties added to Styling tab.
• [ ] Screen reader support tested (it's likely that some screen readers ignore the readonly state on checkboxes – if this is found to be the case it should be mentioned in the documentation)

Visual design

Unchecked state:

• Label color set to --lumo-secondary-text-color
• Checkbox background set to transparent
• Dashed border color --lumo-contrast-50pct
• Dashed border applied with ::after pseudo-element on checkbox part (applying this directly to checkbox part would require setting box-sizing:border-box and would affect correct vertical alignment of box and label)

Checked state:

• Box background set to --lumo-contrast-70pct
• Optional input field border set with --vaadin-input-field-border-width disabled in readonly state (as it has its own dashed border)

General criteria

• [x] Design

• [ ] UX/DX tests in Alpha

• [ ] Documentation:

• [ ] How to test?

• [ ] Limitations:

Security

• [ ] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)