feat(a11y): add dynamic font scaling (#28314)

Issue number: resolves #24638, resolves #18592

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Developers have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.

Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>

core/src/components/datetime/datetime.ios.scss

@@ -21,7 +21,7 @@
 
   border-bottom: $datetime-ios-border-color;
 
-  font-size: 14px;
+  font-size: dynamic-font-max(14px, 1.6);
 }
 
 :host .datetime-header .datetime-title {
@@ -39,7 +39,7 @@
   --background-hover: transparent;
   --background-activated: transparent;
 
-  font-size: 16px;
+  font-size: dynamic-font-max(16px, 1.6);
   font-weight: 600;
 }
 
@@ -63,7 +63,7 @@
 
   color: $text-color-step-700;
 
-  font-size: 12px;
+  font-size: dynamic-font-max(12px, 1.6);
 
   font-weight: 600;
 
@@ -72,6 +72,121 @@
   text-transform: uppercase;
 }
 
+@supports (border-radius: mod(1px, 1px)) {
+  .calendar-days-of-week .day-of-week {
+    /**
+     * When the computed font size is 24px
+     * we want the days of the week to only
+     * show the first letter of each day.
+     *
+     * We use the modulus operator to ensure
+     * that any font size less than 24px is
+     * unchanged (i.e. 16 % 24 = 16). If the
+     * font size is 24px then the remainder
+     * will be 0.
+     */
+    $max-font-size: min(1rem, $datetime-dynamic-font-breakpoint);
+    $remainder: mod($max-font-size, $datetime-dynamic-font-breakpoint);
+
+    /**
+     * From here, we scale the remainder to get
+     * a width value larger than 20px.
+     * We then clamp the width to have a max width
+     * of 100% so that each element does not appear
+     * too wide if $width is a very large number.
+     *
+     * When the font size is >=24px then $remainder
+     * will be 0px. This results in $width being 0px
+     * since 0px * 10 is still 0px. We set a minimum
+     * width of 20px below so that the days of the
+     * week still show when the font size is >=24px
+     * and have a fixed width of 20px.
+     *
+     * The days of the week text on iOS have a maximum font size
+     * that is no larger than 20px, so setting a minimum width
+     * of 20px ensures that the text will always fit. (See font-size
+     * declaration in the .calendar-days-of-week block).
+     */
+    $width: calc($remainder * 10);
+    width: clamp(20px, #{$width}, 100%);
+
+    /**
+     * We show the first letter of the week
+     * by setting the width small such that all other
+     * letters wrap to the next line. While we do have
+     * overflow: hidden to visually hide the overflowing
+     * text, we need to explicitly set the height of the
+     * container too otherwise it will increase as the text wraps.
+     */
+    height: $datetime-dynamic-font-breakpoint;
+
+    /**
+     * The above width will cause
+     * all the other letters to overflow
+     * to other lines. The below code hides
+     * those additional letters so only
+     * the first letter is shown.
+     */
+    overflow: hidden;
+  }
+
+  .calendar-day {
+    /**
+     * We use the modulus operator to ensure
+     * that any font size less than 24px is
+     * unchanged (i.e. 16 % 24 = 16). If the
+     * font size is 24px then the remainder
+     * will be 0.
+     */
+    $maxFontSize: min(1rem, $datetime-dynamic-font-breakpoint);
+    $remainder: mod($maxFontSize, $datetime-dynamic-font-breakpoint);
+
+    /**
+     * From here, we scale the remainder. The purpose of
+     * scaling the remainder is to get a border radius
+     * large enough such that the element's
+     * shape is a circle.
+     *
+     * Note that when the font size is 24px
+     * then the remainder will be 0, so $radius
+     * will still be zero.
+     */
+    $radius: calc($remainder * 10);
+
+    /**
+     * In the event that $radius is 0
+     * we use max() to ensure a minimum
+     * border radius of 8px which will
+     * give the day button the rounded
+     * rectangle appearance.
+     * For font sizes smaller than 24px
+     * the border radius will give a circle appearance.
+     */
+    @include border-radius(max(8px, $radius));
+  }
+}
+
+/**
+ * iOS <17 has a bug where the result of mod() is
+ * used incorrectly if used inside of another CSS function such
+ * as calc(). The first set of @support checks accounts for iOS <17.
+ * We check -webkit-named-image to ensure that non-WebKit browsers are ignored.
+ * The second set of @support checks account for all other browsers that
+ * do not support mod() yet.
+ */
+@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))) {
+  .calendar-days-of-week .day-of-week {
+    width: auto;
+    height: auto;
+
+    overflow: initial;
+  }
+
+  .calendar-day {
+    @include border-radius(32px);
+  }
+}
+
 // Calendar / Body
 // -----------------------------------
 :host .calendar-body .calendar-month .calendar-month-grid {
@@ -97,7 +212,7 @@
   // will collapse instead of expanding to fill the button
   height: 0;
 
-  min-height: 16px;
+  min-height: dynamic-font(16px);
 }
 
 :host .calendar-day {
@@ -106,7 +221,7 @@
 
   height: $datetime-ios-day-height;
 
-  font-size: 20px;
+  font-size: dynamic-font-max(20px, 1.6);
 }
 
 .calendar-day.calendar-day-active {
@@ -145,7 +260,7 @@
 :host .datetime-time {
   @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
-  font-size: 16px;
+  font-size: dynamic-font-max(16px, 1.6);
 }
 
 :host .datetime-time .time-header {

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

@@ -16,6 +16,9 @@ $datetime-ios-time-width:           68px !default;
 /// @prop - Border radius of the time picker
 $datetime-ios-time-border-radius:   8px !default;
 
+/// @prop - The font size at which layouts may change to accommodate Dynamic Type
+$datetime-dynamic-font-breakpoint: 24px !default;
+
 /// @prop - Width of the calendar day
 $datetime-ios-day-width: 40px !default;
 

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

@@ -2,13 +2,13 @@
 // --------------------------------------------------
 
 /// @prop - Font size for title in header
-$datetime-md-title-font-size:          12px !default;
+$datetime-md-title-font-size:          dynamic-font(12px) !default;
 
 /// @prop - Font size for selected date in header
-$datetime-md-selected-date-font-size:  34px !default;
+$datetime-md-selected-date-font-size:  dynamic-font(34px) !default;
 
 /// @prop - Font size for calendar day button
-$datetime-md-calendar-item-font-size:  14px !default;
+$datetime-md-calendar-item-font-size:  dynamic-font(14px) !default;
 
 /// @prop - Padding for content in header
 $datetime-md-header-padding:           20px !default;

core/src/components/datetime/datetime.scss

@@ -220,6 +220,18 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
+/**
+ * The confirm and clear buttons are grouped in a
+ * container so that they appear on the end opposite
+ * of the cancel button.
+ * We use display: flex so that the
+ * wrapper only takes up as much
+ * height as it needs.
+ */
+.datetime-action-buttons .datetime-action-buttons-container {
+  display: flex;
+}
+
 /**
  * Date/Year button should be on
  * the opposite side of the component
@@ -255,6 +267,15 @@ ion-picker-column-internal {
   text-align: center;
 }
 
+.calendar-days-of-week .day-of-week {
+  /**
+   * Center the days of the week within each cell
+   * if the container size is changed as a result
+   * of Dynamic Type.
+   */
+  @include margin(0, auto);
+}
+
 // Calendar / Body
 // -----------------------------------
 :host .calendar-body {
@@ -350,7 +371,7 @@ ion-picker-column-internal {
  * Center the day text vertically
  * and horizontally within its grid cell.
  */
-:host .calendar-day {
+.calendar-day {
   @include border-radius(50%);
   @include padding(0px);
   @include margin(0px);

core/src/components/datetime/datetime.tsx

@@ -1448,7 +1448,7 @@ export class Datetime implements ComponentInterface {
                     {this.cancelText}
                   </ion-button>
                 )}
-                <div>
+                <div class="datetime-action-buttons-container">
                   {showClearButton && (
                     <ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>
                       {this.clearText}

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

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <div id="container" style="width: 450px;">
+          <ion-datetime size="cover" show-default-title="true" show-default-buttons="true" presentation="date-time" value="2022-06-06T16:30"></ion-datetime>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
+    });
+  });
+});