From 5396bb6a7191d2f432fdbdf0ea7dd14c996ca769 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Wed, 8 Sep 2021 17:43:59 +0200
Subject: [PATCH] MOBILE-3833 a11y: Add missing lists

This is still not completely accessible, but it is a good idea to use lists properly in case https://github.com/ionic-team/ionic-framework/issues/19939 gets solved
---
 .../features/settings/pages/about/about.html  |  60 +++--
 .../settings/pages/deviceinfo/deviceinfo.html | 250 +++++++++---------
 .../settings/pages/general/general.html       | 140 +++++-----
 .../settings/pages/licenses/licenses.html     |  51 ++--
 .../pages/space-usage/space-usage.html        |  50 ++--
 .../synchronization/synchronization.html      |  62 ++---
 6 files changed, 312 insertions(+), 301 deletions(-)

diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index 6b931e527..807d240ce 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -10,33 +10,35 @@
 </ion-header>
 
 <ion-content>
-    <ion-item class="ion-text-wrap">
-        <ion-label><h2>{{ appName }} {{ versionName }}</h2></ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="openPage('deviceinfo')" detail="true">
-        <ion-icon name="fas-mobile" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'core.settings.deviceinfo' | translate }}</ion-label>
-    </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" detail="true">
-        <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
-    </ion-item>
-    <ion-item
-        *ngIf="privacyPolicy"
-        class="ion-text-wrap"
-        button core-link auto-login="no" [href]="privacyPolicy"
-        detail="true" detailIcon="open-outline"
-    >
-        <ion-icon name="fas-user-shield" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
-    </ion-item>
-    <ion-item
-        *ngIf="feedbackFormUrl"
-        class="ion-text-wrap"
-        button core-link [href]="feedbackFormUrl"
-        detail="true" detailIcon="open-outline"
-    >
-        <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'core.settings.helpusimprove' | translate }}</ion-label>
-    </ion-item>
+    <ion-list>
+        <ion-item class="ion-text-wrap">
+            <ion-label><h2>{{ appName }} {{ versionName }}</h2></ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="openPage('deviceinfo')" detail="true">
+            <ion-icon name="fas-mobile" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'core.settings.deviceinfo' | translate }}</ion-label>
+        </ion-item>
+        <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" detail="true">
+            <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
+        </ion-item>
+        <ion-item
+            *ngIf="privacyPolicy"
+            class="ion-text-wrap"
+            button core-link auto-login="no" [href]="privacyPolicy"
+            detail="true" detailIcon="open-outline"
+        >
+            <ion-icon name="fas-user-shield" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
+        </ion-item>
+        <ion-item
+            *ngIf="feedbackFormUrl"
+            class="ion-text-wrap"
+            button core-link [href]="feedbackFormUrl"
+            detail="true" detailIcon="open-outline"
+        >
+            <ion-icon name="fas-bullhorn" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'core.settings.helpusimprove' | translate }}</ion-label>
+        </ion-item>
+    </ion-list>
 </ion-content>
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index 3e3054d5f..3495b7591 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -15,128 +15,130 @@
 </ion-header>
 
 <ion-content>
-    <ion-item (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.appversion' | translate}}</h2>
-            <p>{{ deviceInfo.versionName }} ({{ deviceInfo.versionCode }})</p>
-        </ion-label>
-    </ion-item>
-    <ion-item (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.compilationinfo' | translate }}</h2>
-            <p *ngIf="deviceInfo.compilationTime">{{ deviceInfo.compilationTime | coreFormatDate: "LLL Z": false }}</p>
-            <p *ngIf="deviceInfo.lastCommit">{{ deviceInfo.lastCommit }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.siteUrl" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl"> *</ng-container></h2>
-            <p><a [href]="deviceInfo.siteUrl" core-link auto-login="yes">{{ deviceInfo.siteUrl }}</a></p>
-            <p *ngIf="deviceInfo.siteVersion">{{ deviceInfo.siteVersion }}</p>
-            <p *ngIf="deviceInfo.siteId">{{ deviceInfo.siteId }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.fileSystemRoot" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.filesystemroot' | translate }}</h2>
-            <p><a *ngIf="fsClickable" [href]="deviceInfo.fileSystemRoot" core-link auto-login="no">{{ deviceInfo.fileSystemRoot }}</a></p>
-            <p *ngIf="!fsClickable">{{ deviceInfo.fileSystemRoot }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.userAgent" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.navigatoruseragent' | translate }}</h2>
-            <p>{{ deviceInfo.userAgent }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.browserLanguage" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.navigatorlanguage' | translate }}</h2>
-            <p>{{ deviceInfo.browserLanguage }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.currentLanguage" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.currentlanguage' | translate }}</h2>
-            <p>{{ currentLangName }} ({{ deviceInfo.currentLanguage }})</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.locationHref" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.locationhref' | translate }}</h2>
-            <p>{{ deviceInfo.locationHref }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.deviceType" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.displayformat' | translate }}</h2>
-            <p>{{ 'core.' + deviceInfo.deviceType | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.deviceOs && deviceOsTranslated" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.deviceos' | translate}}</h2>
-            <p>{{ deviceOsTranslated }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.screen" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.screen' | translate }}</h2>
-            <p>{{ deviceInfo.screen }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.networkstatus' | translate}}</h2>
-            <p>{{ 'core.' + deviceInfo.networkStatus | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.wificonnection' | translate}}</h2>
-            <p>{{ 'core.' + deviceInfo.wifiConnection | translate }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.cordovaVersion" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovaversion' | translate }}</h2>
-            <p>{{ deviceInfo.cordovaVersion }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.platform" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovadeviceplatform' | translate }}</h2>
-            <p>{{ deviceInfo.platform }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.osVersion" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovadeviceosversion' | translate }}</h2>
-            <p>{{ deviceInfo.osVersion }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.model" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovadevicemodel' | translate}}</h2>
-            <p>{{ deviceInfo.model }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.uuid" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.cordovadeviceuuid' | translate}}</h2>
-            <p>{{ deviceInfo.uuid }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item *ngIf="deviceInfo.pushId" (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.pushid' | translate }}</h2>
-            <p>{{ deviceInfo.pushId }}</p>
-        </ion-label>
-    </ion-item>
-    <ion-item (longPress)="copyItemInfo($event)">
-        <ion-label class="ion-text-wrap">
-            <h2>{{ 'core.settings.localnotifavailable' | translate }}</h2>
-            <p>{{ 'core.' + deviceInfo.localNotifAvailable | translate }}</p>
-        </ion-label>
-    </ion-item>
+    <ion-list>
+        <ion-item (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.appversion' | translate}}</h2>
+                <p>{{ deviceInfo.versionName }} ({{ deviceInfo.versionCode }})</p>
+            </ion-label>
+        </ion-item>
+        <ion-item (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.compilationinfo' | translate }}</h2>
+                <p *ngIf="deviceInfo.compilationTime">{{ deviceInfo.compilationTime | coreFormatDate: "LLL Z": false }}</p>
+                <p *ngIf="deviceInfo.lastCommit">{{ deviceInfo.lastCommit }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.siteUrl" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl"> *</ng-container></h2>
+                <p><a [href]="deviceInfo.siteUrl" core-link auto-login="yes">{{ deviceInfo.siteUrl }}</a></p>
+                <p *ngIf="deviceInfo.siteVersion">{{ deviceInfo.siteVersion }}</p>
+                <p *ngIf="deviceInfo.siteId">{{ deviceInfo.siteId }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.fileSystemRoot" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.filesystemroot' | translate }}</h2>
+                <p><a *ngIf="fsClickable" [href]="deviceInfo.fileSystemRoot" core-link auto-login="no">{{ deviceInfo.fileSystemRoot }}</a></p>
+                <p *ngIf="!fsClickable">{{ deviceInfo.fileSystemRoot }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.userAgent" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.navigatoruseragent' | translate }}</h2>
+                <p>{{ deviceInfo.userAgent }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.browserLanguage" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.navigatorlanguage' | translate }}</h2>
+                <p>{{ deviceInfo.browserLanguage }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.currentLanguage" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.currentlanguage' | translate }}</h2>
+                <p>{{ currentLangName }} ({{ deviceInfo.currentLanguage }})</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.locationHref" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.locationhref' | translate }}</h2>
+                <p>{{ deviceInfo.locationHref }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.deviceType" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.displayformat' | translate }}</h2>
+                <p>{{ 'core.' + deviceInfo.deviceType | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.deviceOs && deviceOsTranslated" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.deviceos' | translate}}</h2>
+                <p>{{ deviceOsTranslated }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.screen" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.screen' | translate }}</h2>
+                <p>{{ deviceInfo.screen }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.networkstatus' | translate}}</h2>
+                <p>{{ 'core.' + deviceInfo.networkStatus | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.wificonnection' | translate}}</h2>
+                <p>{{ 'core.' + deviceInfo.wifiConnection | translate }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.cordovaVersion" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.cordovaversion' | translate }}</h2>
+                <p>{{ deviceInfo.cordovaVersion }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.platform" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.cordovadeviceplatform' | translate }}</h2>
+                <p>{{ deviceInfo.platform }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.osVersion" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.cordovadeviceosversion' | translate }}</h2>
+                <p>{{ deviceInfo.osVersion }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.model" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.cordovadevicemodel' | translate}}</h2>
+                <p>{{ deviceInfo.model }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.uuid" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.cordovadeviceuuid' | translate}}</h2>
+                <p>{{ deviceInfo.uuid }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item *ngIf="deviceInfo.pushId" (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.pushid' | translate }}</h2>
+                <p>{{ deviceInfo.pushId }}</p>
+            </ion-label>
+        </ion-item>
+        <ion-item (longPress)="copyItemInfo($event)">
+            <ion-label class="ion-text-wrap">
+                <h2>{{ 'core.settings.localnotifavailable' | translate }}</h2>
+                <p>{{ 'core.' + deviceInfo.localNotifAvailable | translate }}</p>
+            </ion-label>
+        </ion-item>
+    </ion-list>
 </ion-content>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index faaded554..a859ca45f 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -8,73 +8,75 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <h2>{{ 'core.settings.language' | translate }}</h2>
-        </ion-label>
-        <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged()" interface="action-sheet"
-            [interfaceOptions]="{header: 'core.settings.language' | translate}">
-            <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
-        </ion-select>
-    </ion-item>
-    <ion-item class="ion-text-wrap core-settings-general-font-size item-interactive">
-        <ion-label>
-            <h2>{{ 'core.settings.fontsize' | translate }}</h2>
-        </ion-label>
-        <ion-segment [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary">
-            <ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
-                [ngStyle]="{'font-size.px': zoomLevel.style}">
-                <ion-label>
-                    {{ 'core.settings.fontsizecharacter' | translate }}
-                    <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
-                    <span [ngStyle]="{'font-size.px': zoomLevels[zoomLevels.length - 1].style}"></span>
-                </ion-label>
-            </ion-segment-button>
-        </ion-segment>
-    </ion-item>
-    <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0"
-        [lines]="selectedScheme=='system' && isAndroid ? 'none' : 'inset'">
-        <ion-label>
-            <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
-            <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
-        </ion-label>
-        <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged()" interface="action-sheet"
-            [disabled]="colorSchemeDisabled" [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
-            <ion-select-option *ngFor="let scheme of colorSchemes" [value]="scheme">
-                {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
-        </ion-select>
-    </ion-item>
-    <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid">
-        <ion-label><p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p></ion-label>
-    </ion-item>
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
-            <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
-        </ion-label>
-        <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged()"></ion-toggle>
-    </ion-item>
-    <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
-        <ion-label>
-            <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
-            <p>{{ 'core.settings.ioscookiesdescription' | translate }}</p>
-            <ion-button expand="block" (click)="openNativeSettings()">
-                {{ 'core.opensettings' | translate }}
-            </ion-button>
-        </ion-label>
-    </ion-item>
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <h2>{{ 'core.settings.debugdisplay' | translate }}</h2>
-            <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
-        </ion-label>
-        <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged()"></ion-toggle>
-    </ion-item>
-    <ion-item class="ion-text-wrap" *ngIf="analyticsSupported">
-        <ion-label>
-            <h2>{{ 'core.settings.enablefirebaseanalytics' | translate }}</h2>
-            <p>{{ 'core.settings.enablefirebaseanalyticsdescription' | translate }}</p>
-        </ion-label>
-        <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged()"></ion-toggle>
-    </ion-item>
+    <ion-list>
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <h2>{{ 'core.settings.language' | translate }}</h2>
+            </ion-label>
+            <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged()" interface="action-sheet"
+                [interfaceOptions]="{header: 'core.settings.language' | translate}">
+                <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
+            </ion-select>
+        </ion-item>
+        <ion-item class="ion-text-wrap core-settings-general-font-size item-interactive">
+            <ion-label>
+                <h2>{{ 'core.settings.fontsize' | translate }}</h2>
+            </ion-label>
+            <ion-segment [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary">
+                <ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
+                    [ngStyle]="{'font-size.px': zoomLevel.style}">
+                    <ion-label>
+                        {{ 'core.settings.fontsizecharacter' | translate }}
+                        <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
+                        <span [ngStyle]="{'font-size.px': zoomLevels[zoomLevels.length - 1].style}"></span>
+                    </ion-label>
+                </ion-segment-button>
+            </ion-segment>
+        </ion-item>
+        <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0"
+            [lines]="selectedScheme=='system' && isAndroid ? 'none' : 'inset'">
+            <ion-label>
+                <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
+                <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
+            </ion-label>
+            <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged()" interface="action-sheet"
+                [disabled]="colorSchemeDisabled" [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
+                <ion-select-option *ngFor="let scheme of colorSchemes" [value]="scheme">
+                    {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
+            </ion-select>
+        </ion-item>
+        <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid">
+            <ion-label><p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p></ion-label>
+        </ion-item>
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
+                <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
+            </ion-label>
+            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged()"></ion-toggle>
+        </ion-item>
+        <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
+            <ion-label>
+                <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
+                <p>{{ 'core.settings.ioscookiesdescription' | translate }}</p>
+                <ion-button expand="block" (click)="openNativeSettings()">
+                    {{ 'core.opensettings' | translate }}
+                </ion-button>
+            </ion-label>
+        </ion-item>
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <h2>{{ 'core.settings.debugdisplay' | translate }}</h2>
+                <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
+            </ion-label>
+            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged()"></ion-toggle>
+        </ion-item>
+        <ion-item class="ion-text-wrap" *ngIf="analyticsSupported">
+            <ion-label>
+                <h2>{{ 'core.settings.enablefirebaseanalytics' | translate }}</h2>
+                <p>{{ 'core.settings.enablefirebaseanalyticsdescription' | translate }}</p>
+            </ion-label>
+            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged()"></ion-toggle>
+        </ion-item>
+    </ion-list>
 </ion-content>
diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html
index c6d1949a8..174475380 100644
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@@ -9,33 +9,34 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no">
-            <ion-label>
-                {{ 'core.settings.opensourcelicenses' | translate }}
-            </ion-label>
-            <ion-button [href]="licensesUrl" target="_blank" fill="clear" slot="end" core-link auto-login="no">
-                {{ 'core.view' | translate }}</ion-button>
-        </ion-item>
-
-        <ng-container *ngIf="!error">
-            <ion-item *ngFor="let license of licenses" class="ion-text-wrap">
+        <ion-list>
+            <ion-item button *ngIf="error" class="ion-text-wrap" [href]="licensesUrl" core-link auto-login="no">
                 <ion-label>
-                    <p class="item-heading">
-                        <a *ngIf="license.repository" [href]="license.repository" core-link
-                            auto-login="no">{{ license.name }}</a>
-                        <ng-container *ngIf="!license.repository">{{ license.name }}</ng-container> - {{ license.version }}
-                    </p>
-                    <p class="item-heading" *ngIf="license.publisher">
-                        {{ 'core.settings.publisher' | translate }}{{ 'core.labelsep' | translate }} {{ license.publisher }}
-                    </p>
-                    <p>{{ 'core.settings.license' | translate }}{{ 'core.labelsep' | translate }} {{ license.licenses }}</p>
-                    <p><a *ngIf="license.url" [href]="license.url" core-link auto-login="no">{{ license.url }}</a></p>
-                    <p><a *ngIf="license.email" [href]="'mailto:' + license.email" core-link
-                            auto-login="no">{{ license.email }}</a></p>
+                    {{ 'core.settings.opensourcelicenses' | translate }}
                 </ion-label>
-                <ion-button *ngIf="license.licenseUrl" [href]="license.licenseUrl" target="_blank"
-                    fill="clear" slot="end" core-link auto-login="no">{{ 'core.view' | translate }}</ion-button>
+                <ion-button [href]="licensesUrl" target="_blank" fill="clear" slot="end" core-link auto-login="no">
+                    {{ 'core.view' | translate }}</ion-button>
             </ion-item>
-        </ng-container>
+            <ng-container *ngIf="!error">
+                <ion-item *ngFor="let license of licenses" class="ion-text-wrap">
+                    <ion-label>
+                        <p class="item-heading">
+                            <a *ngIf="license.repository" [href]="license.repository" core-link
+                                auto-login="no">{{ license.name }}</a>
+                            <ng-container *ngIf="!license.repository">{{ license.name }}</ng-container> - {{ license.version }}
+                        </p>
+                        <p class="item-heading" *ngIf="license.publisher">
+                            {{ 'core.settings.publisher' | translate }}{{ 'core.labelsep' | translate }} {{ license.publisher }}
+                        </p>
+                        <p>{{ 'core.settings.license' | translate }}{{ 'core.labelsep' | translate }} {{ license.licenses }}</p>
+                        <p><a *ngIf="license.url" [href]="license.url" core-link auto-login="no">{{ license.url }}</a></p>
+                        <p><a *ngIf="license.email" [href]="'mailto:' + license.email" core-link
+                                auto-login="no">{{ license.email }}</a></p>
+                    </ion-label>
+                    <ion-button *ngIf="license.licenseUrl" [href]="license.licenseUrl" target="_blank"
+                        fill="clear" slot="end" core-link auto-login="no">{{ 'core.view' | translate }}</ion-button>
+                </ion-item>
+            </ng-container>
+        </ion-list>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 54e988183..865cc082e 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -18,30 +18,32 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'">
-            <ion-label class="ion-text-wrap">
-                <p class="item-heading">
-                    <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+        <ion-list>
+            <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'">
+                <ion-label class="ion-text-wrap">
+                    <p class="item-heading">
+                        <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+                    </p>
+                    <p class="ion-text-wrap">{{ site.fullName }}</p>
+                    <p>{{ site.siteUrl }}</p>
+                </ion-label>
+                <p *ngIf="site.spaceUsage !== undefined" slot="end">
+                    {{ site.spaceUsage | coreBytesToSize }}
                 </p>
-                <p class="ion-text-wrap">{{ site.fullName }}</p>
-                <p>{{ site.siteUrl }}</p>
-            </ion-label>
-            <p *ngIf="site.spaceUsage !== undefined" slot="end">
-                {{ site.spaceUsage | coreBytesToSize }}
-            </p>
-            <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage(site)"
-                [hidden]="site.spaceUsage! + site.cacheEntries! <= 0"
-                [attr.aria-label]="'core.settings.deletesitefilestitle' | translate">
-                <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-        </ion-item>
-        <ion-item-divider>
-            <ion-label>
-                <h2>{{ 'core.settings.total' | translate }}</h2>
-            </ion-label>
-            <p slot="end" class="ion-margin-end">
-                {{ totals.spaceUsage | coreBytesToSize }}
-            </p>
-        </ion-item-divider>
+                <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage(site)"
+                    [hidden]="site.spaceUsage! + site.cacheEntries! <= 0"
+                    [attr.aria-label]="'core.settings.deletesitefilestitle' | translate">
+                    <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </ion-item>
+            <ion-item-divider>
+                <ion-label>
+                    <h2>{{ 'core.settings.total' | translate }}</h2>
+                </ion-label>
+                <p slot="end" class="ion-margin-end">
+                    {{ totals.spaceUsage | coreBytesToSize }}
+                </p>
+            </ion-item-divider>
+        </ion-list>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index a7bc6f784..1808a9cc7 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -15,35 +15,37 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="sitesLoaded">
-        <ion-item-divider>
-            <ion-label>
-                <h2>{{ 'core.settings.syncsettings' | translate }}</h2>
-            </ion-label>
-        </ion-item-divider>
-        <ion-item class="ion-text-wrap">
-            <ion-label>{{ 'core.settings.enablesyncwifi' | translate }}</ion-label>
-            <ion-toggle slot="end" [(ngModel)]="syncOnlyOnWifi" (ngModelChange)="syncOnlyOnWifiChanged()">
-            </ion-toggle>
-        </ion-item>
-        <ion-item-divider>
-            <ion-label>
-                <h2>{{ 'core.settings.sites' | translate }}</h2>
-            </ion-label>
-        </ion-item-divider>
-        <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'" class="ion-text-wrap">
-            <ion-label>
-                <p class="item-heading">
-                    <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
-                </p>
-                <p>{{ site.fullName }}</p>
-                <p>{{ site.siteUrl }}</p>
-            </ion-label>
-            <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end">
-                <ion-button fill="clear"  (click)="synchronize(site.id)"
-                    [title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
-                    <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
-                </ion-button>
-            </core-button-with-spinner>
-        </ion-item>
+        <ion-list>
+            <ion-item-divider>
+                <ion-label>
+                    <h2>{{ 'core.settings.syncsettings' | translate }}</h2>
+                </ion-label>
+            </ion-item-divider>
+            <ion-item class="ion-text-wrap">
+                <ion-label>{{ 'core.settings.enablesyncwifi' | translate }}</ion-label>
+                <ion-toggle slot="end" [(ngModel)]="syncOnlyOnWifi" (ngModelChange)="syncOnlyOnWifiChanged()">
+                </ion-toggle>
+            </ion-item>
+            <ion-item-divider>
+                <ion-label>
+                    <h2>{{ 'core.settings.sites' | translate }}</h2>
+                </ion-label>
+            </ion-item-divider>
+            <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'" class="ion-text-wrap">
+                <ion-label>
+                    <p class="item-heading">
+                        <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
+                    </p>
+                    <p>{{ site.fullName }}</p>
+                    <p>{{ site.siteUrl }}</p>
+                </ion-label>
+                <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end">
+                    <ion-button fill="clear"  (click)="synchronize(site.id)"
+                        [title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                        <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                </core-button-with-spinner>
+            </ion-item>
+        </ion-list>
     </core-loading>
 </ion-content>