From b00d1b6cd3cfc36407e5cf29717c0332523da906 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Mon, 2 Sep 2024 10:47:04 +0300
Subject: [PATCH] fix: do not apply checkbox readonly background when disabled
 (#7733)

---
 .../checkbox/test/visual/lumo/checkbox.test.js   |  12 ++++++++++++
 .../baseline/disabled-readonly-checked.png       | Bin 0 -> 1207 bytes
 .../baseline/disabled-readonly-indeterminate.png | Bin 0 -> 1122 bytes
 .../test/visual/material/checkbox.test.js        |  12 ++++++++++++
 .../baseline/disabled-readonly-checked.png       | Bin 0 -> 1118 bytes
 .../baseline/disabled-readonly-indeterminate.png | Bin 0 -> 1007 bytes
 .../theme/lumo/vaadin-checkbox-styles.js         |   4 ++--
 .../theme/material/vaadin-checkbox-styles.js     |   6 +++---
 8 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png
 create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png
 create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-checked.png
 create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png

diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js
index fe6ce9035f..a84b068bdf 100644
--- a/packages/checkbox/test/visual/lumo/checkbox.test.js
+++ b/packages/checkbox/test/visual/lumo/checkbox.test.js
@@ -92,6 +92,18 @@ describe('checkbox', () => {
       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('styled', () => {
       before(() => {
         document.documentElement.style.setProperty('--vaadin-checkbox-disabled-checkmark-color', 'white');
diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f4531fd8d4533ec3cb95c35e05b08a5dcfa2502
GIT binary patch
literal 1207
zcmai!{W}u~0LQm0FU#D}n|Y}$tCkq$C7!fGF)=ly(WG!Ews5M++gK&3^EL|M5aH&f
zGma%Tw%fdnN1V52?pSEFaTBw!o&TU8zTeODdA`4YpI*keYVR`G1polF(QYo-ZIZWh
zQd51q@5S#d+XgTO>*@rkA21RF06U}6F6Vt>izJ0YubFE`=Q0fu;L<Q|qciDx_+Tqd
z%6?R(R6!D9riS@FwTH5Vh}|sx%lZ3?S|Msgpst`^`e|x~OI*@$l#57_ZP6qW>4}S5
zQk+EHEf9jZ5mb?ok}Xra*t=i<dols0PTW6|KsP?p^3Q{TpMmZKs?W(3JuTmMQ&Yq9
zsJXYrpsmH5)xD%sw<mys*{oruodASaM1?%DaMmkg$#_)3V4l|<<`WC{Gor6mT@?L8
zIQJ{cuV$4CY)~;{N9^Savw<v34O;l}jjSvmu8XHXnpT_j`aFURtCA~3^Pg7ea)W&H
z(}<E=u{lIq$_{K2AkeMDtivY3ISG{<TlH|l-Q0K@BsrH3>DKC&r>P`<Yq|4t2Ztl?
zUs-Woyd<@;40tWhg!fUF9QF)gdbsU&d?XT$N!JK@;S(C*+be;Go*7ZEdWaLB-NZ!b
z^V*c(VjNOm$SSpEu1057CKhl9g$R_P$CiVgpK0h1wWG@qG!!s|6)#X-$BwrG$L&MS
zR+n|+wfTL<&u2QV*?XI@d!@7ZD`vPXR9C)D>sT4Hwm$ITFY#9hE%&5z$ae}N&7Hwv
zCzikoqh$nII<C-T37u^o4t6*GRwxh?B0fT4dXVhmWzSaS2Bo*^K!%-p(>k<<foY~R
z%|W5Np!mmYIwWuVieU<MLs$K6--glONFkm=#NCZ~N4_fw-S4{9&VqN&T~|JO<6YXv
zDrmmxGR;R(*Ov;KBRH-Rni!rWL{2|v?P4tpCP<hf;+9#SSJYa3YV;O`3DbpGUPo06
z{Cy|#frsB!F3eOG#S0m!6eY*GW0UfL{rXbM@0>a8Eza;@`vK~&nb1;MQkh-V_&_IW
zEVwaRjxx0_cB*-5kH1=;K`ei@mIsalR+B4b^KhNK*vG_+r+=(PZTkHY9??3be6LlV
z{ioP!62tB%d&e~)@8^Q!ri~dsJ~KCMVGI2<&0g&InrGd!F;M{I5-Yeml03caQ5je>
zgj+0)F=+XMF#Bj3GMGwS;*V@}@yv}y+oM=#^+DLz$kkl1zsd3cEI^X9-6!}%Gdtea
zab-aS#BheS>X0K4?=*Z_;Hg3g8<UYG#qPK-0O2U(DA7YjzhKvX3J=4Ete_Y6lG}(h
zv}2v)7yY6PL+>y|+EP@G6q~XBRp#rpZfk2h`rg|lCL#SpM9@IPn7xqnd1Vhsk_+)c
zygVZ~aRb_Bw6E-{1CQWI9Wvlf<#f&9o^R^VvBh`#CYuBM7dfwd`G#Ieky#8<a_1zu
zN374IUlXPK|0SIINvdL|`iEn^%LNN+Ni@<36O`D|z_Fd^uW-&Y0b%~Vt@4B=R8ZY}
z>5MVc<!%jy6)zKWOp$ZYP@(-B%T4ja;aRQcxkyWF$9IL#JgUJ<)69geZa)zKeF5WA
I?-WG&9~aG7uK)l5

literal 0
HcmV?d00001

diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c790dad638277a0d4184c38e0f8d1e29dccacd0
GIT binary patch
literal 1122
zcmeAS@N?(olHy`uVBq!ia0vp^^+0UI!3HEtt63HTDaPU;cPEB*=VV?oFtEsYx;TbZ
z%y~QOz5gQ*nRa>os0hc4b5s{@=aeu_yDGk2@%y6x|GW3?FuB9MYkIGM!cJYzqXGdp
z#P00SkJ`!_lC%5ai8G)3UjBJi^XzwWTb`|rjg5lfr2E%w8BhM2@QAxdBtBuu4<_ZK
z;u4zs4tRWIb?eeM2&!qEh(#*R+B5n3?2mW9&ba&kf$e-&4eQ%a$~J3QceYJeNzs0H
zTxOkla)q^@$&W-uee(lSoo~PG-yQep;BjH|LitHQj)>J;?e@3%@#dfVBfCR8wzVdz
ze|B4MociPHqKos7)%^RPwASwXU%_;r^EsD$rmU=4Cw6j~xo+Z(ISse-6H6W}s_K-}
zDtjv?=kYOlgXE)X+aABXm96PplQnC6%pCq`9^Td*WfvX$q>g*BF=w3)C-=nX1x2Nv
zhQjL%<m1YAu8<3kFq)DbePx&TuZnEGIR3@&Z2q6ie(}8h;zw`M5?ygk>8a-}Y=iDa
zHBR;L{j>l7&+?^J^?!f9oNL=(_^vGQe0a^nyxDF)dG@Y)pq_C3%9}f%mA*wwn6tmQ
z`gp;?hPKRulPj2|mhnC{{&L*)-FFE+>DBiaU5gdD_A=)8+tqc|*SD>hX>*;sb;EJq
zr?<q~EV*Aj(FikjOY2|wEZ^!npP94Qp~J`Se0X|dPwYwc^{qP23j+cdS|76y>3doF
z;L*uL417N$nx6I6dllqLFAwRAx*k|~@zs2mm`OS3ww})t^(&C5>@S{CP$c?Q<)T&p
z=UE?)$~9mAY<_dHxJUaHo&SHu{>mL&tzKHaKJwTUL1CH8Q8gi-=2veo2&zn;n7=Ra
z&c`H;fT?qLPLegMEXZ3fVjS$Yq9*3XS<7$UAMU@Ml60)TeNEWIBRR<|iK=h!q%kM$
zJ7gzp!yjh;|9ZvSj2*Xr-eJ5F^8Aa?zhw{KUH`I=G4KBNj<o6tPVrp71+VY=VYB(W
z3{#xb-@p8R>qBOhcHi?7pX+$9XvrR<cEiPbZ`y6c|4YYz(|QrEb+)R1%X?>Yhnf>v
z=`jh(GrGAS+*<qe<c*-FUX%S37PjcE&RlV~?8~&g$V1aL*%s;KF)S~Z)tYVeC+qPO
z{w9HmizDtWjqE>nd+TkJ&$m8z9(?`NvUOVX8AkES_NY_ar)QV`j*gDjz80b}Cw|fQ
zXo=4scZGDu{MzFhw)=^(n5l8enXWH|Co)B)o|(F-Yn;k{;qGm9TIAyC<epukGN=DU
zte>Wxa!c%3?21~8lQvdv>F;8_M8AAK9+T{__?>({xBvU~3uom@c~!aZz48AQZ(Dii
z`|nfd=JIj>bgA`tBz*gA{Ry@6B}KbG<>k#ivaM!<d~uFd=aK0-X3`Vide`yd$alE1
c<R6xAa+5zkoxJrnu+U)eboFyt=akR{03S{$m;e9(

literal 0
HcmV?d00001

diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
index d7ff082e32..bf1e7e95e5 100644
--- a/packages/checkbox/test/visual/material/checkbox.test.js
+++ b/packages/checkbox/test/visual/material/checkbox.test.js
@@ -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', () => {
diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-checked.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-checked.png
new file mode 100644
index 0000000000000000000000000000000000000000..01d7c7c2fa7669e74a139fdec99878e47b308b25
GIT binary patch
literal 1118
zcmeAS@N?(olHy`uVBq!ia0vp^^+2q{!3HFKmZy6GDaPU;cPEB*=VV?oFtA8?x;TbZ
z%y~Q8*8jDQgv0sTs|P(?PaP0oQ@PJ5A{J75O5!88QP~&&(>DzFGo+pg*|;@n<#IFU
zb`PEkhexuLw!LKk?&QH5{%xYf25IXjHg$h2wD#Wvf`W*X_4jL;``#Zuxm`m2e$t$p
z?!r&H$8d6%UH^9IYSz&jyXQZD{tUi8ckbN6+S;>6kGkGoDJy%i>Z!f0ZEcjzfzzkC
zKmXkGc1s^$rtW=-%T<@m9GM*~l|3h&^<TytU^IK`Ykq^<Tgp2f(>YJ3%{%|?zfaWi
zzy7|LUO%jqTYYuaQx3Mdy(hP*NNFxv5nbvwDT5=K$t%s%i|@p`yqfg91NoQ#7h6^y
zy#D&D1Yi4|yLS~^GECbpR_fZ_>R=Zzaypv$ceeY2q(h69Ygik5++5zfUAh0OUQd1M
zezE)Szt8kruDiWUXl^D4yY(aUib)-l)(P+Boul*ieRsUx^tWtU-C9%k&o*T-vWO{j
zOYbq}eUskv_8Wu1v91Hw_rlk{Q2sp4c#=sxe*>4xV(rA+S7ml@v<=yNMC-uqZ2sid
z_&w%s+iN2KJ$<Sg9v<$aCL9+ZzuIxP(0!q~y^2x`Ln7>N2#HpN6mi!q4PbDa+-rP9
z!>P;5W}{Q(>jx(<R!8$XL_Vo*417M<W@(40*Hy;}>yEEu$+mQIZ7Nk*!g)l?!L6%e
z+Jt99iVhr{KS~Sc^!bI=?Z2OHA!9Vthhbl+&6{-*>jPUP|9bSbsodYYz~G0?q;|tq
zb+??{G`89ob)E}4;~*%zS?Jj8&{wR6iSrh5H-9mi$=A8KbOT3<gkq^%AX|l8MWd3M
zqO5wTS>W<3aUWBEX7Aj-eLGLPb3@)y?nag^h7P-%3fm3VZ9bs))Q7p*K7Mw33PYXe
zgTKCg4p(+h)a2&tV>)!0z3Y-dMd^ZTjFX?UraqWka@E<L^?uRL6sx(H-hba6|Ix{a
zqw&wg$H&W?&!yG;Xo;24=WCtt{#!0b@)ZrIXD`|BsY>*)-52IK&tBA}Z2q$P_FCuk
z{*H?s9?zD{w5t@n9l3RXj9#RUn2uQYx!}FxM_NLDe|~3d{z9kyLvr=v3CvD&4fFQ(
z7)r%9eNYWbe{z=dlqCE6+!mEC=aOmiY{|+Mry{-dl$W@dDovcQ{I-JWufp5=e_AUo
zS<&AY!und1`9b*Y|2HZtDt=r#^8New`TLeddWM^5|2*tfn{e#*`O_VNDuSgGw`=aY
z{&s^VL;3HTuC%Fg$29ie2>bm$<Zb)y({caP?zvUpJ@#zLC7J!z|1^L0<z>$Oc6;Ai
zW(#}!{MxmPt)ouw-?=kWHIU=r`}_NE`@McK;acYXkMAGvJDF_gx9_OMPqD{OqI)Li
d<Kg^go}2$A>3XnpAF#k+@O1TaS?83{1ORH666gQ`

literal 0
HcmV?d00001

diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png
new file mode 100644
index 0000000000000000000000000000000000000000..135d6b13faedefd92720af2d6b0736b5eab24ad5
GIT binary patch
literal 1007
zcmeAS@N?(olHy`uVBq!ia0vp^^+2q{!3HFKmZy6GDaPU;cPEB*=VV?oFfgz5ba4!+
znDchFZvJa4iH7;brH$-rtUN4L3Bd`83%14!M7)?U7BM5<KvIg&P1%%3qQk^sbL<2Y
z-~H#d&G|Af?3*&LPJVKEW!(Nc+06ZR_V)IjEGO;je{;M1lMAdn;PR7E_$j;36nO*O
zod14%KfZn2`?c!q@87@s-|gPH^WnpXjk|a6UK#A3mh|aVeQoXEjTH_3{ruNnf4!2a
zY-|*{?|a>+CBc)}8n!LdIsNds1^<>SrMrJJd@ZQ;vpF|q%3&M(-gvdir~m!$K0Z_Q
znCF!sW!L(vlBX^?#!a{wG+k6|Li$W;kL5@7r?1ZVv1jw%3eygDfuM!md;aSxUS|Dy
zQScv2V~F>alRdw*>UPF7{t-);dD1QWk-5|5qEY!m{>Ib#zjH57Eh;=?)8LTSe)^pC
z;Zqg~`;&6Evp4LykaF^4#P&t~XKr7cGW9M`!?`0GA)9!6kIUuq$4+rdSE;`K*=e%b
z@?$fm-+W?kYx~#i-=9A=*F)kTo#DD7wD$AAgWF!{ES!9MLRK%^2focl9ZQ|M{A^m?
z)Mr20xMS~HwgtIw;*!3U9uG5Vb$e~cx$5kVxe4miGgNP=IE6YbG+uH^q|`H2)u};1
z$m91D3;F5$KdBptP41ax@IG#Xg~r==yuIpAS!avC_?OAO@<LVp6R~uyKTeDLB2RWF
zPF0I^%+ro}JhAiejyX=blUx;wTT9xOo%Im%F!FWu+^V%ZYti|Ydy~z6rbpj&Qeb>;
zTd?ZO|Asv;Rv*yIecN#K{rjzK%oDbyoD45wS#-a*=5|4WhybVNg)Q@RUJ7sZm&lgB
zrDOSeReN^EkCv2)%->ocA207WHob3`XnuUQv*MGJHyq*?Oy|m6oxjKXLj`-Ll7J^y
z#4P1_Bj0V&?Z)~YPlZ%<rxvE?C+WxA{q0(Cdw%)+oyR4)e}4bwrYQd8+y<%rJs<h5
zH+iUDl6+IqwC&l0y}c7wC>@uqp3$@TN#<)VZBe6z))PH8Ts8CDTYd9b`+jFd*ZPtr
z*%9YwGVEXW@A$d-(|)d(I+EOD{j#r6z5d2Z{Xbd1D_2Hnb-tLrXW`3xG3^T(@ANJ;
zd8}uve<5@8+i(6QZ`*I5j;onbUb1)pv4SAUetY|HReK}-$*1>ORKEK+>-O#2C%?Nr
zOWyS7`0?YOLahRK?%(&HYi6W8`E=crUpu?<?2F_U{b}g@#H@CTe};yA0&dPf=BN2v
V<JT95aszWPgQu&X%Q~loCIAKU=3M{)

literal 0
HcmV?d00001

diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
index 498c77aa8b..1ce3dfb8e5 100644
--- a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
+++ b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -171,8 +171,8 @@ registerStyles(
       background-color: var(--_disabled-checkmark-color);
     }
 
-    :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));
     }
 
diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
index ddc1496568..7c2774befd 100644
--- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js
+++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -126,9 +126,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);
     }