From fa85f030cfdb3ef8482ef29faff0144b27c9aa45 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 29 Apr 2024 09:55:40 -0400 Subject: [PATCH] fix(md): item border has improved contrast in dark mode (#29398) Issue number: resolves #29386 --------- ## What is the current behavior? The item border does not have sufficient contrast in dark mode making the border almost invisible. ## What is the new behavior? - Removed the `--ion-border-color` in the MD dark palette. Instead, we're using the [theme default](https://github.com/ionic-team/ionic-framework/blob/dc1172a8411f71227b713a6d7addca91537ea438/core/src/themes/ionic.theme.default.md.scss#L31). ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information The earliest reference to the offending line Brandy and I could find was [here](https://github.com/ionic-team/ionic-framework/issues/18713#issuecomment-510644371). --- .../src/components/item/test/a11y/item.e2e.ts | 29 ++++++++++++++++++ ...-dark-ios-ltr-dark-Mobile-Chrome-linux.png | Bin 0 -> 1800 bytes ...dark-ios-ltr-dark-Mobile-Firefox-linux.png | Bin 0 -> 2308 bytes ...-dark-ios-ltr-dark-Mobile-Safari-linux.png | Bin 0 -> 1386 bytes ...m-dark-md-ltr-dark-Mobile-Chrome-linux.png | Bin 0 -> 1828 bytes ...-dark-md-ltr-dark-Mobile-Firefox-linux.png | Bin 0 -> 2413 bytes ...m-dark-md-ltr-dark-Mobile-Safari-linux.png | Bin 0 -> 1493 bytes core/src/css/palettes/dark.scss | 1 - 8 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png create mode 100644 core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png diff --git a/core/src/components/item/test/a11y/item.e2e.ts b/core/src/components/item/test/a11y/item.e2e.ts index db936bf64b..20536beb71 100644 --- a/core/src/components/item/test/a11y/item.e2e.ts +++ b/core/src/components/item/test/a11y/item.e2e.ts @@ -2,6 +2,35 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('item: dark palette'), () => { + /** + * This test was originally created to ensure the item border has sufficient + * contrast. We don't use an Axe test here because Axe not warn about color + * contrast on the item borders. + */ + test('borders should have sufficient contrast', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29386', + }); + await page.setContent( + ` + + Item + Item + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`item-dark`)); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { test.describe(title('item: axe'), () => { test('should not have accessibility violations', async ({ page }) => { diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e5129d4a01524a7b3c700c19fec5c9d929fea007 GIT binary patch literal 1800 zcmbVNc~H~W7QQaUrB-SR3AHp-`V+$}#8*|C>5jlg z%14DS4MxlRQMhxsK9_>v7Bk+Vz(Ys))=^RQ-@eIbMIJ7?>-&CdTd3KjFOLzm?|$qN zcRMU*e<|h&cYrSWX#@Zg zVJCP-_`j2r3_^H#nL?q+Xf*@R-W?<&g*R`yxw)}6rnIk8V`F{kVmxMe7oamcEj?H) zR&r93e|&uWMidsT5$VJ01ym|^Wp%Y2S=a0B&_%W=#&eA(m^rW8FgsxKAEmNsVj}#w zqvOi#thMg-1?PITI+a~jg|j#?r1O%Fjj3O}2wGoXUs+iRqtV*S%gcFfZDnc=eDA^( z$*Bhg?mWMyW?bGh6K z{#i1anvfvT>-Cptv?=Cb4V%M>cDCU4_WmRK+_|4CD?hrHmnVSbrdOlR2YR;_;=}{m zPmc`lypdl~@y^a0rt)ACNwK=x%({E`d&C}xYnhs&{Qk!u?qj+jm33*54Y#gNf>4r^ z8*0OBJA^_vu_}!@vZR|@Sf~vS33>AZkL`6H$;-*0E9Ylv)j2siu3lbE2E#RC*k|ms zo|aD~l0u00>hFo6N$EO8t#;ooJzF^`C{8gr8q~&QKd*MmJbdxQc_d-9UX?59|{Xiyz%&@E3hZ; z6Q}-Q2Emu<>gicuS7$@3K1SUCt?%IvKOFDs%D1z#o0Q4!vsmU*snnKDTKW=RahN}f zlFQ|=YelV|=# zg+O`qrGEgr82$iM-P-*&Nd}4m=fUUm7h-Ke7lv8pf56l20p&l9>Yd|thjOsD@dF){Jsqeo;i`QFg*FrUY( zVYAui)2zVSuHh_54UJY?iKw+&L6U1qLc(~`BpQR^*4Gapl=%2sC{&6UR?yyl@^_U= z(Aa37N~KDh_`m#;;^N}+SRhCo9v&_ave9g9DGR#)^)VK!kja?SO66|`LkAz0h1rD{ zEf$@Q8BWu!_7Ty0caMxXyubJQlgk+yvaIZEZcR-eLhFJAlqftmAks_j_8>gqIP35kxuFp3% zPICV4*#&nUfS{N)koFMkpw5dJhBK254BRp?F^LEb{jt0p&24H*x_p_meDyOccqQ(L zQ|S|t=q%1GEGC9?@ZiA{k8swdx6b(axt%)IOtAh@Dh(EPcGg2H^oKN?&%IU|PDj7; zGDoAgmqWucGx^ZfuvqM$>wiJ%Ex4heW<9neJ>Q1X{}aN`+nchIk`m>M-C%8D%j({Q V$D86sM)Ti49Pu=X(CmAm;J>eHR3iWY literal 0 HcmV?d00001 diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c75f1c1f0e960ae7c6020934629c2e4ede66c084 GIT binary patch literal 2308 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 literal 0 HcmV?d00001 diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ea2410f1080210f70060346934fbad7b6ac9fe9c GIT binary patch literal 1828 zcmcJQe>~H99LGO|x?OohtD}?dG#*Ww5}o2&W7v0VsW{DBJj{cP04R3mJ6fZY$r`19QfRPfy)9c1}&ztR(4yMZi;rg!>n)6F2M^*>8V(G_`m+dldwcr|s_o06*wyCddz~$OTrIoC#%^OUm=1+P(A4B1 z5D3tPy8?dR4*I{_n4FxfDGolAoE)6CbLWoY-E8DiBcV`eUEJ2ipb$zak;jhh-(*G= z2INZyWG`N1PESwQh{b}I7Lr1#v_&HLK9zhP&;9V>!}ogC+^bhRK7SUY&@94p75$}V z=5#_7Xgod3UUwJ6A@O)TBFePFr;=R~R$WftF3@VV&GQb0*^xpnN~P27|CAIWkNVwY z2?VppiWCPnZv_h)|3```7qM8(F7dOw6sZ}eSJ^12>`2(5K-Q{cjvba zugrNStgAyq7d?4Io7|r6ZkbLeyquGxo0=-QcI{e3HUM{1t-V4|i(*JwK^P9=T)J&O zaj;$*k=w4K-rOUboQ&J@Xf+6B-SU7*X9n%ipz#6$fb0tfUnNqK67)DN;ZhVxjUH}i zF_MyMB1}PJtt4T^SDpJ0mR;u4@$tL2%E|iE|1!} zpn9>KEV`U#9QI@!I#+LFKfFRxJ5ZJ8i2 zTrJ^_6WHg^pQqZbvW6BdTD0BSc@LjTvB`z4-}&T8`a(*>%b|N#tP3F_Ayhs!uVu*5 z!Qrya8OXWNEDcrl@$;exX+=mhDisF_5pKqb4sk}`P^K+ep+hMj$#zr zY-uEoM%qzar7gKaEbZv&sR-Rv9x1fVklf78U7=R1k0vGtayXoNv3NhsFYwvt<(1Le z+IpzA*J;}}{``C*M6qIBX;is z(oDF6`I|^5==JDm<;16l_vBIQma}2@cL}0~uqZIwcRxv_Ite@38mji&RqZz>5ocs9 z9vn_F8tfa<)dvKAnluKphy$jXOfd!u@b}+~;mpTqhI0);|NK!RO4*0~^2dp|I38R< zZLdHgku>Y3rxV~gbNa;qq#APXMekdWL_sji$jAt#E~xY4$2$cD1#mjNk<0myALG;- z4J|%iXub{rJ6Rs#>h84Whn3f literal 0 HcmV?d00001 diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d500d6cbfa064f1b90d34c0b1b148e8e2cdef127 GIT binary patch literal 2413 zcmd5;X;f2Z8V+gFNkAb)mJuN&G-VZ$U9gTJgb<{LEhx0?bOJaEVG)6_gvC=8Dh%7e zM8`2e1R{$Cf=Z%5aUmrzl8k0h3YEsn5|*Q(5rfWm)BEF|_uPBG_j{lB zKF{-h=R@g%JM}H}VKCUvAQ~kc2GctaVixLSa9{SWQovwnk06R4BQH)h8*IN)^7{uH zQ$hQp&(#K>xc=3>Msod^mK51_npIjkpm0Q*Fan z3v-3b6ECJZGMHn9bA8;jzxmw#S^b%M@h$h!n}v2<> zQ{WYdp;8!#*E?W@kt{q1#NaLTgu@ZT?9gm?N3cjQ1%X1RP>;5JcuYvlph5}et6+p5 zC)(3YK;~X^JaI+Z4!%WPGR6}x?e_e}24vfWS5%01n?mc{LFnGX4+B*U$8lqh0}OVP$$+Yu1Z7NC{grAA60-Hkqd!#XL+f^fusKX-4>nJ5A<-1v zFsS+ipO9z=+)r2pfX!Ess9#g`dN6IrjvehHQA}D|+U9Z6hrU#sqG&Xto!y^GO5)XO z^~}u7)(vTPB0vFyzc<4Z6&PJBLy%e=Rwk1mk$mON*+GkKb4%6B%hn>(P|4{ z6(%S9gR3Av-*u|Gx_Uq)x~|dWnVOj`ZEwd41Of{j?iiarydyWwY70MIuI2RMX?fk46>RMIXV4ICNrm?pmSyAq7Z(?nTcMkdGIyMbd_KRvww519%GT6Z+855xXN*bsRHPP* z^%M9fLx2{5Fcu6*Z$UhK7YJ=r_jBeW^vGpONKY6*IH*0466pVLf&6z>#~Y&8N`fRG z7ulQRAt8d+*0D3E z|95WiufzI<`jEPYzXozWKQ=~bE-3+Gf$t&l*+cz(NVxY{`xxWo9b#OH@EQF z*;!v--|+10J{KadrNz_Ty+tOA_+v_nfX}}#kB^N7ZWjcurI#=NA(31_>*I9)t8^ED zkmsUqStE9Kc6zwE@pwF&*qE56ixP>%!`1cb_3L|QpFL};8(UrN_C0v8$SNZv!^zQ6 zBKldSl8XM|<;A4i<>%*@*8NxqIXB|vh@pV_u>CzZ*zAA{ZdJBSEiR2%9>wZec^``ehK|6voFELz_C z;P4NO8gW=x)}ZKSx5)quW*tCS(bIAH8aR4#2R=UEBazF#=xE!VtPKk@&Z=hgDn-qjq{1!Ls^P({NDHhuc`ZQJtl@``re`Sq(R zI{NmdOF?RrPo`~VXJ?m{l|84&a-jTyhUetTlRs9(xTvYAnVFfnq}0^Z)Yt$2^QR^+ zPjCKtc{#aXf9rlfD6ojpnyNI>LuulSdGq|1U#_jK)z;SDy?eK^vT}EK_c?twhs~cY zetvlSHg{)?*u?sao^sj9ASZ)=O$A;sW(E^yMn3zsiH{#vDbIx9bad$^vyK06!Ro9kDzzJ8zh z{rh*h{^Rc^cG%e2m6et4vfyk`dzv=s&6+oF-|mgyvOTaqRidqXGDAjCp4!WwKOwaF7bj`UhGZedxzdkN6rAzE8EY`Ads z>eQ1deSLkezW)02=g*llK1+i3M_sa{Lh&tPU~kv3;oMTyBZYM!fCuihDR?rR{!ftPxjSy`{%y*p>( z8@`P3!lNC9%nLdetHj2~=jY{hd6><GvhZ<`N4ELa)R<)YN-l2lb?HP`R^*RN~Wta