From 40488c15024b7f007963c69f4e2be5d196088436 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Wed, 10 Apr 2024 11:48:20 +0300 Subject: [PATCH] feat: add readonly property to checkbox and checkbox-group (#7199) --- .../src/vaadin-checkbox-group-mixin.d.ts | 8 ++ .../src/vaadin-checkbox-group-mixin.js | 26 ++++ .../test/checkbox-group.test.js | 32 +++++ .../__snapshots__/checkbox-group.test.snap.js | 134 +++++++++++++----- .../test/dom/checkbox-group.test.js | 5 + .../test/visual/lumo/checkbox-group.test.js | 6 + .../checkbox-group/baseline/readonly.png | Bin 0 -> 1504 bytes .../visual/material/checkbox-group.test.js | 6 + .../checkbox-group/baseline/readonly.png | Bin 0 -> 1141 bytes .../checkbox/src/vaadin-checkbox-mixin.d.ts | 8 ++ .../checkbox/src/vaadin-checkbox-mixin.js | 70 ++++++++- packages/checkbox/test/checkbox.common.js | 26 ++++ .../dom/__snapshots__/checkbox.test.snap.js | 87 +++++++----- packages/checkbox/test/dom/checkbox.test.js | 5 + .../checkbox/test/typings/checkbox.types.ts | 1 + .../test/visual/lumo/checkbox.test.js | 36 +++++ .../checkbox/baseline/bordered-readonly.png | Bin 0 -> 1421 bytes .../checkbox/baseline/readonly-checked.png | Bin 0 -> 1339 bytes .../checkbox/baseline/readonly-focus-ring.png | Bin 0 -> 1754 bytes .../baseline/readonly-indeterminate.png | Bin 0 -> 1224 bytes .../checkbox/baseline/readonly.png | Bin 0 -> 1421 bytes .../test/visual/material/checkbox.test.js | 26 ++++ .../baseline/readonly-checked-focus-ring.png | Bin 0 -> 1752 bytes .../checkbox/baseline/readonly-checked.png | Bin 0 -> 1160 bytes .../baseline/readonly-indeterminate.png | Bin 0 -> 1070 bytes .../checkbox/baseline/readonly.png | Bin 0 -> 1017 bytes .../theme/lumo/vaadin-checkbox-styles.js | 34 ++++- .../theme/material/vaadin-checkbox-styles.js | 6 + 28 files changed, 445 insertions(+), 71 deletions(-) create mode 100644 packages/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/readonly.png create mode 100644 packages/checkbox-group/test/visual/material/screenshots/checkbox-group/baseline/readonly.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/bordered-readonly.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-checked.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-focus-ring.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-indeterminate.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly.png create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly-checked-focus-ring.png create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly-checked.png create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly-indeterminate.png create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly.png diff --git a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.d.ts b/packages/checkbox-group/src/vaadin-checkbox-group-mixin.d.ts index 4937a7d0022..98827137af2 100644 --- a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.d.ts +++ b/packages/checkbox-group/src/vaadin-checkbox-group-mixin.d.ts @@ -33,4 +33,12 @@ export declare class CheckboxGroupMixinClass { * creating a new array. */ 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; } diff --git a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js b/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js index f61b78b606c..0dc8b9f3262 100644 --- a/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js +++ b/packages/checkbox-group/src/vaadin-checkbox-group-mixin.js @@ -36,6 +36,19 @@ export const CheckboxGroupMixin = (superclass) => 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', + }, }; } @@ -145,6 +158,10 @@ export const CheckboxGroupMixin = (superclass) => checkbox.disabled = true; } + if (this.readonly) { + checkbox.readonly = true; + } + if (checkbox.checked) { this.__addCheckboxToValue(checkbox.value); } else if (this.value.includes(checkbox.value)) { @@ -248,6 +265,15 @@ export const CheckboxGroupMixin = (superclass) => } } + /** @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 diff --git a/packages/checkbox-group/test/checkbox-group.test.js b/packages/checkbox-group/test/checkbox-group.test.js index 67e83ec96ea..69d19d5c566 100644 --- a/packages/checkbox-group/test/checkbox-group.test.js +++ b/packages/checkbox-group/test/checkbox-group.test.js @@ -84,6 +84,38 @@ describe('vaadin-checkbox-group', () => { }); }); + describe('readonly', () => { + beforeEach(async () => { + group = fixtureSync(` + + + + + `); + 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 readonly 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(` diff --git a/packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js b/packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js index 3d1a85797bb..9f18c60d6be 100644 --- a/packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js +++ b/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"] = +` + + + + + + + + + + + +`; +/* end snapshot vaadin-checkbox-group host label */ + snapshots["vaadin-checkbox-group host disabled"] = ` -
- - - -
-
- - -
-
- - -
-
- - -
- - - -`; -/* end snapshot vaadin-checkbox-group shadow default */ - -snapshots["vaadin-checkbox-group host label"] = +snapshots["vaadin-checkbox-group host readonly"] = ` + + `; -/* end snapshot vaadin-checkbox shadow default */ +/* end snapshot vaadin-checkbox host label */ -snapshots["vaadin-checkbox host name"] = -` +snapshots["vaadin-checkbox host disabled"] = +` `; -/* end snapshot vaadin-checkbox host name */ +/* end snapshot vaadin-checkbox host disabled */ -snapshots["vaadin-checkbox host label"] = +snapshots["vaadin-checkbox host readonly"] = ` `; -/* end snapshot vaadin-checkbox host label */ +/* end snapshot vaadin-checkbox host readonly */ + +snapshots["vaadin-checkbox shadow default"] = +`
+ + + + + +
+ + +`; +/* end snapshot vaadin-checkbox shadow default */ diff --git a/packages/checkbox/test/dom/checkbox.test.js b/packages/checkbox/test/dom/checkbox.test.js index afc16f31f00..d03601da34b 100644 --- a/packages/checkbox/test/dom/checkbox.test.js +++ b/packages/checkbox/test/dom/checkbox.test.js @@ -30,6 +30,11 @@ describe('vaadin-checkbox', () => { checkbox.disabled = true; await expect(checkbox).dom.to.equalSnapshot(); }); + + it('readonly', async () => { + checkbox.readonly = true; + await expect(checkbox).dom.to.equalSnapshot(); + }); }); describe('shadow', () => { diff --git a/packages/checkbox/test/typings/checkbox.types.ts b/packages/checkbox/test/typings/checkbox.types.ts index 740d0e1ab5a..b513bb5cd99 100644 --- a/packages/checkbox/test/typings/checkbox.types.ts +++ b/packages/checkbox/test/typings/checkbox.types.ts @@ -26,6 +26,7 @@ assertType(checkbox.autofocus); assertType(checkbox.checked); assertType(checkbox.disabled); assertType(checkbox.indeterminate); +assertType(checkbox.readonly); assertType(checkbox.label); assertType(checkbox.name); assertType(checkbox.value); diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js index fda12981e33..f05d9adf24d 100644 --- a/packages/checkbox/test/visual/lumo/checkbox.test.js +++ b/packages/checkbox/test/visual/lumo/checkbox.test.js @@ -64,6 +64,31 @@ describe('checkbox', () => { }); }); + describe('readonly', () => { + beforeEach(() => { + element.readonly = true; + }); + + it('basic', async () => { + await visualDiff(div, 'readonly'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'readonly-checked'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'readonly-indeterminate'); + }); + + it('focus-ring', async () => { + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'readonly-focus-ring'); + }); + }); + describe('RTL', () => { before(() => { document.documentElement.setAttribute('dir', 'rtl'); @@ -87,24 +112,35 @@ describe('checkbox', () => { before(() => { document.documentElement.style.setProperty('--vaadin-input-field-border-width', '1px'); }); + after(() => { document.documentElement.style.removeProperty('--vaadin-input-field-border-width'); }); + it('bordered default', async () => { await visualDiff(div, 'bordered-default'); }); + it('bordered focus-ring', async () => { await sendKeys({ press: 'Tab' }); await visualDiff(div, 'bordered-focus-ring'); }); + it('bordered checked', async () => { element.checked = true; await visualDiff(div, 'bordered-checked'); }); + it('bordered-disabled', async () => { element.disabled = true; await visualDiff(div, 'bordered-disabled'); }); + + it('bordered readonly', async () => { + element.readonly = true; + await visualDiff(div, 'bordered-readonly'); + }); + it('Bordered dark', async () => { document.documentElement.setAttribute('theme', 'dark'); await visualDiff(div, 'bordered-dark'); diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/bordered-readonly.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/bordered-readonly.png new file mode 100644 index 0000000000000000000000000000000000000000..69602e04c011abe05a92e22ca9f0033b7dc70646 GIT binary patch literal 1421 zcmaKs`8yK~0LRB(a+lC6N35P=GU8#m<{mM3?&bEH962`IUc*YvF)EYCop%Z4e7y)S zQXz>E=A0udW3n8@%+>1;=y`wmem_5ae*a`RIarH}$cX>|0CAfemM$kGo=jUv@Z{qN zzfn)Xhjy_x2hrqFK^S4?2LOjd9r>?}nyMZ7Y|L3V&&3V%<_}=q-w#TQ>EO(#%90doD1&c+1?u}<7X0e< zjV%GIOwDU93HNfCqFK^@{?GRKFa1IdO@-|cf(s*7%v@T8W$hK z_}M9F%Lm=bUFu)X9`ksd+wTa@A78eYk}|H~wmItSH&G(JoHf!CY&Uwd zOK4+5;EL-QxYtv^aV=3=oO;??P5QYaH5%JpC5m;i`~m}HXo<4nfAoo|+V-&4O4dKL zYMgJWK(1n7RWBwDA>|{!J4|^#GNl|YT?{{>`Dpx`5d&#ivq-+vfK?ftt=-S_*DJc~ znqo?KP;M2alk6dT64PAQ(00#1oly}(qR63b7|Z6&E)UV5573@#7oAW0VDzOX2+#7o zE;DVH4TogwAeWftg4nsB3x=hYOy6@)aHhc^;FY+gf{t65(e+ybape)mm*V< z;levQ=f8vfVG)D}%-vbxQ%80UhVFcWCg_;qx5ub8C8kAkxN~SYt%{6^$O)nG<-?o_{3L~a$;0*^-x~7Lg5Edi@dyi44$oH&A2a-uT zQEZWhm1}V!aIgC(D;3*OXA18(^=t1GPRHNUapbX!udXhZX==-_ zYmkJNz_l<14Xgd8mUr9gJ!U)jnn~%M=?8j^Jae()FdTjSsAi!s1KkKYB@{n#{R_>j;oXB@UVO~`9(!U}m#c`fH-UgcdL zE3e5g;w;w9vly2}9-F((T+uewMzFOppqz0d1*{EC89^x=vDpLMvsT@Nq zr)fj)fR4V_$QwmFO5Y;HdR0)=O=Z`CQ7_;T9aU|zIYtAHkr1GRPT9GXuXaD=C@sy@ zo`@AHg@-mKS#+evCP89=JEmQP{@2uj58CK&vV7v|6)oI2DI>EFvtkoh4Wi=d zZ|`?h7m=!p>^e48GgL=J@Y^H`znro5ozd^|}^Df+exbYAAW| zN(05Wi#+~`J0p2xpA0376v!eS&Ki)&)Kl>|hW0VL`|VV`v*~cqhqIse&S|@lQ6@f_ zIT+L`_RS5WlkYUa*=V+)TR^Y!WN1BB7<7|nlmgOT%8KVQiOHV*5vX}{HO}uzze4ak zRb{jxoZM)3|FCWD_6ML!>Uw_^t50=P)7X15+3;RZ5ZQ*7Bo1OnL=_0jKzEpCXA&e~ zF&=c}3uv7<{H5_{E<03~=F@2#_E&ECH`A@LZl$g^QH@6V!^v9ex*Mz?*+^;lv+@1J zPBdzG%II0g%~Qp*iE+*sjVsy*QCP(%BRheMD)oQWF>+nkY?6DAXvVMc9_jWRT7lu0 z+svzbxJ?YEUJZQPGM&3g23%XY$D9!8Q=b?2wkU8Wg#ieuxz!HzcvxYiSvmcBXy9X% zw8HqT?oy>0uxVQN>!>`d6q|nKrmF>M2a{f{r;d;0;^o447zDD;sUWoe4FO*OD z3A&kk4{ShG3s+7;zNdV+`O!|SH}TTw1(Sd8I{P#UevoFUVc-Ri;9^s5^>W{#7V1Qh zkme}Qtb|;Fm|R#0RsxwCKLJ6%=P8Fz`0FZ~wO6wcMka&Ud`FD6Eo`D2R@56tXV77+ zvR5pXqYVpg6z2dK+%s%y&}HZH7yIhz0e^$Y6U<`@3mJwc^-~ihINQzV>B8aco4b!% zkIOIX;OJCe>TeFVod}pWHOj>!rHu(RVA)w$64Lz4{+_W2Lf6fqO9Zz&BzC#l(*jiB zR}>=jidD;Pt-8fhHtzCM1t&{Maq1N0(3kaAV$f^o7@t+2H$8*l9$D6wvT~?>Y4Ije zgQk^{NGlQfdX~j=lj0|#r0P4y7eVPwj==m;LNZLwBe3BWV*m+#=!MF&LY%fXac*

)LSh%55&5h^Q?W2j3s;YE)i#8nkUgu9w<9G))1UMmF;Pv)?iT?n-ft$qu literal 0 HcmV?d00001 diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-focus-ring.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-focus-ring.png new file mode 100644 index 0000000000000000000000000000000000000000..bd4e751ab055b4f27ed9a485593c0c891697ec13 GIT binary patch literal 1754 zcmai#`#%#31ICBrE>sA~c)K{coO0{9ZXd)bY)9E#GD$86J5x5ywL=YIyb2}5$|biE zhRHaXSRL%O!#HMcy)I+2=Gth-e{g9Ula6v1 zs_9-lW!D=SYIAf~fk)22fK!Mb*tc;{xzK4=e)l)|$;q8$U{}W-(xh^(rACReq0c8F z|MyDR^Q0c$lQ(I_+#Av6@G03o*(inHq;bdeTbG9k7r;u{K!QRUa28NO@>>YYFiB#Q zQ)PzO3#^NMMlAV$#k%!CN)bZ>CaIJK49pm1U+dI5jnQe}n&+z585;RKP3aHh5C>Ybld@Mh?NvMrt9R1=J+j>Tg>h)f<}>W#G_~6X6B@xaBP;&Wc8TU5S|eRG`{Z& z0&!#tqj?J;TW2_pz=7XQX`jn5(Vi)o9mwAoe&Wsfz3*Sb{=@B1{!#xDo6pZs*6W{BAglML0<$xKylfU&f=>zOMQ_s?xMV z&2$t-d2kmYXpZ3&b+fP4%5%(hqR5;xz4)vZ1pTVftJ!_THHO;3dz~7s%unlc__Qu( zI3jCgs{E`*8=KU)r{+O$SDaoLbY}kw+%$m~ulj(cZc(qr@}#ntFyEZk=CF-QWpBgK z)u~N+3mV1MP$8d&!8LT14G`p{EP4(p;YkOP`j1u1O*j_gn43r&(G9|^4t!vd!w@bW zO%VCcKkZ~K8HniA$Vf(kr68pOs?)peTQ~ZVB3z8uGlpC2is6VZ zT>F0bd3r|ntK>}PWPN~J8}^z=Jt*8zGJ8qM9jEEqC^<-~l%HEFgJ34RtH8DO4X%o> zJT`7FXQ^(ikI|N;Gh5q~P>{IzVc?z06`L8nWXGHT)K{h@W21LmbT*F)aCR29E&kN~ zo--fN^gfcZPFQwc`zC)Og?&je>?7PZQe}z7+~}D?yt6g zISlNG2|EQn&}0$K_Z;Oft&^oMLMX6|c7+JD;z^x`DI=EtU0Y6`-AzPOMn!Kq1BD7v zeYM2Ho`LALa7ijBL8WOWQftxgw7Z63Re1|Y6$f#=8Ad&?doXo(2y8rcU`tZLOvJQr zj}QK6KTB27v(dPFshS=9P%p%Oc!C-K5zm@=nrK*oyIG90fAYrq@{LWv3oSv|^TC$~ zvpDF)dtL|G34j+8KAQLWt|ygfsV z+QAU>7-_EhF>t93;2z zFY6+K0|o_Dm#8BB-Y%MVjDpc-nBRjvY0Zaf==!kLdSqO5`m}T3%bHJ}b~`ddDce2{ zU-ra0$a&EF^vyXm>05UY}5` zi6@qlejMeZ7@I-i)8GWA_4_F7?B|~c*a6U=Ucml*GhM-4M z&USBAs`cFdd=d24S4@Y1tZqA<9$&Po^{sCXnf@c5# literal 0 HcmV?d00001 diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-indeterminate.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly-indeterminate.png new file mode 100644 index 0000000000000000000000000000000000000000..48352d79ae6463db6784b1be99ce40a6c4c01f9b GIT binary patch literal 1224 zcmeAS@N?(olHy`uVBq!ia0vp^^+0UI!3HEtt63HTDaPU;cPEB*=VV?oFt9Xvx;TbZ z%y~P@KSL>8=D2-y)eAY3=Sy314w;2L3XNoPitN;A+{^LWci|*kU-QJ~y`gN?t0g9- z`gz)FEPZg$+i?oZX(xr2CmS|MxM(i)Bl=#p6=!6c=q?_Uir_p z`E~ba{&?`})hn*f2{onnIX&L-YwkPX@sZW7OWz=#4Kw71Wvge&sJd#d9dfB*Fl?sl*L z6`0pho$}=Nzk9ctFL(bB{c*d5=j4kXow~2{>wWd>>V6(9>B&1aOMG^iboQCJSt4=O zk!Q`_-~8WX5c>ISk@)-t!O6E*PI!~aJ;}Q7fkb@Np@Q{~?zdLiwRyLmy`&eKy?pPQ zqdPJh4p)7SIhmm5{Kt!Hx|Q*V7V9ZHY`!WRF`obF%Vix|^QwEH>$>O3H|E4Wp1kPK z$vXYpQ~z<8ZrlAU_nbuQu?JgE-FhIg{i%cM)yd6ozsi06_qF;@_dPQ|d&6y$=U07x z9q?FbecjIJ2gekT{$2hf-EE6i8+R+ZUftnrVC*)D;vk-?Z7ZKAvs}7v>mJDa;&cDkpQ&fP4|rC`lyiQTe!6N+ zWufKyUc=9ObX+Yz{&7?kIiBCTY1ssx?6-4{9b}nP(;&I5eeKJ48Xv#0Zh8>U=~Q*! zqSADeR?aH#T^|^(sfHbzp!0J1nmL{UJlQ#=u}@Y$^@v^~Cde`IS|eSFI&s}$YfW-qV%DaY94#FMRmmfKw{f0R=ZY;Jy8aNGQ2lIk*(zEniM ze$UNpveTmV>(pqyBF)BZc{A^i*|V7rnEzg}{;A;QJdJr~4{sa$acoL@Ki~9xl0=!` z?1by)ea;sn%C&A>+A!~??C$M9Kk?2lZDSRRiD61E{4&4FL}uMQF-H0JnIy=X<@ zgtpe5emhq@7hZEVGsM_&(n7{%7gdB6>@23p%vLGjEjXL{Hch=wHd*;=?1?J7t9=hS zTt6#M)~^D4&+* z-QbpI2mdwsmQOn{<9^(|*SY^69?ox*$vn7!=ze!+dL!6(#W+TB{ktQgd$0Wt>3u1yzwPh3pVG3E zEw{=%?~quR_g?VYiad$9#T$=jX>|Lam7I5|DZV%8i^iIB&#KNWk#zgF{$755(6amQ zZ_l%N_B>oL*idD$@u%GSm+h{XyY0W*8_PNySt-x2nPC5HMu|_S{>&V;LvOw9_=(EP dh;06cKj_CAxtF(0M1VyTgQu&X%Q~loCIH2aP@Dh& literal 0 HcmV?d00001 diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/readonly.png new file mode 100644 index 0000000000000000000000000000000000000000..69602e04c011abe05a92e22ca9f0033b7dc70646 GIT binary patch literal 1421 zcmaKs`8yK~0LRB(a+lC6N35P=GU8#m<{mM3?&bEH962`IUc*YvF)EYCop%Z4e7y)S zQXz>E=A0udW3n8@%+>1;=y`wmem_5ae*a`RIarH}$cX>|0CAfemM$kGo=jUv@Z{qN zzfn)Xhjy_x2hrqFK^S4?2LOjd9r>?}nyMZ7Y|L3V&&3V%<_}=q-w#TQ>EO(#%90doD1&c+1?u}<7X0e< zjV%GIOwDU93HNfCqFK^@{?GRKFa1IdO@-|cf(s*7%v@T8W$hK z_}M9F%Lm=bUFu)X9`ksd+wTa@A78eYk}|H~wmItSH&G(JoHf!CY&Uwd zOK4+5;EL-QxYtv^aV=3=oO;??P5QYaH5%JpC5m;i`~m}HXo<4nfAoo|+V-&4O4dKL zYMgJWK(1n7RWBwDA>|{!J4|^#GNl|YT?{{>`Dpx`5d&#ivq-+vfK?ftt=-S_*DJc~ znqo?KP;M2alk6dT64PAQ(00#1oly}(qR63b7|Z6&E)UV5573@#7oAW0VDzOX2+#7o zE;DVH4TogwAeWftg4nsB3x=hYOy6@)aHhc^;FY+gf{t65(e+ybape)mm*V< z;levQ=f8vfVG)D}%-vbxQ%80UhVFcWCg_;qx5ub8C8kAkxN~SYt%{6^$O)nG<-?o_{3L~a$;0*^-x~7Lg5Edi@dyi44$oH&A2a-uT zQEZWhm1}V!aIgC(D;3*OXA18(^=t1GPRHNUapbX!udXhZX==-_ zYmkJNz_l<14Xgd8mUr9gJ!U)jnn~%M=?8j^Jae()FdTjSsAi!s1Kk { await visualDiff(div, 'checked-focus-ring'); }); + describe('readonly', () => { + beforeEach(() => { + element.readonly = true; + }); + + it('basic', async () => { + await visualDiff(div, 'readonly'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'readonly-checked'); + }); + + it('checked focus-ring', async () => { + element.checked = true; + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'readonly-checked-focus-ring'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'readonly-indeterminate'); + }); + }); + describe('disabled', () => { beforeEach(() => { element.disabled = true; diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly-checked-focus-ring.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly-checked-focus-ring.png new file mode 100644 index 0000000000000000000000000000000000000000..aa8c7a340630b8fe5b8a982229f08fb33f478387 GIT binary patch literal 1752 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 literal 0 HcmV?d00001 diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/readonly.png new file mode 100644 index 0000000000000000000000000000000000000000..be01e8d0d118246870ee05b682a76daea20ffe76 GIT binary patch literal 1017 zcmeAS@N?(olHy`uVBq!ia0vp^^+2q{!3HFKmZy6GDaPU;cPEB*=VV?oFfecSba4!+ znDchFZQf=t5eI(%d}hDa;EU_w9aJref5~gnB-*g4Y0Aq5EK5rs^O;SUrxl>; zy<sRha26=h;HDRk4 z9?m-E!nP?!FLh_kzX*Fl!IRF6yH0m%3!YTv`RvQgx%-phN|iE!U4{Fi>*vLsm={0! z3~x`QV+^O#*{^4q4$lx|2oNZ(@3;LXqAwj)zb~fck5%M@RKCKgk7nI2y6ijACddBf zk4eJc+D5W}N6#+I|@H11isI;s6k^o8g9 zBiJnpuO9jEHrLf4x%T##^UfT*ZurJc*pVy0vSV(;Ou@i}N6UPx3pVI%&|&8|>3W0L z-mLll=kt>4>pX7T9=f%&vQ$WLLSx|sv31#bog9Z`GH=h$>)O#i(R@*Ya zo!sh7c=D@e?76D)nbqcZP3lCG*!c#ZXS_=bEOiQM zsC@k>MXviUW7muOoYP-UdX`vkx52owE5q%wr8^azTdF?dprC6k)Y0wkc}2!rpT|&_J41dnpjtG zNy4jm-Sx|P{msAf?#%tPZB5tQc|RT}ckui!UwizxJHxzr^Xit&Ppe@||2_F+%lY%? z{hpQY*tbv4YE7C8+xwsV{QS)-erm$+-o0z%TP->9;OTwOKJDzti7%GgQqy|zlc?M2 ia0%V`MBJQzj2@fzJw1HoP!=#RGkCiCxvX