fix: do not apply checkbox readonly background when disabled (#7733) (#7739)

Author: web-padawan

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

@@ -91,6 +91,18 @@ describe('checkbox', () => {
       element.required = true;
       await visualDiff(div, 'disabled-required');
     });
+
+    it('readonly checked', async () => {
+      element.readonly = true;
+      element.checked = true;
+      await visualDiff(div, 'disabled-readonly-checked');
+    });
+
+    it('readonly indeterminate', async () => {
+      element.readonly = true;
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-readonly-indeterminate');
+    });
   });
 
   describe('readonly', () => {

packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png

@@ -109,6 +109,18 @@ describe('checkbox', () => {
       element.required = true;
       await visualDiff(div, 'disabled-required');
     });
+
+    it('readonly checked', async () => {
+      element.readonly = true;
+      element.checked = true;
+      await visualDiff(div, 'disabled-readonly-checked');
+    });
+
+    it('readonly indeterminate', async () => {
+      element.readonly = true;
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-readonly-indeterminate');
+    });
   });
 
   describe('RTL', () => {

packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png

@@ -164,8 +164,8 @@ registerStyles(
       background-color: var(--lumo-contrast-30pct);
     }
 
-    :host([readonly][checked]) [part='checkbox'],
-    :host([readonly][indeterminate]) [part='checkbox'] {
+    :host([readonly][checked]:not([disabled])) [part='checkbox'],
+    :host([readonly][indeterminate]:not([disabled])) [part='checkbox'] {
       background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
     }
 

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

@@ -124,9 +124,9 @@ registerStyles(
       background-color: var(--material-disabled-color);
     }
 
-    :host([readonly][checked]) [part='checkbox'],
-    :host([readonly][indeterminate]) [part='checkbox'],
-    :host([readonly]) [part='checkbox']::before {
+    :host([readonly][checked]:not([disabled])) [part='checkbox'],
+    :host([readonly][indeterminate]:not([disabled])) [part='checkbox'],
+    :host([readonly]:not([disabled])) [part='checkbox']::before {
       background-color: var(--material-secondary-text-color);
     }