Merge pull request #4291 from albertgasset/MOBILE-4595

MOBILE-4595: WCAG 2.1 AA accessibility accreditation for version 4.5

Author: dpalou

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);
+    }
+}

package.json

@@ -228,7 +228,10 @@
             "cordova-plugin-local-notification": {
                 "ANDROID_SUPPORT_V4_VERSION": "26.+"
             },
-            "cordova-plugin-moodleapp": {},
+            "cordova-plugin-moodleapp": {
+                "ANDROIDX_VERSION": "1.0.0",
+                "ANDROIDX_APPCOMPAT_VERSION": "1.3.1"
+            },
             "cordova-plugin-network-information": {},
             "cordova-plugin-prevent-override": {},
             "cordova-plugin-screen-orientation": {},
@@ -238,4 +241,4 @@
             "nl.kingsquare.cordova.background-audio": {}
         }
     }
-}
+}

patches/@ionic+core+8.4.1.patch

@@ -152,3 +152,48 @@ index c3d2d8e..bc40d4f 100644
      const root = getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+diff --git a/node_modules/@ionic/core/dist/esm/input-shims-0314bbe5.js b/node_modules/@ionic/core/dist/esm/input-shims-0314bbe5.js
+index dd9d410..846146f 100644
+--- a/node_modules/@ionic/core/dist/esm/input-shims-0314bbe5.js
++++ b/node_modules/@ionic/core/dist/esm/input-shims-0314bbe5.js
+@@ -338,7 +338,8 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
+     const focusOut = () => {
+         hasKeyboardBeenPresentedForTextField = false;
+         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+-        componentEl.removeEventListener('focusout', focusOut);
++        // Patched: Attach focusin/focusout events to inputEl instead of componentEl to allow focusing buttons inside <ion-input>.
++        inputEl.removeEventListener('focusout', focusOut);
+     };
+     /**
+      * When the input is about to receive
+@@ -358,13 +358,15 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
+         }
+         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
+         win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
+-        componentEl.addEventListener('focusout', focusOut);
++        // Patched: Attach focusin/focusout events to inputEl instead of componentEl to allow focusing buttons inside <ion-input>.
++        inputEl.addEventListener('focusout', focusOut);
+     };
+-    componentEl.addEventListener('focusin', focusIn);
++    // Patched: Attach focusin/focusout events to inputEl instead of componentEl to allow focusing buttons inside <ion-input>.
++    inputEl.addEventListener('focusin', focusIn);
+     return () => {
+-        componentEl.removeEventListener('focusin', focusIn);
++        inputEl.removeEventListener('focusin', focusIn);
+         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
+-        componentEl.removeEventListener('focusout', focusOut);
++        inputEl.removeEventListener('focusout', focusOut);
+     };
+ };
+ /**
+--- a/node_modules/@ionic/core/dist/esm/ion-item_8.entry.js
++++ b/node_modules/@ionic/core/dist/esm/ion-item_8.entry.js
+@@ -109,7 +109,7 @@ const Item = class {
+     // inputs, then those need to individually get each click
+     hasCover() {
+         const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+-        return inputs.length === 1 && !this.multipleInputs;
++        return inputs.length === 1;
+     }
+     // If the item has an href or button property it will render a native
+     // anchor or button that is clickable

scripts/langindex.json

@@ -1743,6 +1743,7 @@
   "core.decsep": "langconfig",
   "core.defaultvalue": "tool_usertours",
   "core.delete": "moodle",
+  "core.deleted": "moodle",
   "core.deletedoffline": "local_moodlemobileapp",
   "core.deleteduser": "bulkusers",
   "core.deleting": "local_moodlemobileapp",
@@ -2165,6 +2166,7 @@
   "core.login.login": "moodle",
   "core.login.loginbutton": "local_moodlemobileapp",
   "core.login.loginsteps": "moodle",
+  "core.login.logoof": "moodle",
   "core.login.missingemail": "moodle",
   "core.login.missingfirstname": "moodle",
   "core.login.missinglastname": "moodle",
@@ -2450,6 +2452,7 @@
   "core.selectall": "moodle",
   "core.send": "message",
   "core.sending": "chat",
+  "core.sent": "moodle",
   "core.serverconnection": "local_moodlemobileapp",
   "core.settings.about": "local_moodlemobileapp",
   "core.settings.accessstatement": "access",
@@ -2487,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/addons/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -96,12 +96,12 @@ <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     </ion-row>
 
     <core-empty-box *ngIf="filteredCourses.length === 0" image="assets/img/icons/courses.svg">
-        <p *ngIf="hasCourses" class="item-heading">
+        <h3 *ngIf="hasCourses" class="item-heading">
             {{'addon.block_myoverview.noresult' | translate}}
-        </p>
-        <p *ngIf="!hasCourses" class="item-heading">
+        </h3>
+        <h3 *ngIf="!hasCourses" class="item-heading">
             {{'addon.block_myoverview.nocoursesenrolled' | translate}}
-        </p>
+        </h3>
         <ng-container *ngIf="searchEnabled">
             <p *ngIf="hasCourses" class="subdued">
                 {{'addon.block_myoverview.noresultdescription' | translate}}

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -33,6 +33,7 @@
 
     core-empty-box {
         .item-heading {
+            font-size: 1rem;
             font-weight: bold;
             margin-bottom: 0;
         }

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -9,7 +9,14 @@ <h3>
 <ion-item-group *ngFor="let dayEvents of events">
     <ion-item>
         <ion-label>
-            <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
+            @if (course) {
+            <h3><ng-container *ngTemplateOutlet="date" /></h3>
+            } @else {
+            <h4><ng-container *ngTemplateOutlet="date" /></h4>
+            }
+            <ng-template #date>
+                {{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}
+            </ng-template>
         </ion-label>
     </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">