MOBILE-3947 reminders: Fix reminder button a11y roles

src/core/features/reminders/components/date/date.html

@@ -4,4 +4,4 @@
 </div>
 
 <core-reminders-set-button *ngIf="showReminderButton" slot="end" [component]="component" [instanceId]="instanceId" [type]="type"
-    [label]="label" [timebefore]="timebefore" [time]="time" [title]="title" [url]="url" />
+    [label]="label" [initialTimebefore]="timebefore" [time]="time" [title]="title" [url]="url" />

src/core/features/reminders/components/set-button/set-button.html

@@ -1,6 +1,7 @@
 <ion-button fill="clear" size="small" (click)="setReminder($event)"
-    [attr.aria-label]="'core.reminders.setareminderfor' | translate : { title: title, label: labelClean }"
+    [attr.aria-label]="'core.reminders.setareminderfor' | translate : { title: title, label: labelClean }">
-    [attr.aria-checked]="timebefore !== undefined">
     <ion-icon name="fas-bell" slot="icon-only" *ngIf="timebefore !== undefined" aria-hidden="true" />
     <ion-icon name="far-bell-slash" slot="icon-only" *ngIf="timebefore === undefined" aria-hidden="true" />
 </ion-button>
+
+<span class="sr-only" role="status" *ngIf="reminderMessage">{{ reminderMessage }}</span>

src/core/features/reminders/components/set-button/set-button.ts

@@ -32,18 +32,22 @@ export class CoreRemindersSetButtonComponent implements OnInit {
     @Input() instanceId?: number;
     @Input() type?: string;
     @Input() label = '';
-    @Input() timebefore?: number;
+    @Input() initialTimebefore?: number;
     @Input() time = -1;
     @Input() title = '';
     @Input() url = '';
 
     labelClean = '';
+    timebefore?: number;
+    reminderMessage?: string;
 
     /**
      * @inheritdoc
      */
     ngOnInit(): void {
         this.labelClean = this.label.replace(':', '');
+
+        this.setTimebefore(this.initialTimebefore);
     }
 
     /**
@@ -86,6 +90,23 @@ export class CoreRemindersSetButtonComponent implements OnInit {
         this.saveReminder(reminderTime.timeBefore);
     }
 
+    /**
+     * Update time before.
+     */
+    setTimebefore(timebefore: number | undefined): void {
+        this.timebefore = timebefore;
+
+        if (this.timebefore !== undefined) {
+            const reminderTime = this.time - this.timebefore;
+
+            this.reminderMessage = Translate.instant('core.reminders.reminderset', {
+                $a: CoreTimeUtils.userDate(reminderTime * 1000),
+            });
+        } else {
+            this.reminderMessage = undefined;
+        }
+    }
+
     /**
      * Save reminder.
      *
@@ -105,18 +126,18 @@ export class CoreRemindersSetButtonComponent implements OnInit {
         });
 
         if (timebefore === undefined || timebefore === CoreRemindersService.DISABLED) {
-            this.timebefore = undefined;
+            this.setTimebefore(undefined);
             CoreDomUtils.showToast('core.reminders.reminderunset', true);
 
             return;
         }
 
-        this.timebefore = timebefore;
+        this.setTimebefore(timebefore);
 
         const reminder: CoreReminderData = {
+            timebefore,
             component: this.component,
             instanceId: this.instanceId,
-            timebefore: this.timebefore,
             type: this.type,
             title: this.label + ' ' + this.title,
             url: this.url,