Skip to content

Commit f806781

Browse files
liamdebeasithetaPCbrandyscarneymapsandappsIonitron
authored
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 <[email protected]> Co-authored-by: Brandy Carney <[email protected]> Co-authored-by: Shawn Taylor <[email protected]> Co-authored-by: ionitron <[email protected]> Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: Amanda Johnston <[email protected]>
1 parent 57e2476 commit f806781

File tree

546 files changed

+2363
-395
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

546 files changed

+2363
-395
lines changed

‎core/package-lock.json

Lines changed: 18 additions & 37 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
],
3333
"dependencies": {
3434
"@stencil/core": "^4.4.0",
35-
"ionicons": "^7.1.2",
35+
"ionicons": "^7.2.1",
3636
"tslib": "^2.1.0"
3737
},
3838
"devDependencies": {
@@ -66,7 +66,7 @@
6666
"jest-cli": "^27.5.1",
6767
"prettier": "^2.6.1",
6868
"rollup": "^2.26.4",
69-
"sass": "^1.26.10",
69+
"sass": "^1.33.0",
7070
"serve": "^14.0.1",
7171
"stylelint": "^13.13.1",
7272
"stylelint-order": "^4.1.0"

‎core/scripts/testing/styles.css

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png

26 Bytes
Loading

‎core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png

27 Bytes
Loading

‎core/src/components/action-sheet/action-sheet.ios.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@
131131
.action-sheet-button {
132132
@include padding($action-sheet-ios-button-padding);
133133

134-
height: $action-sheet-ios-button-height;
134+
min-height: $action-sheet-ios-button-height;
135135

136136
font-size: $action-sheet-ios-button-font-size;
137137

138-
contain: strict;
138+
contain: content;
139139
}
140140

141141
.action-sheet-button .action-sheet-icon {

‎core/src/components/action-sheet/action-sheet.ios.vars.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start: $action-sheet-
5050
$action-sheet-ios-title-color: $text-color-step-600 !default;
5151

5252
/// @prop - Font size of the action sheet title
53-
$action-sheet-ios-title-font-size: 13px !default;
53+
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
5454

5555
/// @prop - Font weight of the action sheet title
5656
$action-sheet-ios-title-font-weight: 400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color: rgba($text-col
7575
// --------------------------------------------------
7676

7777
/// @prop - Font size of the action sheet sub title
78-
$action-sheet-ios-sub-title-font-size: 13px !default;
78+
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
7979

8080
/// @prop - Padding top of the action sheet sub title
8181
$action-sheet-ios-sub-title-padding-top: 6px !default;
@@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start: $action-sheet-
9797
$action-sheet-ios-button-height: 56px !default;
9898

9999
/// @prop - Padding of the action sheet button
100-
$action-sheet-ios-button-padding: 18px !default;
100+
$action-sheet-ios-button-padding: 14px !default;
101101

102102
/// @prop - Text color of the action sheet button
103103
$action-sheet-ios-button-text-color: ion-color(primary, base) !default;
104104

105105
/// @prop - Font size of the action sheet button icon
106-
$action-sheet-ios-button-icon-font-size: 28px !default;
106+
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default;
107107

108108
/// @prop - Padding right of the action sheet button icon
109109
$action-sheet-ios-button-icon-padding-right: .3em !default;
110110

111111
/// @prop - Font size of the action sheet button
112-
$action-sheet-ios-button-font-size: 20px !default;
112+
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
113113

114114
/// @prop - Border color alpha of the action sheet button
115115
$action-sheet-ios-button-border-color-alpha: .08 !default;

‎core/src/components/action-sheet/action-sheet.md.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,13 @@
6767

6868
position: relative;
6969

70-
height: $action-sheet-md-button-height;
70+
min-height: $action-sheet-md-button-height;
7171

7272
font-size: $action-sheet-md-button-font-size;
7373

7474
text-align: $action-sheet-md-text-align;
7575

76-
contain: strict;
76+
contain: content;
7777
overflow: hidden;
7878
}
7979

‎core/src/components/action-sheet/action-sheet.md.vars.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $action-sheet-md-title-height: 60px !default;
2626
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
2727

2828
/// @prop - Font size of the action sheet title
29-
$action-sheet-md-title-font-size: 16px !default;
29+
$action-sheet-md-title-font-size: dynamic-font(16px) !default;
3030

3131
/// @prop - Padding top of the action sheet title
3232
$action-sheet-md-title-padding-top: 20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start: $action-sheet-md-title-p
4545
// --------------------------------------------------
4646

4747
/// @prop - Font size of the action sheet sub title
48-
$action-sheet-md-sub-title-font-size: 14px !default;
48+
$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default;
4949

5050
/// @prop - Padding top of the action sheet sub title
5151
$action-sheet-md-sub-title-padding-top: 16px !default;
@@ -70,10 +70,10 @@ $action-sheet-md-button-height: 52px !default;
7070
$action-sheet-md-button-text-color: $text-color-step-150 !default;
7171

7272
/// @prop - Font size of the action sheet button
73-
$action-sheet-md-button-font-size: 16px !default;
73+
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
7474

7575
/// @prop - Padding top of the action sheet button
76-
$action-sheet-md-button-padding-top: 0 !default;
76+
$action-sheet-md-button-padding-top: 12px !default;
7777

7878
/// @prop - Padding end of the action sheet button
7979
$action-sheet-md-button-padding-end: 16px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background: transparent !default;
9191
// --------------------------------------------------
9292

9393
/// @prop - Font size of the icon in the action sheet button
94-
$action-sheet-md-icon-font-size: 24px !default;
94+
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
9595

9696
/// @prop - Margin top of the icon in the action sheet button
9797
$action-sheet-md-icon-margin-top: 0 !default;

‎core/src/components/action-sheet/action-sheet.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,10 @@
126126
justify-content: flex-end;
127127

128128
height: 100%;
129+
130+
/* Fallback for browsers that do not support dvh */
129131
max-height: 100vh;
132+
max-height: 100dvh;
130133
}
131134

132135
.action-sheet-group {

0 commit comments

Comments
 (0)