feat(loading): support for dynamic type (#27828)

core/src/components/loading/loading.ios.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-ios-font-size:                             14px !default;
+$loading-ios-font-size:                             0.875rem !default;
 
 /// @prop - Padding top of the loading wrapper
 $loading-ios-padding-top:                           24px !default;

core/src/components/loading/loading.md.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-md-font-size:                 14px !default;
+$loading-md-font-size:                 0.875rem !default;
 
 /// @prop - Padding top of the loading wrapper
 $loading-md-padding-top:               24px !default;

core/src/components/loading/test/a11y/loading.e2e.ts

@@ -30,3 +30,29 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('loading: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-loading message="Loading"></ion-loading>
+      `,
+        config
+      );
+
+      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+      const loading = page.locator('ion-loading');
+
+      await loading.evaluate((el: HTMLIonLoadingElement) => el.present());
+      await ionLoadingDidPresent.next();
+
+      await expect(loading).toHaveScreenshot(screenshot(`loading-scale`));
+    });
+  });
+});