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`.

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);
 }
 
 

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);
 }
 
 

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))};
-}
+}

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(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const menuButton = page.locator('ion-menu-button');
+
+      await expect(menuButton).toHaveScreenshot(screenshot(`menu-button-scale`));
+    });
+  });
 });