MOBILE-3874 calendar: Fix event time and improve a11y

scripts/langindex.json

@@ -1695,6 +1695,7 @@
   "core.editor.underline": "atto_underline/pluginname",
   "core.editor.unorderedlist": "atto_unorderedlist/pluginname",
   "core.emptysplit": "local_moodlemobileapp",
+  "core.endingtime": "local_moodlemobileapp",
   "core.endonesteptour": "tool_usertours",
   "core.error": "moodle",
   "core.errorchangecompletion": "local_moodlemobileapp",
@@ -2304,6 +2305,7 @@
   "core.sort": "moodle",
   "core.sortby": "moodle",
   "core.start": "local_moodlemobileapp",
+  "core.startingtime": "local_moodlemobileapp",
   "core.storingfiles": "local_moodlemobileapp",
   "core.strftimedate": "langconfig",
   "core.strftimedatefullshort": "langconfig",

src/addons/calendar/pages/event/event.html

@@ -58,7 +58,7 @@
                     </h1>
                 </ion-label>
             </ion-item>
-            <ion-item>
+            <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h2>{{ 'addon.calendar.when' | translate }}</h2>
                     <core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"

src/addons/calendar/services/calendar.ts

@@ -345,19 +345,24 @@ export class AddonCalendarProvider {
         siteId?: string,
     ): Promise<string> {
 
+        const getTimeHtml = (time: string, a11yLangKey: string): string =>
+            `<span aria-label="${Translate.instant(a11yLangKey, { $a: CoreTextUtils.cleanTags(time) })}">${time}</span>`;
+        const getStartTimeHtml = (time: string): string => getTimeHtml(time, 'core.startingtime');
+        const getEndTimeHtml = (time: string): string => getTimeHtml(time, 'core.endingtime');
+
         const start = event.timestart * 1000;
         const end = (event.timestart + event.timeduration) * 1000;
         let time: string;
 
-        if (!event.timeduration) {
+        if (event.timeduration) {
 
             if (moment(start).isSame(end, 'day')) {
                 // Event starts and ends the same day.
                 if (event.timeduration == CoreConstants.SECONDS_DAY) {
                     time = Translate.instant('addon.calendar.allday');
                 } else {
-                    time = CoreTimeUtils.userDate(start, format) + ' <strong>&raquo;</strong> ' +
+                    time = getStartTimeHtml(CoreTimeUtils.userDate(start, format)) + ' <strong>&raquo;</strong> ' +
-                            CoreTimeUtils.userDate(end, format);
+                            getEndTimeHtml(CoreTimeUtils.userDate(end, format));
                 }
 
             } else {
@@ -388,11 +393,12 @@ export class AddonCalendarProvider {
 
                 await Promise.all(promises);
 
-                return dayStart + timeStart + ' <strong>&raquo;</strong> ' + dayEnd + timeEnd;
+                return getStartTimeHtml(dayStart + timeStart) + ' <strong>&raquo;</strong> ' +
+                    getEndTimeHtml(dayEnd + timeEnd);
             }
         } else {
             // There is no time duration.
-            time = CoreTimeUtils.userDate(start, format);
+            time = getStartTimeHtml(CoreTimeUtils.userDate(start, format));
         }
 
         if (showTime) {
@@ -2173,6 +2179,7 @@ export type AddonCalendarSubmitCreateUpdateFormDataWSParams = Omit<AddonCalendar
     description?: {
         text: string;
         format: number;
+        itemid: number; // File area ID.
     };
     visible?: number;
     instance?: number;

src/core/lang.json

@@ -97,6 +97,7 @@
     "downloading": "Downloading",
     "edit": "Edit",
     "emptysplit": "This page will appear blank if the left panel is empty or is loading.",
+    "endingtime": "Ending time: {{$a}}",
     "endonesteptour": "Got it",
     "error": "Error",
     "errorchangecompletion": "An error occurred while changing the completion status. Please try again.",
@@ -294,6 +295,7 @@
     "sort": "Sort",
     "sortby": "Sort by",
     "start": "Start",
+    "startingtime": "Starting time: {{$a}}",
     "storingfiles": "Storing files",
     "strftimedate": "%d %B %Y",
     "strftimedatefullshort": "%d/%m/%y",