MOBILE-4595 a11y: Pinch-to-zoom setting

Author: albertgasset

config.xml

@@ -30,9 +30,10 @@
     <preference name="prerendered-icon" value="true" />
     <preference name="AppendUserAgent" value="MoodleMobile 5.0.0 (50000)" />
     <preference name="BackupWebStorage" value="none" />
-    <preference name="ScrollEnabled" value="false" />
+    <preference name="ScrollEnabled" value="true" />
     <preference name="KeyboardDisplayRequiresUserAction" value="false" />
     <preference name="HideKeyboardFormAccessoryBar" value="false" />
+    <preference name="KeyboardResizeMode" value="ionic" />
     <preference name="AllowInlineMediaPlayback" value="true" />
     <preference name="LoadUrlTimeoutValue" value="60000" />
     <preference name="load-url-timeout" value="60000" />

cordova-plugin-moodleapp/plugin.xml

@@ -25,6 +25,10 @@
                 <param name="android-package" value="com.moodle.moodlemobile.Diagnostic_Location"/>
                 <param name="onload" value="true" />
             </feature>
+            <feature name="PinchToZoom">
+                <param name="android-package" value="com.moodle.moodlemobile.PinchToZoom"/>
+                <param name="onload" value="true" />
+            </feature>
         </config-file>
 
         <source-file src="src/android/Diagnostic.java" target-dir="src/cordova/plugins" />
@@ -37,6 +41,7 @@
 
         <source-file src="src/android/SecureStorage.java" target-dir="src/com/moodle/moodlemobile" />
         <source-file src="src/android/InstallReferrer.java" target-dir="src/com/moodle/moodlemobile" />
+        <source-file src="src/android/PinchToZoom.java" target-dir="src/com/moodle/moodlemobile" />
     </platform>
 
     <platform name="ios">

cordova-plugin-moodleapp/src/android/PinchToZoom.java

@@ -0,0 +1,42 @@
+// (C) Copyright 2025 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.moodle.moodlemobile;
+
+import org.apache.cordova.CordovaInterface;
+import org.apache.cordova.CordovaPlugin;
+import org.apache.cordova.CordovaWebView;
+
+import android.util.Log;
+import android.webkit.WebSettings;
+import android.webkit.WebSettings.ZoomDensity;
+import android.webkit.WebView;
+
+public class PinchToZoom extends CordovaPlugin {
+
+    public static final String TAG = "PinchToZoom";
+
+    @Override
+    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
+        Log.d(TAG, "Initializing pinch-to-zoom");
+
+        super.initialize(cordova, webView);
+
+        WebSettings settings = ((WebView) webView.getView()).getSettings();
+        settings.setBuiltInZoomControls(true);
+        settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
+        settings.setDisplayZoomControls(false);
+        settings.setSupportZoom(true);
+    }
+}

scripts/langindex.json

@@ -2490,6 +2490,7 @@
   "core.settings.enableanalytics": "local_moodlemobileapp",
   "core.settings.enableanalyticsdescription": "local_moodlemobileapp",
   "core.settings.enabledownloadsection": "local_moodlemobileapp",
+  "core.settings.enablepinchtozoom": "local_moodlemobileapp",
   "core.settings.enablerichtexteditor": "local_moodlemobileapp",
   "core.settings.enablerichtexteditordescription": "local_moodlemobileapp",
   "core.settings.encryptedpushsupported": "local_moodlemobileapp",

src/core/constants.ts

@@ -142,6 +142,7 @@ export class CoreConstants {
     static readonly SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme';
     static readonly SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled';
     static readonly SETTINGS_DONT_SHOW_EXTERNAL_LINK_WARN = 'CoreSettingsDontShowExtLinkWarn';
+    static readonly SETTINGS_PINCH_TO_ZOOM = 'CoreSettingsPinchToZoom';
 
     // WS constants.
     static readonly WS_TIMEOUT = 30000; // Timeout when not in WiFi.

src/core/features/settings/lang.json

@@ -35,6 +35,7 @@
     "enableanalytics": "Enable analytics",
     "enableanalyticsdescription": "If enabled, the app will collect anonymous data usage.",
     "enabledownloadsection": "Enable download sections",
+    "enablepinchtozoom": "Enable pinch-to-zoom",
     "enablerichtexteditor": "Enable text editor",
     "enablerichtexteditordescription": "If enabled, a text editor will be available when entering content.",
     "encryptedpushsupported": "Encrypted push notifications supported",

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

@@ -33,6 +33,11 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
                 </ion-segment-button>
             </ion-segment>
         </ion-item>
+        <ion-item>
+            <ion-toggle [(ngModel)]="pinchToZoom" (ionChange)="pinchToZoomChanged($event)">
+                <p class="item-heading ion-text-wrap">{{ 'core.settings.enablepinchtozoom' | translate }}</p>
+            </ion-toggle>
+        </ion-item>
         <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
             <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
                 [cancelText]="'core.cancel' | translate" [disabled]="colorSchemeDisabled"

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

@@ -43,6 +43,7 @@ export class CoreSettingsGeneralPage {
     selectedLanguage = '';
     zoomLevels: { value: CoreZoomLevel; style: number; selected: boolean }[] = [];
     selectedZoomLevel = CoreZoomLevel.NONE;
+    pinchToZoom = false;
     richTextEditor = true;
     debugDisplay = false;
     analyticsAvailable = false;
@@ -98,6 +99,8 @@ export class CoreSettingsGeneralPage {
                 selected: value === this.selectedZoomLevel,
             }));
 
+        this.pinchToZoom = await CoreSettingsHelper.getPinchToZoom();
+
         this.richTextEditor = await CoreConfig.get(CoreConstants.SETTINGS_RICH_TEXT_EDITOR, true);
 
         this.debugDisplay = await CoreConfig.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false);
@@ -206,6 +209,19 @@ export class CoreSettingsGeneralPage {
         CoreConfig.set(CoreConstants.SETTINGS_ZOOM_LEVEL, this.selectedZoomLevel);
     }
 
+    /**
+     * Called when pinch-to-zoom is enabled or disabled.
+     *
+     * @param ev Event
+     */
+    pinchToZoomChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        CoreSettingsHelper.applyPinchToZoom(this.pinchToZoom);
+        CoreConfig.set(CoreConstants.SETTINGS_PINCH_TO_ZOOM, this.pinchToZoom ? 1 : 0);
+    }
+
     /**
      * Called when a new color scheme is selected.
      *

src/core/features/settings/services/settings-helper.ts

@@ -318,14 +318,25 @@ export class CoreSettingsHelperProvider {
         return CoreConstants.CONFIG.zoomlevels[zoomLevel];
     }
 
+    /**
+     * Get saved pinch-to-zoom setting.
+     *
+     * @returns True if pinch-to-zoom is enabled.
+     */
+    async getPinchToZoom(): Promise<boolean> {
+        return Boolean(await CoreConfig.get(CoreConstants.SETTINGS_PINCH_TO_ZOOM, 0));
+    }
+
     /**
      * Init Settings related to DOM.
      */
     async initDomSettings(): Promise<void> {
         // Set the font size based on user preference.
         const zoomLevel = await this.getZoomLevel();
+        const pinchToZoom = await this.getPinchToZoom();
 
         this.applyZoomLevel(zoomLevel);
+        this.applyPinchToZoom(pinchToZoom);
 
         this.initColorScheme();
     }
@@ -377,6 +388,30 @@ export class CoreSettingsHelperProvider {
         document.documentElement.style.setProperty('--zoom-level', zoom + '%');
     }
 
+    /**
+     * Enable or disable pinch-to-zoom.
+     *
+     * @param pinchToZoom True if pinch-to-zoom should be enabled.
+     */
+    applyPinchToZoom(pinchToZoom: boolean): void {
+        const element = document.head.querySelector('meta[name=viewport]');
+        if (!element) {
+            return;
+        }
+        const content = element.getAttribute('content');
+        if (!content) {
+            return;
+        }
+
+        element.setAttribute('content', content.replace(/maximum-scale=\d\.\d/, `maximum-scale=${pinchToZoom ? '4.0' : '1.0'}`));
+
+        // Force layout reflow.
+        document.body.style.width = '99.9999%';
+        setTimeout(() => {
+            document.body.style.width = '';
+        });
+    }
+
     /**
      * Get system allowed color schemes.
      *

src/index.html

@@ -9,7 +9,7 @@
 
     <meta name="color-scheme" content="light dark" />
     <meta name="viewport"
-        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
+        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes, interactive-widget=resizes-content" />
     <meta http-equiv="Content-Security-Policy"
         content="default-src * filesystem: cdvfile: file: data: gap: moodleappfs: blob: 'unsafe-inline' 'unsafe-eval' 'self' android-webview-video-poster: about:">
     <meta name="format-detection" content="telephone=no" />