From 5a72ecaa890991194198ea0d76a9bda7de4c210d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 17 Aug 2023 13:42:01 -0400 Subject: [PATCH] feat(menu-button): support dynamic type (#28008) Adds support for dynamic type by converting `font-size` to use `rem` units and adds a min and max `font-size` for `ios`. --- .../menu-button/menu-button.ios.scss | 4 +-- .../menu-button/menu-button.md.scss | 6 ++-- .../components/menu-button/menu-button.scss | 6 +++- .../menu-button/test/a11y/menu-button.e2e.ts | 26 +++++++++++++++++- ...tton-scale-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 273 bytes ...ton-scale-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 344 bytes ...tton-scale-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 369 bytes ...utton-scale-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 787 bytes ...tton-scale-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1197 bytes ...utton-scale-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 591 bytes 10 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss index 63927ab097..c5d3abd75d 100644 --- a/core/src/components/menu-button/menu-button.ios.scss +++ b/core/src/components/menu-button/menu-button.ios.scss @@ -12,9 +12,9 @@ --padding-start: 5px; --padding-end: 5px; - height: 32px; + min-height: 32px; - font-size: 31px; + font-size: dynamic-font-clamp(1, 31px, 1.23); } diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss index a28a2ffdd8..5065e5c492 100644 --- a/core/src/components/menu-button/menu-button.md.scss +++ b/core/src/components/menu-button/menu-button.md.scss @@ -14,10 +14,10 @@ --padding-start: 8px; --padding-end: 8px; - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; - font-size: 24px; + font-size: dynamic-font(24px); } diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index 5290254e55..1cc38d63e4 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -58,6 +58,8 @@ width: 100%; height: 100%; + min-height: inherit; + border: 0; outline: none; @@ -86,6 +88,8 @@ width: 100%; height: 100%; + min-height: inherit; + z-index: 1; } @@ -160,4 +164,4 @@ ion-icon { :host(.in-toolbar:not(.in-toolbar-color)) { color: #{var(--ion-toolbar-color, var(--color))}; -} \ No newline at end of file +} diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts index aafaf92acd..2f766052d9 100644 --- a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts +++ b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts @@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, config }) => { +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('menu-button: a11y'), () => { test('should not have accessibility violations', async ({ page }) => { await page.goto('/src/components/menu-button/test/a11y', config); @@ -12,4 +12,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { expect(results.violations).toEqual([]); }); }); + test.describe(title('menu-button: font scaling'), () => { + test('should scale text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + + + + `, + config + ); + + const menuButton = page.locator('ion-menu-button'); + + await expect(menuButton).toHaveScreenshot(screenshot(`menu-button-scale`)); + }); + }); }); diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1ca19582476d75851f23731f346b1c071eef7334 GIT binary patch literal 273 zcmeAS@N?(olHy`uVBq!ia0vp^hCr;&!3HFk2``uhq!^2X+?^QKos)S9yU#$>-{bX0h6gSP8nCoM!&V0*eiG7as}IJmdj7r!*zS+&NX1!Ybb#(V`%F_nW&DiIS{xSg{Tqb!!RzTPz5-1Ck?=iBZU&qqOwt7EV1 zT4^S;-TaK&wp(#MlP@!Q0F?(EDeF}FCVb}clKLiA&kYG(H(oPGyjM<1ozZSP-^?QC zokV}m*JZO$WQ+SSFl@S{xc=?)nU`Od@L5-$K6*K3bw{eBkd6mPC(!;X#g9y}o7{A# TH^xo}dW*r+)z4*}Q$iB}WCd<5 literal 0 HcmV?d00001 diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..3a285dfebb9fe8412388e544b84bdec00af6da53 GIT binary patch literal 344 zcmV-e0jK_nP)7|nD_MJ92+DY)E~Q!(n~v|qz$Kz~S(M4*6d z6H|L&iQBD8n5Hx#BoU7{Xb}m#N|yeNNqX9^JYyDNtlDq@iA2La8q13aqeX!Nx__Zh+!N?N3c)YLz}uSr#tzZAOO5VqY!{b8% zg2o^QF%BRy@R<0x0BI{UnYZY-ou==b^!1;?EXyD;N<|B7!JK56lMHi`VNNp2^y5K_ zqbVw$*R1)@v8QV&r_l^=p5pvZQ3(*>{@QiVsHW8Hk_yyf=AHgaT!AXr6X|cT%i(LT zI=iYrh?pA2sSrZkyAYk2EXW+B3(fn~NPInEYAC140(+0q&r;JVD#Jr>MMo4hJD0<9 zttkWmYe7$D?>?qDOf|LIhyJ{^Up^H=h$=ui&;Hzl=5S_({XxUAfbvU9%wl z#aC4!0Qj8YJGaQp-aWsS2H%=mt-8OwVE)J~3uKs+40DoUPBP3%Mu<)uWUN~caNc6n P00000NkvXXu0mjfFN&f0 literal 0 HcmV?d00001 diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts-snapshots/menu-button-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0362d6d446d795d09da9a513f4340d748e0999f1 GIT binary patch literal 787 zcmeAS@N?(olHy`uVBq!ia0vp^Q$d)64M+wq+TjnR7>k44ofy`glX=O&z;xEr#WAE} z&f8lXeU$?xS})eyxTUc4`Q`*N)d~c#3FQKbxdBWQoV^^{5^SV%Hc3wU-Y0k7YI&3P zN5i_hd5QC$?^MXRTE%eOJ>*DdmqnnUy4E8X*EuUXghdM%DftbE;GJDx8=QSEhw$_B zfBpCGUezfjv)R6}@$uI!`qnO&S#o;CzWw`OfBd*{-n@BH{*gzH9(9e4jV+a)+HVhc zdaT@)U;iPZ6pZHXDS$%3}`mxWsfZ)5<6=q}q}+0W5jmrb_L`w+kD z&$sZe-@O)IerYe&c5o`wpVKqZ0zNjrPVVz+ecS&l?xcpq$H$kJmxr%kzkcmk&@qP%O8$zJErUnf^{0-td*iM@eVY2VZ1=Tb xv5hx#vi83FYehuorIzRj| zE2Cl~YY=Cq(W}V}L5fXt7=lhtG!j@@;NZuw@`;CJM~H=jdP7Lj5*`;VnF+!UT9!d< zN}_xxI2ESKXfjXaVt>Li!K-gdqem-q5tE0i`zePdhZrpxmrPPlRS0_6Fa(Xeur%cT z`}c4E{Mln`V{@YMPg`StetvF!{r=p%ynk)CXV&t^dVT%$=@K75|LwD9&%QZi`{z*B z)~xXG@Z9wDW{kV+z^jY&zd+f^{X~T$`}aS7EWCa1-n++b|976&TRO|i zXZh7H*PLEuCnqn~73t>%OZ=bp`HS%(Ly|}n| zZh853onXl;Pd$&O*L$&k**wAP{FmFpm0k~Tb3EsNuw>TxHJ{8aR%&IgpLx`CtD45s zRGY=?maLqA^{J<+?WdyJ+Pm}S&HLg~cksx{`}gj}&6cZw`SI$~5ZflXm-8lOEy)!x zbzP-&LHVe{Rgc?xuew597r1vhu9~+$2q zm3+1u)=Ul1eShA>ZkeIOe8HPQ#|3j4o8{~fS;=!@f7cVu*7Y2J51hALS;w%dKt+A3 zz_Kh6^{HJ?dMq!8bIzSJXUp&3za{ryJ-@VO>V(X2Ai?=ZYGdrbpV5oOr%M16v0z=6 zNzl@~Yd5%8_IwClJW;E3^RYOO)Ry^Dy&)@Sn|^cBQvP!#V~N+@H574y+%rZuU~h;B(pc%^oTo7H^A?}L`2e?A;6 zD3qA9H*URs%3oRAhX0G=XV>Na+WPYPGP*KupMSx)-*5Tlzjg9^A8r0yw?AsF+xm*x z0sBAytl1mqzWztf?z?`==YQVpyWi~ZtuNWLFMK~;v@>S?^~K>eX7kUx`~NWg{69JK z+)vp`>%TQ;{s4p^)Q#Wx=ck!_9OZNJ2Br`OPgg&ebxsLQ05GvqJOBUy literal 0 HcmV?d00001