From 064a60ca499daef9b031983e593da9a6efcdb4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 11:52:57 +0200
Subject: [PATCH 1/5] MOBILE-3753 a11y: Use ion-items on item-divider with
 clicks

---
 .../group-conversations.html                  | 51 ++++++++++++++-----
 .../forum/components/edit-post/edit-post.html | 17 +++++--
 .../mod/forum/components/post/post.html       | 16 ++++--
 .../pages/new-discussion/new-discussion.html  | 18 +++++--
 .../core-block-only-title.html                |  5 +-
 .../core-siteplugins-only-title-block.html    |  4 +-
 src/theme/theme.base.scss                     | 10 ----
 src/theme/theme.dark.scss                     |  4 +-
 src/theme/theme.light.scss                    |  5 +-
 9 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 518656e04..bbcea3e60 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -32,15 +32,24 @@
                     <ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
                 </ion-item>
                 <!-- Favourite conversations. -->
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(favourites)" sticky="true"
+                <ion-item
+                    button
+                    class="ion-text-wrap core-expandable divider"
+                    (click)="toggle(favourites)"
+                    sticky="true"
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="favourites.expanded" role="heading button">
+                    [attr.aria-expanded]="favourites.expanded"
+                    aria-controls="addon-messages-groupconversations-favourite"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
+                </ion-item>
+                <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist
+                    id="addon-messages-groupconversations-favourite">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
@@ -55,15 +64,24 @@
                 </ion-item>
 
                 <!-- Group conversations. -->
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(group)" sticky="true"
+                <ion-item
+                    button
+                    class="divider ion-text-wrap core-expandable"
+                    (click)="toggle(group)"
+                    sticky="true"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="group.expanded" role="heading button">
+                    [attr.aria-expanded]="group.expanded"
+                    aria-controls="addon-messages-groupconversations-group"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
+                </ion-item>
+                <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist
+                    id="addon-messages-groupconversations-group">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
@@ -77,17 +95,26 @@
                     <ion-label><ion-spinner></ion-spinner></ion-label>
                 </ion-item>
 
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(individual)" sticky="true"
+                <ion-item
+                    button
+                    class="divider ion-text-wrap core-expandable"
+                    (click)="toggle(individual)"
+                    sticky="true"
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="individual.expanded" role="heading button">
+                    [attr.aria-expanded]="individual.expanded"
+                    aria-controls="addon-messages-groupconversations-individual"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
                     <ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>
+                </ion-item>
+                <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist
+                    id="addon-messages-groupconversations-individual">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
diff --git a/src/addons/mod/forum/components/edit-post/edit-post.html b/src/addons/mod/forum/components/edit-post/edit-post.html
index 4543b75f4..812574c03 100644
--- a/src/addons/mod/forum/components/edit-post/edit-post.html
+++ b/src/addons/mod/forum/components/edit-post/edit-post.html
@@ -25,18 +25,25 @@
                 (contentChanged)="onMessageChange($event)">
             </core-rich-text-editor>
         </ion-item>
-        <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()" role="heading button"
-            [attr.aria-expanded]="advanced" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
+        <ion-item
+            button class="divider ion-text-wrap core-expandable"
+            (click)="toggleAdvanced()"
+            role="heading"
+            detail="false"
+            [attr.aria-expanded]="advanced"
+            aria-controls="addon-mod-forum-advanced"
+            [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+        >
             <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
             <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
             <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
-        </ion-item-divider>
-        <ng-container *ngIf="advanced">
+        </ion-item>
+        <div *ngIf="advanced" id="addon-mod-forum-advanced">
             <core-attachments *ngIf="forum.id && forum.maxattachments > 0"
                 [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [allowOffline]="true" [files]="replyData.files"
                 [component]="component" [componentId]="forum.cmid">
             </core-attachments>
-        </ng-container>
+        </div>
         <ion-grid>
             <ion-row>
                 <ion-col>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 6e99172ef..e149dba0d 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -122,20 +122,26 @@
             <ion-checkbox slot="end" [(ngModel)]="replyData.isprivatereply" name="isprivatereply"></ion-checkbox>
         </ion-item>
         <ng-container *ngIf="forum.id && forum.maxattachments > 0">
-            <ion-item-divider class="core-expandable ion-text-wrap" (click)="toggleAdvanced()" [attr.aria-expanded]="advanced"
-                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') |translate" role="button">
+            <ion-item
+                button
+                class="divider core-expandable ion-text-wrap"
+                (click)="toggleAdvanced()" detail="false"
+                [attr.aria-expanded]="advanced"
+                [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
+                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+            >
                 <ion-label>
                     <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
-            </ion-item-divider>
-            <ng-container *ngIf="advanced">
+            </ion-item>
+            <div *ngIf="advanced" [id]="'addon-forum-reply-edit-form-advanced-' + uniqueId">
                 <core-attachments
                     [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
                     [component]="component" [componentId]="forum.cmid" [allowOffline]="true">
                 </core-attachments>
-            </ng-container>
+            </div>
         </ng-container>
         <ion-grid>
             <ion-row>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index f28a931a9..999ed8eae 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -31,13 +31,21 @@
                     (contentChanged)="onMessageChange($event)">
                 </core-rich-text-editor>
             </ion-item>
-            <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()" [attr.aria-expanded]="advanced"
-                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') |translate" role="heading button">
+            <ion-item
+                button
+                class="divider ion-text-wrap core-expandable"
+                (click)="toggleAdvanced()"
+                detail="false"
+                [attr.aria-expanded]="advanced"
+                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+                role="heading"
+                aria-controls="addon-mod-forum-new-discussion-advanced"
+            >
                 <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
-            </ion-item-divider>
-            <ng-container *ngIf="advanced">
+            </ion-item>
+            <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
                 <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">
                     <ion-label>{{ 'addon.mod_forum.posttomygroups' | translate }}</ion-label>
                     <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups"></ion-toggle>
@@ -61,7 +69,7 @@
                     [files]="newDiscussion.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
                     [component]="component" [componentId]="forum.cmid" [allowOffline]="true">
                 </core-attachments>
-            </ng-container>
+            </div>
             <ion-item>
                 <ion-label>
                     <ion-row>
diff --git a/src/core/features/block/components/only-title-block/core-block-only-title.html b/src/core/features/block/components/only-title-block/core-block-only-title.html
index 4230b25ec..cfdeb1a04 100644
--- a/src/core/features/block/components/only-title-block/core-block-only-title.html
+++ b/src/core/features/block/components/only-title-block/core-block-only-title.html
@@ -1,4 +1,3 @@
-<ion-item-divider class="ion-text-wrap" (click)="gotoBlock()" role="button">
+<ion-item button class="ion-text-wrap divider" (click)="gotoBlock()" detail="true">
     <ion-label><h2>{{ title | translate }}</h2></ion-label>
-    <ion-icon class="item-detail-icon" name="chevron-forward-outline" slot="end" flip-rtl aria-hidden="true"></ion-icon>
-</ion-item-divider>
+</ion-item>
diff --git a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
index 1a4a3a63c..04564f703 100644
--- a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
+++ b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
@@ -1,5 +1,5 @@
-<ion-item-divider class="ion-text-wrap" detail="true" (click)="gotoBlock()" role="button">
+<ion-item button class="divider ion-text-wrap" detail="true" (click)="gotoBlock()" detail="true">
     <ion-label>
         <h2>{{ title | translate }}</h2>
     </ion-label>
-</ion-item-divider>
+</ion-item>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 7069ba7aa..d10a8615f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -185,16 +185,6 @@ ion-alert.core-nohead {
     }
 }
 
-// Ionic item divider.
-ion-item-divider {
-    .item-detail-icon {
-        color: var(--ion-item-detail-icon-color);
-        font-size: var(--ion-item-detail-icon-font-size);
-        opacity: var(--ion-item-detail-icon-opacity);
-        padding-inline-end: 16px;
-    }
-}
-
 // Ionic list.
 ion-list.list-md {
     padding: 0;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 25b8887cc..ef871c0e6 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -67,8 +67,8 @@
     }
 
     --ion-item-background: #{$ion-item-background-dark};
-    --ion-item-detail-icon-color: var(--white);
-    ion-item-divider {
+    --ion-item-detail-icon-: var(--white);
+    ion-item-divider, ion-item.divider {
         --background: var(--black);
         --color: var(--white);
     }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 5ffcbe996..8bd13bd09 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -172,10 +172,11 @@
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
-    ion-item-divider {
+    ion-item-divider, ion-item.divider {
         --background: var(--gray-lighter);
         --color: inherit;
-        min-height: var(--item-divider-min-height);
+        --min-height: var(--item-divider-min-height);
+        min-height: var(--min-height);
     }
 
     --core-combobox-background: var(--ion-item-background);

From ef0ed6c7fb90ef1c84cb9cb8b019b30c151ce6a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 11:54:30 +0200
Subject: [PATCH 2/5] MOBILE-3753 calendar: Fix calendar navigation

---
 .../calendar/addon-calendar-calendar.html     | 132 +++++++++++-------
 .../components/calendar/calendar.scss         |   2 +
 .../calendar/components/calendar/calendar.ts  |  40 +++++-
 .../calendar/pages/edit-event/edit-event.html |  75 ++++------
 src/addons/calendar/services/calendar.ts      |   1 +
 src/core/classes/aria-role-button.ts          |   8 +-
 .../rich-text-editor/rich-text-editor.ts      |  34 ++++-
 7 files changed, 179 insertions(+), 113 deletions(-)

diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index d80b34e36..7fe5c0da7 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -18,7 +18,7 @@
                 </ion-button>
             </ion-col>
             <ion-col class="ion-text-center addon-calendar-period">
-                <h3>{{ periodName }}</h3>
+                <h3 id="addon-calendar-monthname">{{ periodName }}</h3>
             </ion-col>
             <ion-col class="ion-text-end" *ngIf="canNavigate">
                 <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
@@ -29,58 +29,88 @@
     </ion-grid>
 
     <!-- Calendar view. -->
-    <ion-grid class="addon-calendar-months">
-        <!-- List of days. -->
-        <ion-row>
-            <ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of weekDays">
-                <span class="ion-hide-md-up" [title]="day.fullname | translate">{{ day.shortname | translate }}</span>
-                <span class="ion-hide-md-down">{{ day.fullname | translate }}</span>
-            </ion-col>
-        </ion-row>
+    <ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
+        <div role="rowgroup">
+            <!-- List of days. -->
+            <ion-row role="row">
+                <ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of weekDays" role="columnheader">
+                    <span class="sr-only">{{ day.fullname | translate }}</span>
+                    <span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | translate }}</span>
+                    <span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
+                </ion-col>
+            </ion-row>
+        </div>
+        <div role="rowgroup">
 
-        <!-- Weeks. -->
-        <ion-row *ngFor="let week of weeks" class="addon-calendar-week">
-            <!-- Empty slots (first week). -->
-            <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day"></ion-col>
-            <ion-col class="addon-calendar-day ion-text-center" *ngFor="let day of week.days" (click)="dayClicked(day.mday)"
-                [ngClass]='{"hasevents": day.hasevents, "today": isCurrentMonth && day.istoday,
-                "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}'
-                [class.addon-calendar-event-past-day]="isPastMonth || day.ispast">
-                <p class="addon-calendar-day-number"><span>{{ day.mday }}</span></p>
-
-                <!-- In phone, display some dots to indicate the type of events. -->
-                <p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
-                    class="calendar_event_type calendar_event_{{type}}"></span></p>
-
-                <!-- In tablet, display list of events. -->
-                <div class="ion-hide-md-down addon-calendar-day-events">
-                    <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
-                        <div role="button" *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
-                            (click)="eventClicked(event, $event)" [class.addon-calendar-event-past]="event.ispast">
-                            <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
-                            <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
-                                [attr.aria-label]="'core.notsent' | translate"></ion-icon>
-                            <ion-icon *ngIf="event.deleted" name="fas-trash" [attr.aria-label]="'core.deletedoffline' | translate">
-                            </ion-icon>
-                            <span class="addon-calendar-event-time">{{ event.timestart * 1000 | coreFormatDate: timeFormat }}</span>
-                            <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation"
-                                class="core-module-icon">
-                            <!-- Add the icon title so accessibility tools read it. -->
-                            <span class="sr-only">
-                                {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
-                            </span>
-                            <span class="addon-calendar-event-name">{{event.name}}</span>
-                        </div>
-                    </ng-container>
-                    <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
-                        <b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
+            <!-- Weeks. -->
+            <ion-row *ngFor="let week of weeks" class="addon-calendar-week" role="row">
+                <!-- Empty slots (first week). -->
+                <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell"></ion-col>
+                <ion-col
+                    *ngFor="let day of week.days"
+                    class="addon-calendar-day ion-text-center"
+                    [ngClass]='{
+                        "hasevents": day.hasevents,
+                        "today": isCurrentMonth && day.istoday,
+                        "weekend": day.isweekend,
+                        "duration_finish": day.haslastdayofevent
+                    }'
+                    [class.addon-calendar-event-past-day]="isPastMonth || day.ispast"
+                    role="button cell"
+                    tabindex="0"
+                    (click)="dayClicked(day.mday)"
+                    (keyup)="dayAction.keyUp($event, day.mday)"
+                    (keydown)="dayAction.keyDown($event)"
+                >
+                    <p class="addon-calendar-day-number">
+                        <span aria-hidden="true">{{ day.mday }}</span>
+                        <span class="sr-only">{{ day.periodName | translate }}</span>
                     </p>
-                </div>
-            </ion-col>
-            <!-- Empty slots (last week). -->
-            <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day"></ion-col>
-        </ion-row>
+
+                    <!-- In phone, display some dots to indicate the type of events. -->
+                    <p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
+                        class="calendar_event_type calendar_event_{{type}}"></span></p>
+
+                    <!-- In tablet, display list of events. -->
+                    <div class="ion-hide-md-down addon-calendar-day-events">
+                        <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
+                            <div
+                                *ngIf="index < 3 || day.filteredEvents.length == 4"
+                                class="addon-calendar-event"
+                                [class.addon-calendar-event-past]="event.ispast"
+                                role="button"
+                                tabindex="0"
+                                (click)="eventClicked(event, $event)"
+                                (keyup)="eventAction.keyUp($event, event)"
+                                (keydown)="eventAction.keyDown($event)"
+                            >
+                                <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
+                                <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
+                                    [attr.aria-label]="'core.notsent' | translate"></ion-icon>
+                                <ion-icon *ngIf="event.deleted" name="fas-trash"
+                                    [attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
+                                <span class="addon-calendar-event-time">
+                                    {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
+                                </span>
+                                <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation"
+                                    class="core-module-icon">
+                                <!-- Add the icon title so accessibility tools read it. -->
+                                <span class="sr-only">
+                                    {{ 'addon.calendar.type' + event.formattedType | translate }}
+                                    <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                                </span>
+                                <span class="addon-calendar-event-name">{{event.name}}</span>
+                            </div>
+                        </ng-container>
+                        <p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
+                            <b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
+                        </p>
+                    </div>
+                </ion-col>
+                <!-- Empty slots (last week). -->
+                <ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell"></ion-col>
+            </ion-row>
+        </div>
     </ion-grid>
 
 </core-loading>
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index 848d6357c..5e22f595f 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@@ -71,6 +71,7 @@
             overflow: hidden;
             white-space: nowrap;
             color: var(--text-color);
+            min-height: auto;
 
             &.addon-calendar-event-past {
                 opacity: 0.5;
@@ -102,6 +103,7 @@
 
     .addon-calendar-weekday {
         border-bottom: 1px solid var(--addon-calendar-border-color);
+        font-weight: bold;
     }
 
     .addon-calendar-day-events {
diff --git a/src/addons/calendar/components/calendar/calendar.ts b/src/addons/calendar/components/calendar/calendar.ts
index 34eb7ee31..5c28a9b69 100644
--- a/src/addons/calendar/components/calendar/calendar.ts
+++ b/src/addons/calendar/components/calendar/calendar.ts
@@ -41,6 +41,7 @@ import { AddonCalendarOffline } from '../../services/calendar-offline';
 import { CoreCategoryData, CoreCourses } from '@features/courses/services/courses';
 import { CoreApp } from '@services/app';
 import { CoreLocalNotifications } from '@services/local-notifications';
+import { CoreAriaRoleButton } from '@classes/aria-role-button';
 
 /**
  * Component that displays a calendar.
@@ -67,6 +68,8 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     timeFormat?: string;
     isCurrentMonth = false;
     isPastMonth = false;
+    dayAction: AddonCalendarDayButton;
+    eventAction: AddonCalendarEventButton;
 
     protected year?: number;
     protected month?: number;
@@ -88,6 +91,9 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
         differs: KeyValueDiffers,
     ) {
 
+        this.dayAction = new AddonCalendarDayButton(this);
+        this.eventAction = new AddonCalendarEventButton(this);
+
         this.currentSiteId = CoreSites.getCurrentSiteId();
 
         if (CoreLocalNotifications.isAvailable()) {
@@ -233,6 +239,10 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
 
         this.weeks.forEach((week) => {
             week.days.forEach((day) => {
+                day.periodName = CoreTimeUtils.userDate(
+                    new Date(this.year!, this.month! - 1, day.mday).getTime(),
+                    'core.strftimedaydate',
+                );
                 day.eventsFormated = day.eventsFormated || [];
                 day.filteredEvents = day.filteredEvents || [];
                 day.events.forEach((event) => {
@@ -372,7 +382,7 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
      * @param calendarEvent Calendar event..
      * @param event Mouse event.
      */
-    eventClicked(calendarEvent: AddonCalendarEventToDisplay, event: MouseEvent): void {
+    eventClicked(calendarEvent: AddonCalendarEventToDisplay, event: Event): void {
         this.onEventClicked.emit(calendarEvent.id);
         event.stopPropagation();
     }
@@ -525,3 +535,31 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     }
 
 }
+
+/**
+ * Helper class to manage day button.
+ */
+class AddonCalendarDayButton extends CoreAriaRoleButton<AddonCalendarCalendarComponent> {
+
+    /**
+     * @inheritdoc
+     */
+    click(event: Event, day: number): void {
+        this.componentInstance.dayClicked(day);
+    }
+
+}
+
+/**
+ * Helper class to manage event button.
+ */
+class AddonCalendarEventButton extends CoreAriaRoleButton<AddonCalendarCalendarComponent> {
+
+    /**
+     * @inheritdoc
+     */
+    click(event: Event, calendarEvent: AddonCalendarEventToDisplay): void {
+        this.componentInstance.eventClicked(calendarEvent, event);
+    }
+
+}
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 78c05e1fb..fb22f3bd9 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -16,9 +16,7 @@
             <!-- Event name. -->
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">
-                    <h2 [core-mark-required]="true">
-                        {{ 'addon.calendar.eventname' | translate }}
-                    </h2>
+                    <h2 [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</h2>
                 </ion-label>
                 <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name">
                 </ion-input>
@@ -27,11 +25,7 @@
 
             <!-- Date. -->
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">
-                    <h2 [core-mark-required]="true">
-                        {{ 'core.date' | translate }}
-                    </h2>
-                </ion-label>
+                <ion-label position="stacked"><h2 [core-mark-required]="true">{{ 'core.date' | translate }}</h2></ion-label>
                 <ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
                     [max]="maxDate" [min]="minDate">
                 </ion-datetime>
@@ -40,13 +34,15 @@
 
             <!-- Type. -->
             <ion-item class="ion-text-wrap addon-calendar-eventtype-container">
-                <ion-label id="addon-calendar-eventtype-label">
-                    <h2 [core-mark-required]="true">
-                        {{ 'addon.calendar.eventkind' | translate }}
-                    </h2>
+                <ion-label>
+                    <h2 [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</h2>
                 </ion-label>
-                <ion-select formControlName="eventtype" aria-labelledby="addon-calendar-eventtype-label" interface="action-sheet"
-                    [disabled]="eventTypes.length == 1">
+                <p *ngIf="eventTypes.length == 1" slot="end">{{eventTypes[0].name | translate }}</p>
+                <ion-select
+                    *ngIf="eventTypes.length > 1"
+                    formControlName="eventtype"
+                    interface="action-sheet"
+                >
                     <ion-select-option *ngFor="let type of eventTypes" [value]="type.value">
                         {{ type.name | translate }}
                     </ion-select-option>
@@ -55,12 +51,8 @@
 
             <!-- Category. -->
             <ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'category'">
-                <ion-label id="addon-calendar-category-label">
-                    <h2 [core-mark-required]="true">
-                        {{ 'core.category' | translate }}
-                    </h2>
-                </ion-label>
-                <ion-select formControlName="categoryid" aria-labelledby="addon-calendar-category-label" interface="action-sheet"
+                <ion-label><h2 [core-mark-required]="true">{{ 'core.category' | translate }}</h2></ion-label>
+                <ion-select formControlName="categoryid" interface="action-sheet"
                     [placeholder]="'core.noselection' | translate">
                     <ion-select-option *ngFor="let category of categories" [value]="category.id">
                         {{ category.name }}
@@ -70,12 +62,8 @@
 
             <!-- Course. -->
             <ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'course'">
-                <ion-label id="addon-calendar-course-label">
-                    <h2 [core-mark-required]="true">
-                        {{ 'core.course' | translate }}
-                    </h2>
-                </ion-label>
-                <ion-select formControlName="courseid" aria-labelledby="addon-calendar-course-label" interface="action-sheet"
+                <ion-label><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
+                <ion-select formControlName="courseid" interface="action-sheet"
                     [placeholder]="'core.noselection' | translate">
                     <ion-select-option *ngFor="let course of courses" [value]="course.id">{{ course.fullname }}</ion-select-option>
                 </ion-select>
@@ -85,12 +73,8 @@
             <ng-container *ngIf="typeControl.value == 'group'">
                 <!-- Select the course. -->
                 <ion-item class="ion-text-wrap">
-                    <ion-label id="addon-calendar-groupcourse-label">
-                        <h2 [core-mark-required]="true">
-                            {{ 'core.course' | translate }}
-                        </h2>
-                    </ion-label>
-                    <ion-select formControlName="groupcourseid" aria-labelledby="addon-calendar-groupcourse-label"
+                    <ion-label><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
+                    <ion-select formControlName="groupcourseid"
                         interface="action-sheet" [placeholder]="'core.noselection' | translate"
                         (ionChange)="groupCourseSelected($event)">
                         <ion-select-option *ngFor="let course of courses" [value]="course.id">
@@ -104,12 +88,8 @@
                 </ion-item>
                 <!-- Select the group. -->
                 <ion-item class="ion-text-wrap" *ngIf="!loadingGroups && groups.length > 0">
-                    <ion-label id="addon-calendar-group-label">
-                        <h2 [core-mark-required]="true">
-                            {{ 'core.group' | translate }}
-                        </h2>
-                    </ion-label>
-                    <ion-select formControlName="groupid" aria-labelledby="addon-calendar-group-label" interface="action-sheet"
+                    <ion-label><h2 [core-mark-required]="true">{{ 'core.group' | translate }}</h2></ion-label>
+                    <ion-select formControlName="groupid" interface="action-sheet"
                         [placeholder]="'core.noselection' | translate">
                         <ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
                     </ion-select>
@@ -121,23 +101,20 @@
             </ng-container>
 
             <!-- Advanced options. -->
-            <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()"
-                [attr.aria-label]="(advanced ? 'core.showless' : 'core.showmore') | translate" role="button">
+            <ion-item button class="ion-text-wrap core-expandable divider" (click)="toggleAdvanced()">
                 <ion-icon *ngIf="!advanced" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <h2 *ngIf="!advanced">{{ 'core.showmore' | translate }}</h2>
                     <h2 *ngIf="advanced">{{ 'core.showless' | translate }}</h2>
                 </ion-label>
-            </ion-item-divider>
+            </ion-item>
 
             <div [hidden]="!advanced">
                 <!-- Description. -->
                 <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <h2>{{ 'core.description' | translate }}</h2>
-                    </ion-label>
-                    <core-rich-text-editor [control]="descriptionControl"
+                    <ion-label position="stacked"><h2>{{ 'core.description' | translate }}</h2></ion-label>
+                    <core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
                         [placeholder]="'core.description' | translate" name="description" [component]="component"
                         [componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
                 </ion-item>
@@ -154,9 +131,7 @@
                     <ion-radio-group formControlName="duration">
                         <ion-item class="addon-calendar-radio-title">
                             <ion-label>
-                                <h2>
-                                    {{ 'addon.calendar.eventduration' | translate }}
-                                </h2>
+                                <h2>{{ 'addon.calendar.eventduration' | translate }}</h2>
                             </ion-label>
                         </ion-item>
                         <ion-item>
@@ -200,9 +175,7 @@
                     <ion-radio-group formControlName="repeateditall">
                         <ion-item class="addon-calendar-radio-title">
                             <ion-label>
-                                <h2>
-                                    {{ 'addon.calendar.repeatedevents' | translate }}
-                                </h2>
+                                <h2>{{ 'addon.calendar.repeatedevents' | translate }}</h2>
                             </ion-label>
                         </ion-item>
                         <ion-item>
diff --git a/src/addons/calendar/services/calendar.ts b/src/addons/calendar/services/calendar.ts
index c1a01b8ec..b3b00e040 100644
--- a/src/addons/calendar/services/calendar.ts
+++ b/src/addons/calendar/services/calendar.ts
@@ -2026,6 +2026,7 @@ export type AddonCalendarWeekDay = AddonCalendarDay & {
     ispast?: boolean; // Calculated in the app. Whether the day is in the past.
     filteredEvents?: AddonCalendarEventToDisplay[]; // Calculated in the app. Filtered events.
     eventsFormated?: AddonCalendarEventToDisplay[]; // Events.
+    periodName?: string;
 };
 
 /**
diff --git a/src/core/classes/aria-role-button.ts b/src/core/classes/aria-role-button.ts
index db15a0f9a..28a019a14 100644
--- a/src/core/classes/aria-role-button.ts
+++ b/src/core/classes/aria-role-button.ts
@@ -36,13 +36,14 @@ export abstract class CoreAriaRoleButton<T = unknown> {
      * A11y key functionality that translates space and enter keys to click action.
      *
      * @param event Event.
+     * @param args Additional args.
      */
-    keyUp(event: KeyboardEvent): void {
+    keyUp(event: KeyboardEvent, ...args: unknown[]): void {
         if ((event.key == ' ' || event.key == 'Enter') && this.isAllowed()) {
             event.preventDefault();
             event.stopPropagation();
 
-            this.click(event);
+            this.click(event, ...args);
         }
     }
 
@@ -50,9 +51,10 @@ export abstract class CoreAriaRoleButton<T = unknown> {
      * A11y click functionality.
      *
      * @param event Event.
+     * @param args Additional args.
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    click(event?: Event): void {
+    click(event?: Event, ...args: unknown[]): void {
         // Nothing defined here.
     }
 
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
index b1990106d..0b53152f3 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
@@ -89,8 +89,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
     protected resetObserver?: CoreEventObserver;
     protected initHeightInterval?: number;
     protected isCurrentView = true;
-    protected toolbarButtonWidth = 40;
-    protected toolbarArrowWidth = 28;
+    protected toolbarButtonWidth = 44;
+    protected toolbarArrowWidth = 44;
     protected pageInstance: string;
     protected autoSaveInterval?: number;
     protected hideMessageTimeout?: number;
@@ -100,6 +100,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
     protected resizeFunction?: () => Promise<number>;
     protected selectionChangeFunction?: () => void;
     protected languageChangedSubscription?: Subscription;
+    protected resizeObserver?: IntersectionObserver;
 
     rteEnabled = false;
     isPhone = false;
@@ -127,6 +128,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
         initialSlide: 0,
         slidesPerView: 6,
         centerInsufficientSlides: true,
+        watchSlidesVisibility: true,
     };
 
     constructor(
@@ -136,6 +138,14 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
         this.contentChanged = new EventEmitter<string>();
         this.element = elementRef.nativeElement as HTMLDivElement;
         this.pageInstance = 'app_' + Date.now(); // Generate a "unique" ID based on timestamp.
+
+        if ('IntersectionObserver' in window) {
+            this.resizeObserver = new IntersectionObserver((observerEntry: IntersectionObserverEntry[]) => {
+                if (observerEntry[0].boundingClientRect.width > 0) {
+                    this.updateToolbarButtons();
+                }
+            });
+        }
     }
 
     /**
@@ -231,8 +241,12 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
         });
 
         this.resizeFunction = this.maximizeEditorSize.bind(this);
-        this.selectionChangeFunction = this.updateToolbarStyles.bind(this);
         window.addEventListener('resize', this.resizeFunction!);
+
+        // Start observing the target node for configured mutations
+        this.resizeObserver?.observe(this.element);
+
+        this.selectionChangeFunction = this.updateToolbarStyles.bind(this);
         document.addEventListener('selectionchange', this.selectionChangeFunction!);
 
         this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, (kbHeight: number) => {
@@ -273,7 +287,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
 
             setTimeout(async () => {
                 // Editor is ready, adjust Height if needed.
-                let height;
+                let height: number;
 
                 if (CoreApp.isAndroid()) {
                     // In Android we ignore the keyboard height because it is not part of the web view.
@@ -760,6 +774,11 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
      * Show the toolbar.
      */
     showToolbar(event: Event): void {
+        if (!('IntersectionObserver' in window)) {
+            // Fallback if IntersectionObserver is not supported.
+            this.updateToolbarButtons();
+        }
+
         this.element.classList.add('ion-touched');
         this.element.classList.remove('ion-untouched');
         this.element.classList.add('has-focus');
@@ -776,7 +795,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
      * @param event Event.
      */
     stopBubble(event: Event): void {
-        if (event.type != 'mouseup' && event.type != 'keyup') {
+        if (event.type != 'touchend' &&event.type != 'mouseup' && event.type != 'keyup') {
             event.preventDefault();
         }
         event.stopPropagation();
@@ -840,7 +859,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
      * Update the number of toolbar buttons displayed.
      */
     async updateToolbarButtons(): Promise<void> {
-        if (!this.isCurrentView || !this.toolbar || !this.toolbarSlides) {
+        if (!this.isCurrentView || !this.toolbar || !this.toolbarSlides || this.element.offsetParent == null) {
             // Don't calculate if component isn't in current view, the calculations are wrong.
             return;
         }
@@ -856,7 +875,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
             return;
         }
 
-        if (width > length * this.toolbarButtonWidth) {
+        if (length > 0 && width > length * this.toolbarButtonWidth) {
             this.slidesOpts = { ...this.slidesOpts, slidesPerView: length };
             this.toolbarArrows = false;
         } else {
@@ -1096,6 +1115,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
         clearInterval(this.initHeightInterval);
         clearInterval(this.autoSaveInterval);
         clearTimeout(this.hideMessageTimeout);
+        this.resizeObserver?.disconnect();
         this.resetObserver?.off();
         this.keyboardObserver?.off();
     }

From de6442daab389410bcc87bac6126313d8947c8e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 17:11:59 +0200
Subject: [PATCH 3/5] MOBILE-3753 messages: Add context to messages badges

---
 scripts/langindex.json                        |  6 ++++
 src/addons/messages/lang.json                 |  5 +++-
 .../group-conversations.html                  | 28 ++++++++++++++-----
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/scripts/langindex.json b/scripts/langindex.json
index 7ca7eb8c2..97ebde71e 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -281,6 +281,7 @@
   "addon.messages.noncontacts": "message",
   "addon.messages.nousersfound": "local_moodlemobileapp",
   "addon.messages.numparticipants": "message",
+  "addon.messages.pendingcontactrequests": "message",
   "addon.messages.removecontact": "message",
   "addon.messages.removecontactconfirm": "message",
   "addon.messages.removefromfavourites": "message",
@@ -301,6 +302,8 @@
   "addon.messages.unblockuser": "message",
   "addon.messages.unblockuserconfirm": "message",
   "addon.messages.unmuteconversation": "message",
+  "addon.messages.unreadconversations": "message",
+  "addon.messages.unreadmessages": "message",
   "addon.messages.useentertosend": "message",
   "addon.messages.useentertosenddescdesktop": "local_moodlemobileapp",
   "addon.messages.useentertosenddescmac": "local_moodlemobileapp",
@@ -1450,6 +1453,7 @@
   "core.course.completion_automatic:todo": "course",
   "core.course.completion_manual:aria:done": "course",
   "core.course.completion_manual:aria:markdone": "course",
+  "core.course.completion_manual:done": "course",
   "core.course.completion_manual:markdone": "course",
   "core.course.completion_setby:auto:done": "course",
   "core.course.completion_setby:auto:todo": "course",
@@ -1748,6 +1752,7 @@
   "core.hasdatatosync": "local_moodlemobileapp",
   "core.help": "moodle",
   "core.hide": "moodle",
+  "core.hideadvanced": "form",
   "core.hour": "moodle",
   "core.hours": "moodle",
   "core.humanreadablesize": "local_moodlemobileapp",
@@ -2114,6 +2119,7 @@
   "core.sharedfiles.sharedfiles": "local_moodlemobileapp",
   "core.sharedfiles.successstorefile": "local_moodlemobileapp",
   "core.show": "moodle",
+  "core.showadvanced": "form",
   "core.showless": "form",
   "core.showmore": "form",
   "core.site": "moodle",
diff --git a/src/addons/messages/lang.json b/src/addons/messages/lang.json
index 0b728d3e9..a6c556cda 100644
--- a/src/addons/messages/lang.json
+++ b/src/addons/messages/lang.json
@@ -51,6 +51,7 @@
     "noncontacts": "Non-contacts",
     "nousersfound": "No users found",
     "numparticipants": "{{$a}} participants",
+    "pendingcontactrequests": "There are {{$a}} pending contact requests",
     "removecontact": "Remove contact",
     "removecontactconfirm": "Are you sure you want to remove {{$a}} from your contacts?",
     "removefromfavourites": "Unstar conversation",
@@ -71,6 +72,8 @@
     "unblockuser": "Unblock user",
     "unblockuserconfirm": "Are you sure you want to unblock {{$a}}?",
     "unmuteconversation": "Unmute",
+    "unreadconversations": "There are {{$a}} unread conversations",
+    "unreadmessages": "There are {{$a}} unread messages",
     "useentertosend": "Use enter to send",
     "useentertosenddescdesktop": "If disabled, you can use Ctrl+Enter to send the message.",
     "useentertosenddescmac": "If disabled, you can use Cmd+Enter to send the message.",
@@ -81,4 +84,4 @@
     "you": "You:",
     "youhaveblockeduser": "You have blocked this user.",
     "yourcontactrequestpending": "Your contact request is pending with {{$a}}"
-}
\ No newline at end of file
+}
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index bbcea3e60..5a2a475c6 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -25,11 +25,13 @@
 
         <core-loading [hideUntil]="loaded" [message]="loadingMessage">
             <ion-list>
-                <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()"
-                    [attr.aria-label]="'addon.messages.contacts' | translate" detail="true" button>
+                <ion-item class="ion-text-wrap addon-message-discussion" (click)="gotoContacts()" detail="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
-                    <ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
+                    <ion-badge *ngIf="contactRequestsCount > 0" slot="end" aria-hidden="true">{{contactRequestsCount}}</ion-badge>
+                    <span *ngIf="contactRequestsCount > 0" class="sr-only">
+                        {{ 'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount} }}
+                    </span>
                 </ion-item>
                 <!-- Favourite conversations. -->
                 <ion-item
@@ -46,7 +48,10 @@
                     <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
-                    <ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
+                    <ion-badge slot="end" *ngIf="favourites.unread" aria-hidden="true">{{ favourites.unread }}</ion-badge>
+                    <span *ngIf="favourites.unread" class="sr-only">
+                        {{ 'addon.messages.unreadconversations' | translate:{$a: favourites.unread} }}
+                    </span>
                 </ion-item>
                 <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist
                     id="addon-messages-groupconversations-favourite">
@@ -78,7 +83,10 @@
                     <ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
-                    <ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
+                    <ion-badge slot="end" *ngIf="group.unread" aria-hidden="true">{{ group.unread }}</ion-badge>
+                    <span *ngIf="group.unread" class="sr-only">
+                        {{ 'addon.messages.unreadconversations' | translate:{$a: group.unread} }}
+                    </span>
                 </ion-item>
                 <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist
                     id="addon-messages-groupconversations-group">
@@ -111,7 +119,10 @@
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
-                    <ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
+                    <ion-badge slot="end" *ngIf="individual.unread" aria-hidden="true">{{ individual.unread }}</ion-badge>
+                    <span *ngIf="individual.unread" class="sr-only">
+                        {{ 'addon.messages.unreadconversations' | translate:{$a: individual.unread} }}
+                    </span>
                 </ion-item>
                 <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist
                     id="addon-messages-groupconversations-individual">
@@ -171,7 +182,10 @@
             </p>
         </ion-label>
         <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
-            <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>
+            <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
+            <span *ngIf="conversation.unreadcount > 0" class="sr-only">
+                {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
+            </span>
             <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
         </ion-note>
     </ion-item>

From 4c59d4ce8104f58190b9e0bf2d78703532b0d90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 17:28:10 +0200
Subject: [PATCH 4/5] MOBILE-3753 menu: Add context to main menu badges

---
 src/addons/messages/services/handlers/mainmenu.ts        | 1 +
 src/addons/notifications/services/handlers/mainmenu.ts   | 1 +
 src/core/features/mainmenu/pages/menu/menu.html          | 9 ++++++---
 src/core/features/mainmenu/pages/more/more.html          | 6 +++++-
 src/core/features/mainmenu/services/mainmenu-delegate.ts | 5 +++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/addons/messages/services/handlers/mainmenu.ts b/src/addons/messages/services/handlers/mainmenu.ts
index 4461ee4f9..2f8021415 100644
--- a/src/addons/messages/services/handlers/mainmenu.ts
+++ b/src/addons/messages/services/handlers/mainmenu.ts
@@ -47,6 +47,7 @@ export class AddonMessagesMainMenuHandlerService implements CoreMainMenuHandler,
         class: 'addon-messages-handler',
         showBadge: true, // Do not check isMessageCountEnabled because we'll use fallback it not enabled.
         badge: '',
+        badgeA11yText: 'addon.messages.unreadconversations',
         loading: true,
     };
 
diff --git a/src/addons/notifications/services/handlers/mainmenu.ts b/src/addons/notifications/services/handlers/mainmenu.ts
index dbf5aeb1e..5cb4584d2 100644
--- a/src/addons/notifications/services/handlers/mainmenu.ts
+++ b/src/addons/notifications/services/handlers/mainmenu.ts
@@ -41,6 +41,7 @@ export class AddonNotificationsMainMenuHandlerService implements CoreMainMenuHan
         class: 'addon-notifications-handler',
         showBadge: true,
         badge: '',
+        badgeA11yText: 'addon.notifications.unreadnotification',
         loading: true,
     };
 
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index 1b2d09b25..ba8099d71 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@@ -16,11 +16,14 @@
             [selected]="tab.page === selectedTab"
             [tabindex]="selectedTab == tab.page ? 0 : -1"
             [attr.aria-controls]="tab.id"
-            [attr.aria-label]="tab.title | translate"
         >
             <ion-icon [name]="tab.icon" aria-hidden="true"></ion-icon>
             <ion-label aria-hidden="true">{{ tab.title | translate }}</ion-label>
-            <ion-badge *ngIf="tab.badge">{{ tab.badge }}</ion-badge>
+            <ion-badge *ngIf="tab.badge" aria-hidden="true">{{ tab.badge }}</ion-badge>
+            <span class="sr-only">{{ tab.title | translate }}</span>
+            <span *ngIf="tab.badge && tab.badgeA11yText" class="sr-only">
+                {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+            </span>
         </ion-tab-button>
 
         <ion-tab-button
@@ -32,10 +35,10 @@
             layout="label-hide"
             [tabindex]="selectedTab == morePageName ? 0 : -1"
             [attr.aria-controls]="morePageName"
-            [attr.aria-label]="'core.more' | translate"
         >
             <ion-icon name="fas-bars" aria-hidden="true"></ion-icon>
             <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>
+            <span class="sr-only">{{ 'core.more' | translate }}</span>
         </ion-tab-button>
     </ion-tab-bar>
 </ion-tabs>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index 79b029c4e..7811f7d7a 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -30,8 +30,12 @@
             <ion-label>
                 <h2>{{ handler.title | translate}}</h2>
             </ion-label>
-            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge">{{handler.badge}}
+            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
+                {{handler.badge}}
             </ion-badge>
+            <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
+                {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
+            </span>
             <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading"></ion-spinner>
         </ion-item>
         <ng-container *ngFor="let item of customItems">
diff --git a/src/core/features/mainmenu/services/mainmenu-delegate.ts b/src/core/features/mainmenu/services/mainmenu-delegate.ts
index 862bb5b55..998550f49 100644
--- a/src/core/features/mainmenu/services/mainmenu-delegate.ts
+++ b/src/core/features/mainmenu/services/mainmenu-delegate.ts
@@ -65,6 +65,11 @@ export interface CoreMainMenuHandlerData {
      */
     badge?: string;
 
+    /**
+     * Accessibility text to add on the badge. Only used if showBadge is true.
+     */
+    badgeA11yText?: string;
+
     /**
      * If true, the badge number is being loaded. Only used if showBadge is true.
      */

From a68d84c4d4434f8160e3dbe5cbc3c48a2655e4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 12 May 2021 16:35:45 +0200
Subject: [PATCH 5/5] MOBILE-3753 a11y: More aria role button to a new
 directive

---
 .../calendar/addon-calendar-calendar.html     |  8 +--
 .../calendar/components/calendar/calendar.ts  | 35 ----------
 src/core/classes/aria-role-button.ts          | 70 -------------------
 .../user-avatar/core-user-avatar.html         |  7 +-
 .../components/user-avatar/user-avatar.ts     | 46 +++---------
 src/core/directives/aria-button.ts            | 57 +++++++++++++++
 src/core/directives/directives.module.ts      |  3 +
 7 files changed, 73 insertions(+), 153 deletions(-)
 delete mode 100644 src/core/classes/aria-role-button.ts
 create mode 100644 src/core/directives/aria-button.ts

diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 7fe5c0da7..ccae4c3f1 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -58,9 +58,7 @@
                     [class.addon-calendar-event-past-day]="isPastMonth || day.ispast"
                     role="button cell"
                     tabindex="0"
-                    (click)="dayClicked(day.mday)"
-                    (keyup)="dayAction.keyUp($event, day.mday)"
-                    (keydown)="dayAction.keyDown($event)"
+                    (ariaButtonClick)="dayClicked(day.mday)"
                 >
                     <p class="addon-calendar-day-number">
                         <span aria-hidden="true">{{ day.mday }}</span>
@@ -80,9 +78,7 @@
                                 [class.addon-calendar-event-past]="event.ispast"
                                 role="button"
                                 tabindex="0"
-                                (click)="eventClicked(event, $event)"
-                                (keyup)="eventAction.keyUp($event, event)"
-                                (keydown)="eventAction.keyDown($event)"
+                                (ariaButtonClick)="eventClicked(event, $event)"
                             >
                                 <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
                                 <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
diff --git a/src/addons/calendar/components/calendar/calendar.ts b/src/addons/calendar/components/calendar/calendar.ts
index 5c28a9b69..c6e97072a 100644
--- a/src/addons/calendar/components/calendar/calendar.ts
+++ b/src/addons/calendar/components/calendar/calendar.ts
@@ -41,7 +41,6 @@ import { AddonCalendarOffline } from '../../services/calendar-offline';
 import { CoreCategoryData, CoreCourses } from '@features/courses/services/courses';
 import { CoreApp } from '@services/app';
 import { CoreLocalNotifications } from '@services/local-notifications';
-import { CoreAriaRoleButton } from '@classes/aria-role-button';
 
 /**
  * Component that displays a calendar.
@@ -68,8 +67,6 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     timeFormat?: string;
     isCurrentMonth = false;
     isPastMonth = false;
-    dayAction: AddonCalendarDayButton;
-    eventAction: AddonCalendarEventButton;
 
     protected year?: number;
     protected month?: number;
@@ -90,10 +87,6 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     constructor(
         differs: KeyValueDiffers,
     ) {
-
-        this.dayAction = new AddonCalendarDayButton(this);
-        this.eventAction = new AddonCalendarEventButton(this);
-
         this.currentSiteId = CoreSites.getCurrentSiteId();
 
         if (CoreLocalNotifications.isAvailable()) {
@@ -535,31 +528,3 @@ export class AddonCalendarCalendarComponent implements OnInit, DoCheck, OnDestro
     }
 
 }
-
-/**
- * Helper class to manage day button.
- */
-class AddonCalendarDayButton extends CoreAriaRoleButton<AddonCalendarCalendarComponent> {
-
-    /**
-     * @inheritdoc
-     */
-    click(event: Event, day: number): void {
-        this.componentInstance.dayClicked(day);
-    }
-
-}
-
-/**
- * Helper class to manage event button.
- */
-class AddonCalendarEventButton extends CoreAriaRoleButton<AddonCalendarCalendarComponent> {
-
-    /**
-     * @inheritdoc
-     */
-    click(event: Event, calendarEvent: AddonCalendarEventToDisplay): void {
-        this.componentInstance.eventClicked(calendarEvent, event);
-    }
-
-}
diff --git a/src/core/classes/aria-role-button.ts b/src/core/classes/aria-role-button.ts
deleted file mode 100644
index 28a019a14..000000000
--- a/src/core/classes/aria-role-button.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-// (C) Copyright 2015 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.
-
-export abstract class CoreAriaRoleButton<T = unknown> {
-
-    componentInstance: T;
-
-    constructor(componentInstance: T) {
-        this.componentInstance = componentInstance;
-    }
-
-    /**
-     * A11y key functionality that prevents keyDown events.
-     *
-     * @param event Event.
-     */
-    keyDown(event: KeyboardEvent): void {
-        if ((event.key == ' ' || event.key == 'Enter') && this.isAllowed()) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    /**
-     * A11y key functionality that translates space and enter keys to click action.
-     *
-     * @param event Event.
-     * @param args Additional args.
-     */
-    keyUp(event: KeyboardEvent, ...args: unknown[]): void {
-        if ((event.key == ' ' || event.key == 'Enter') && this.isAllowed()) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.click(event, ...args);
-        }
-    }
-
-    /**
-     * A11y click functionality.
-     *
-     * @param event Event.
-     * @param args Additional args.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    click(event?: Event, ...args: unknown[]): void {
-        // Nothing defined here.
-    }
-
-    /**
-     * Checks if action is allowed in class.
-     *
-     * @returns If allowed.
-     */
-    isAllowed(): boolean {
-        return true;
-    }
-
-}
diff --git a/src/core/components/user-avatar/core-user-avatar.html b/src/core/components/user-avatar/core-user-avatar.html
index 4b8d7819d..474334be0 100644
--- a/src/core/components/user-avatar/core-user-avatar.html
+++ b/src/core/components/user-avatar/core-user-avatar.html
@@ -4,18 +4,15 @@
     [alt]="'core.pictureof' | translate:{$a: fullname}"
     core-external-content
     onError="this.src='assets/img/user-avatar.png'"
-    (click)="gotoProfile($event)"
+    (ariaButtonClick)="gotoProfile($event)"
     [attr.aria-hidden]="!linkProfile"
     [attr.role]="linkProfile ? 'button' : null"
-    (keydown)="buttonAction.keyDown($event)"
-    (keyup)="buttonAction.keyUp($event)"
     [attr.tabindex]="linkProfile ? 0 : null"
     [class.clickable]="linkProfile"
 >
 
 <img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
-    (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile" [attr.role]="linkProfile ? 'button' : null"
-    (keydown)="buttonAction.keyDown($event)" (keyup)="buttonAction.keyUp($event)"
+    (ariaButtonClick)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile" [attr.role]="linkProfile ? 'button' : null"
     [attr.tabindex]="linkProfile ? 0 : null">
 
 <span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
diff --git a/src/core/components/user-avatar/user-avatar.ts b/src/core/components/user-avatar/user-avatar.ts
index 6097a0371..28815d4b4 100644
--- a/src/core/components/user-avatar/user-avatar.ts
+++ b/src/core/components/user-avatar/user-avatar.ts
@@ -20,7 +20,6 @@ import { CoreUtils } from '@services/utils/utils';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreUserProvider, CoreUserBasicData } from '@features/user/services/user';
 import { CoreNavigator } from '@services/navigator';
-import { CoreAriaRoleButton } from '@classes/aria-role-button';
 
 /**
  * Component to display a "user avatar".
@@ -39,15 +38,13 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     @Input() profileUrl?: string;
     @Input() linkProfile = true; // Avoid linking to the profile if wanted.
     @Input() fullname?: string;
-    @Input() userId?: number; // If provided or found it will be used to link the image to the profile.
-    @Input() courseId?: number;
+    @Input() protected userId?: number; // If provided or found it will be used to link the image to the profile.
+    @Input() protected courseId?: number;
     @Input() checkOnline = false; // If want to check and show online status.
     @Input() extraIcon?: string; // Extra icon to show near the avatar.
 
     avatarUrl?: string;
 
-    buttonAction: CoreUserAvatarButton;
-
     // Variable to check if we consider this user online or not.
     // @TODO: Use setting when available (see MDL-63972) so we can use site setting.
     protected timetoshowusers = 300000; // Miliseconds default.
@@ -55,7 +52,6 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     protected pictureObserver: CoreEventObserver;
 
     constructor() {
-
         this.currentUserId = CoreSites.getCurrentSiteUserId();
 
         this.pictureObserver = CoreEvents.on(
@@ -67,15 +63,12 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
             },
             CoreSites.getCurrentSiteId(),
         );
-
-        this.buttonAction = new CoreUserAvatarButton(this);
     }
 
     /**
      * Component being initialized.
      */
     ngOnInit(): void {
-
         this.setFields();
     }
 
@@ -137,14 +130,19 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
      * @param event Click event.
      */
     gotoProfile(event: Event): void {
-        if (!this.buttonAction.isAllowed()) {
+        if (!this.linkProfile || !this.userId) {
             return;
         }
 
         event.preventDefault();
         event.stopPropagation();
 
-        this.buttonAction.click();
+        CoreNavigator.navigateToSitePath('user', {
+            params: {
+                userId: this.userId,
+                courseId: this.courseId,
+            },
+        });
     }
 
     /**
@@ -156,32 +154,6 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
 
 }
 
-/**
- * Helper class to manage rol button.
- */
-class CoreUserAvatarButton extends CoreAriaRoleButton<CoreUserAvatarComponent> {
-
-    /**
-     * @inheritdoc
-     */
-    click(): void {
-        CoreNavigator.navigateToSitePath('user', {
-            params: {
-                userId: this.componentInstance.userId,
-                courseId: this.componentInstance.courseId,
-            },
-        });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    isAllowed(): boolean {
-        return this.componentInstance.linkProfile && !!this.componentInstance.userId;
-    }
-
-}
-
 /**
  * Type with all possible formats of user.
  */
diff --git a/src/core/directives/aria-button.ts b/src/core/directives/aria-button.ts
new file mode 100644
index 000000000..092c53737
--- /dev/null
+++ b/src/core/directives/aria-button.ts
@@ -0,0 +1,57 @@
+// (C) Copyright 2015 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.
+
+import { Directive, ElementRef, OnInit, Output, EventEmitter } from '@angular/core';
+
+/**
+ * Directive to emulate click and key actions following aria role button.
+ */
+@Directive({
+    selector: '[ariaButtonClick]',
+})
+export class CoreAriaButtonClickDirective implements OnInit {
+
+    protected element: HTMLElement;
+
+    @Output() ariaButtonClick = new EventEmitter();
+
+    constructor(
+        element: ElementRef,
+    ) {
+        this.element = element.nativeElement;
+    }
+
+    /**
+     * Initialize actions.
+     */
+    ngOnInit(): void {
+        this.element.addEventListener('click', async (event) => {
+            this.ariaButtonClick.emit(event);
+        });
+
+        this.element.addEventListener('keydown', async (event) => {
+            if ((event.key == ' ' || event.key == 'Enter')) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        });
+
+        this.element.addEventListener('keyup', async (event) => {
+            if ((event.key == ' ' || event.key == 'Enter')) {
+                this.ariaButtonClick.emit(event);
+            }
+        });
+    }
+
+}
diff --git a/src/core/directives/directives.module.ts b/src/core/directives/directives.module.ts
index 3cf6d3303..b83ee4534 100644
--- a/src/core/directives/directives.module.ts
+++ b/src/core/directives/directives.module.ts
@@ -24,6 +24,7 @@ import { CoreLinkDirective } from './link';
 import { CoreLongPressDirective } from './long-press';
 import { CoreSupressEventsDirective } from './supress-events';
 import { CoreUserLinkDirective } from './user-link';
+import { CoreAriaButtonClickDirective } from './aria-button';
 
 @NgModule({
     declarations: [
@@ -37,6 +38,7 @@ import { CoreUserLinkDirective } from './user-link';
         CoreLongPressDirective,
         CoreSupressEventsDirective,
         CoreUserLinkDirective,
+        CoreAriaButtonClickDirective,
     ],
     exports: [
         CoreAutoFocusDirective,
@@ -49,6 +51,7 @@ import { CoreUserLinkDirective } from './user-link';
         CoreLongPressDirective,
         CoreSupressEventsDirective,
         CoreUserLinkDirective,
+        CoreAriaButtonClickDirective,
     ],
 })
 export class CoreDirectivesModule {}