MOBILE-3100 accessibility: Add font size options in general settings

src/assets/lang/en.json

@@ -1707,6 +1707,8 @@
     "core.settings.errorsyncsite": "Error synchronising site data. Please check your Internet connection and try again.",
     "core.settings.estimatedfreespace": "Estimated free space",
     "core.settings.filesystemroot": "File system root",
+    "core.settings.fontsize": "Text size",
+    "core.settings.fontsizecharacter": "A",
     "core.settings.general": "General",
     "core.settings.language": "Language",
     "core.settings.license": "Licence",

src/config.json

@@ -68,6 +68,11 @@
             "password": "moodle"
         }
     },
+    "font_sizes": [
+        62.5,
+        75.89,
+        93.75
+    ],
     "customurlscheme": "moodlemobile",
     "siteurl": "",
     "sitename": "",

src/core/constants.ts

@@ -35,6 +35,7 @@ export class CoreConstants {
     static SETTINGS_DEBUG_DISPLAY = 'CoreSettingsDebugDisplay';
     static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0
     static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter';
+    static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize';
 
     // WS constants.
     static WS_TIMEOUT = 30000;

src/core/settings/lang/en.json

@@ -28,6 +28,8 @@
     "errorsyncsite": "Error synchronising site data. Please check your Internet connection and try again.",
     "estimatedfreespace": "Estimated free space",
     "filesystemroot": "File system root",
+    "fontsize": "Text size",
+    "fontsizecharacter": "A",
     "general": "General",
     "language": "Language",
     "license": "Licence",
@@ -54,4 +56,4 @@
     "versioncode": "Version code",
     "versionname": "Version name",
     "wificonnection": "Wi-Fi connection"
-}
+}

src/core/settings/pages/general/general.html

@@ -10,6 +10,16 @@
             <ion-option *ngFor="let code of languageCodes" [value]="code">{{ languages[code] }}</ion-option>
         </ion-select>
     </ion-item>
+    <ion-item text-wrap class="core-settings-general-font-size">
+        <ion-label><h2>{{ 'core.settings.fontsize' | translate }}</h2></ion-label>
+        <ion-segment [(ngModel)]="selectedFontSize" (ngModelChange)="fontSizeChanged()" color="primary" item-content>
+            <ion-segment-button *ngFor="let fontSize of fontSizes" value="{{ fontSize.size }}" [ngStyle]="{'font-size.px': fontSize.style}">
+                {{ 'core.settings.fontsizecharacter' | translate }}<!--
+                Empty element styled with the largest font size, so all buttons share a common baseline.
+                --><span [ngStyle]="{'font-size.px': fontSizes[fontSizes.length - 1].style}"></span>
+            </ion-segment-button>
+        </ion-segment>
+    </ion-item>
     <ion-item text-wrap *ngIf="rteSupported">
         <ion-label>
             <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>

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

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, } from '@angular/core';
-import { IonicPage } from 'ionic-angular';
+import { Component, ViewChild } from '@angular/core';
+import { IonicPage, Segment } from 'ionic-angular';
 import { CoreAppProvider } from '@providers/app';
 import { CoreConstants } from '@core/constants';
 import { CoreConfigProvider } from '@providers/config';
@@ -37,6 +37,8 @@ export class CoreSettingsGeneralPage {
     languages = {};
     languageCodes = [];
     selectedLanguage: string;
+    fontSizes = [];
+    selectedFontSize: string;
     rteSupported: boolean;
     richTextEditor: boolean;
     debugDisplay: boolean;
@@ -52,6 +54,24 @@ export class CoreSettingsGeneralPage {
             this.selectedLanguage = currentLanguage;
         });
 
+        this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
+            this.selectedFontSize = fontSize;
+            this.fontSizes = CoreConfigConstants.font_sizes.map((size) => {
+                return {
+                    size: size,
+                    // Absolute pixel size based on 1.4rem body text when this size is selected.
+                    style: Math.round(size * 16 * 1.4 / 100),
+                    selected: size === this.selectedFontSize
+                };
+            });
+            // Workaround for segment control bug https://github.com/ionic-team/ionic/issues/6923, fixed in Ionic 4 only.
+            setTimeout(() => {
+                if (this.segment) {
+                    this.segment.ngAfterContentInit();
+                }
+            });
+        });
+
         this.rteSupported = this.domUtils.isRichTextEditorSupported();
         if (this.rteSupported) {
             this.configProvider.get(CoreConstants.SETTINGS_RICH_TEXT_EDITOR, true).then((richTextEditorEnabled) => {
@@ -64,6 +84,9 @@ export class CoreSettingsGeneralPage {
         });
     }
 
+    @ViewChild(Segment)
+    private segment: Segment;
+
     /**
      * Called when a new language is selected.
      */
@@ -73,6 +96,19 @@ export class CoreSettingsGeneralPage {
         });
     }
 
+    /**
+     * Called when a new font size is selected.
+     */
+    fontSizeChanged(): void {
+        this.fontSizes = this.fontSizes.map((fontSize) => {
+            fontSize.selected = fontSize.size === this.selectedFontSize;
+
+            return fontSize;
+        });
+        document.documentElement.style.fontSize = this.selectedFontSize + '%';
+        this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize);
+    }
+
     /**
      * Called when the rich text editor is enabled or disabled.
      */

src/providers/utils/dom.ts

@@ -22,6 +22,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { CoreTextUtilsProvider } from './text';
 import { CoreAppProvider } from '../app';
 import { CoreConfigProvider } from '../config';
+import { CoreConfigConstants } from '../../configconstants';
 import { CoreUrlUtilsProvider } from './url';
 import { CoreFileProvider } from '@providers/file';
 import { CoreConstants } from '@core/constants';
@@ -74,6 +75,10 @@ export class CoreDomUtilsProvider {
         configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => {
             this.debugDisplay = !!debugDisplay;
         });
+        // Set the font size based on user preference.
+        configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
+            document.documentElement.style.fontSize = fontSize + '%';
+        });
     }
 
     /**