MOBILE-3100 Accessibility: Fix issues when changing font sizes

src/app/app.scss

@@ -649,13 +649,16 @@ ion-app.app-root {
   .toolbar img.core-bar-button-image,
   .toolbar .core-bar-button-image img {
     padding: 0;
-    width: 100%;
+    width: $core-toolbar-button-image-width;
-    height: 100%;
+    height: $core-toolbar-button-image-width;
-    max-width: $core-toolbar-button-image-width - 1;
+    max-width: $core-toolbar-button-image-width;
-    max-height: $core-toolbar-button-image-width - 1;
     border-radius: 50%;
   }
 
+  .toolbar-ios {
+    height: 52px;
+  }
+
   // Footer with auto height.
   .footer.footer-adjustable {
       height: auto;
@@ -1147,3 +1150,10 @@ ion-app.platform-desktop {
 .ion-md-funnel::before {
   content: "\f182";
 }
+
+// Fix icon size in lists, to prevent them scaling with text.
+.item, .item-inner {
+  > ion-icon {
+    font-size: 28px;
+  }
+}

src/components/ion-tabs/ion-tabs.scss

@@ -3,6 +3,7 @@ $core-sidetab-size: 60px !default;
 ion-app.app-root core-ion-tabs {
     .tabbar {
         z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
+        height: 56px;
 
         .core-ion-tabs-loading {
             height: 100%;

src/components/tabs/tabs.scss

@@ -74,7 +74,7 @@ ion-app.app-root.ios .core-tabs-bar .tab-slide {
     max-width: $tabs-ios-tab-max-width;
     min-height: $tabs-ios-tab-min-height;
 
-    font-size: $tabs-ios-tab-font-size + 4;
+    font-size: $tabs-ios-tab-font-size;
     font-weight: $tabs-ios-tab-font-weight;
     color: $tabs-ios-tab-text-color;
 }

src/core/settings/pages/general/general.ts

@@ -68,7 +68,7 @@ export class CoreSettingsGeneralPage {
             this.selectedLanguage = currentLanguage;
         });
 
-        this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
+        this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => {
             this.selectedFontSize = fontSize;
             this.fontSizes = CoreConfigConstants.font_sizes.map((size) => {
                 return {

src/theme/variables.scss

@@ -229,6 +229,29 @@ $popover-wp-width: $popover-width;
 $item-wp-divider-background: $item-divider-background;
 $item-wp-divider-color: $item-divider-color;
 
+// Font sizes
+// ---------------------------------------------------
+// Some font sizes are defined in absolute pixels by ionic,
+// override these with relative sizes so they are resizable.
+$alert-ios-message-font-size: 1.4rem;
+$alert-ios-title-font-size: 2.2rem;
+$alert-ios-sub-title-font-size: 1.6rem;
+$alert-md-message-font-size: 1.4rem;
+$alert-md-title-font-size: 2.2rem;
+$alert-md-sub-title-font-size: 1.6rem;
+$alert-button-font-size: 1.4rem;
+$tabs-ios-tab-font-size: 1.4rem;
+$chip-ios-font-size: 1.3rem;
+$chip-md-font-size: 1.3rem;
+
+// Icon sizes
+// ---------------------------------------------------
+// Some font icons have relative sizes set by ionic,
+// define absolute sizes so they aren't scaled with text.
+$tabs-md-tab-icon-size: 24px;
+$tabs-md-tab-min-height: 56px;
+$tabs-ios-tab-min-height: 56px;
+
 // App Theme
 // --------------------------------------------------
 // Ionic apps can have different themes applied, which can