diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 8852c7a00..a204b78f6 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -6,7 +6,7 @@
         <!-- Download all courses. -->
         <div *ngIf="downloadCoursesEnabled && filteredCourses.length > 0" class="core-button-spinner">
             <ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
-                [attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
+                [ariaLabel]="prefetchCoursesData.statusTranslatable | translate">
                 <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge" role="progressbar"
@@ -85,11 +85,11 @@
         </ion-col>
         <ion-col size="auto" *ngIf="isLayoutSwitcherAvailable">
             <ion-button *ngIf="layout === 'card'" fill="outline" (click)="toggleLayout('list')"
-                [attr.aria-label]="'addon.block_myoverview.aria:list' | translate">
+                [ariaLabel]="'addon.block_myoverview.aria:list' | translate">
                 <ion-icon slot="icon-only" name="fas-list" aria-hidden="true" />
             </ion-button>
             <ion-button *ngIf="layout === 'list'" fill="outline" (click)="toggleLayout('card')"
-                [attr.aria-label]="'addon.block_myoverview.aria:card' | translate">
+                [ariaLabel]="'addon.block_myoverview.aria:card' | translate">
                 <ion-icon slot="icon-only" name="fas-table-cells-large" aria-hidden="true" />
             </ion-button>
         </ion-col>
diff --git a/src/addons/blog/pages/edit-entry/edit-entry.html b/src/addons/blog/pages/edit-entry/edit-entry.html
index 92be35280..6fbed99ba 100644
--- a/src/addons/blog/pages/edit-entry/edit-entry.html
+++ b/src/addons/blog/pages/edit-entry/edit-entry.html
@@ -73,7 +73,7 @@
             </div>
             }
 
-            <ion-button class="ion-margin" expand="block" [attr.aria-label]="'core.save' | translate"
+            <ion-button class="ion-margin" expand="block" [ariaLabel]="'core.save' | translate"
                 [disabled]="form.invalid || (entry && !hasDataChangedForEdit)" (click)="save()">
                 {{ 'core.save' | translate }}
             </ion-button>
diff --git a/src/addons/blog/pages/index/index.html b/src/addons/blog/pages/index/index.html
index aa91a5df5..91d072d7f 100644
--- a/src/addons/blog/pages/index/index.html
+++ b/src/addons/blog/pages/index/index.html
@@ -41,8 +41,8 @@
                 </h3>
 
                 @if (entry.userid === currentUserId && optionsAvailable) {
-                <ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
-                    (click)="showEntryActionsPopover($event, entry)" class="entry-options">
+                <ion-button fill="clear" [ariaLabel]="'core.displayoptions' | translate" (click)="showEntryActionsPopover($event, entry)"
+                    class="entry-options">
                     <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
                 </ion-button>
                 }
diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
index 83438a0e6..5ab1fa14b 100644
--- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html
@@ -12,7 +12,7 @@
         <ion-grid class="ion-no-padding addon-calendar-navigation">
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-start" *ngIf="canNavigate">
-                    <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.monthprev' | translate">
+                    <ion-button fill="clear" (click)="loadPrevious()" [ariaLabel]="'addon.calendar.monthprev' | translate">
                         <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
@@ -23,7 +23,7 @@
                     </h2>
                 </ion-col>
                 <ion-col class="ion-text-end" *ngIf="canNavigate">
-                    <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.monthnext' | translate">
+                    <ion-button fill="clear" (click)="loadNext()" [ariaLabel]="'addon.calendar.monthnext' | translate">
                         <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-col>
diff --git a/src/addons/calendar/components/filter/filter.html b/src/addons/calendar/components/filter/filter.html
index a5732aebd..e2d2d97f6 100644
--- a/src/addons/calendar/components/filter/filter.html
+++ b/src/addons/calendar/components/filter/filter.html
@@ -1,7 +1,7 @@
 <ion-header class="no-title">
     <ion-toolbar>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/calendar/components/upcoming-events/upcoming-events.scss b/src/addons/calendar/components/upcoming-events/upcoming-events.scss
deleted file mode 100644
index 0113d9512..000000000
--- a/src/addons/calendar/components/upcoming-events/upcoming-events.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-    .addon-calendar-event {
-        cursor: pointer;
-    }
-}
diff --git a/src/addons/calendar/components/upcoming-events/upcoming-events.ts b/src/addons/calendar/components/upcoming-events/upcoming-events.ts
index 909169ad8..862712285 100644
--- a/src/addons/calendar/components/upcoming-events/upcoming-events.ts
+++ b/src/addons/calendar/components/upcoming-events/upcoming-events.ts
@@ -36,7 +36,7 @@ import { Translate } from '@singletons';
 @Component({
     selector: 'addon-calendar-upcoming-events',
     templateUrl: 'addon-calendar-upcoming-events.html',
-    styleUrls: ['../../calendar-common.scss', 'upcoming-events.scss'],
+    styleUrls: ['../../calendar-common.scss'],
 })
 export class AddonCalendarUpcomingEventsComponent implements OnInit, DoCheck, OnDestroy {
 
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index a8d4c9634..aa5123fa6 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -7,7 +7,7 @@
             <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [ariaLabel]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true" />
             </ion-button>
             <core-context-menu>
@@ -31,7 +31,7 @@
             <ion-grid class="ion-no-padding safe-area-padding">
                 <ion-row class="ion-align-items-center">
                     <ion-col class="ion-text-start">
-                        <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
+                        <ion-button fill="clear" (click)="loadPrevious()" [ariaLabel]="'addon.calendar.dayprev' | translate">
                             <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
@@ -39,7 +39,7 @@
                         <h2>{{ periodName }}</h2>
                     </ion-col>
                     <ion-col class="ion-text-end">
-                        <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
+                        <ion-button fill="clear" (click)="loadNext()" [ariaLabel]="'addon.calendar.daynext' | translate">
                             <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-col>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index a26e827e9..b16a3baa0 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -117,8 +117,7 @@
                     <ion-label>
                         <p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
                     </ion-label>
-                    <ion-button fill="clear" (click)="addReminder()" slot="end"
-                        [attr.aria-label]="'addon.calendar.setnewreminder' | translate">
+                    <ion-button fill="clear" (click)="addReminder()" slot="end" [ariaLabel]="'addon.calendar.setnewreminder' | translate">
                         <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item-divider>
@@ -126,7 +125,7 @@
                     <ion-label>
                         <p>{{ reminder.label }}</p>
                     </ion-label>
-                    <ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate" slot="end">
+                    <ion-button fill="clear" (click)="removeReminder(reminder)" [ariaLabel]="'core.delete' | translate" slot="end">
                         <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index 92128273f..6f21e79ef 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -149,7 +149,7 @@
                         <p class="item-heading">{{ reminder.label }}</p>
                         <p *ngIf="reminder.sublabel">{{ reminder.sublabel }}</p>
                     </ion-label>
-                    <ion-button fill="clear" (click)="deleteReminder(reminder.id, $event)" [attr.aria-label]="'core.delete' | translate"
+                    <ion-button fill="clear" (click)="deleteReminder(reminder.id, $event)" [ariaLabel]="'core.delete' | translate"
                         slot="end">
                         <ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true" />
                     </ion-button>
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index f07174d3f..a1ab5d73c 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -8,7 +8,7 @@
             <p *ngIf="!showCalendar" class="subheading">{{ 'addon.calendar.upcomingevents' | translate }}</p>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [ariaLabel]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true" />
             </ion-button>
             <core-context-menu>
diff --git a/src/addons/messages/components/conversation-info/conversation-info.html b/src/addons/messages/components/conversation-info/conversation-info.html
index f18c17a89..0af889977 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.messages.groupinfo' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index 613d674f0..c26c66b0f 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -7,7 +7,7 @@
             <h1>{{ 'addon.messages.contacts' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
+            <ion-button fill="clear" (click)="gotoSearch()" [ariaLabel]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index db43ceb5c..49c292256 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -7,10 +7,10 @@
             <h1>{{ 'addon.messages.messages' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
+            <ion-button fill="clear" (click)="gotoSearch()" [ariaLabel]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
             </ion-button>
-            <ion-button (click)="gotoSettings()" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
+            <ion-button (click)="gotoSettings()" [ariaLabel]="'addon.messages.messagepreferences' | translate">
                 <ion-icon name="fas-gear" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
diff --git a/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png b/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png
index 961648d44..e85b3bcfc 100644
Binary files a/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png and b/src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png differ
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
index 174c766bd..178152f64 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ plugin.name }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index cef082331..e037cb09b 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 0cf93f8f1..0ee574a3f 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -267,7 +267,7 @@
                             </p>
                         </ion-label>
                         <ion-button slot="end" *ngIf="feedback!.advancedgrade" (click)="showAdvancedGrade()"
-                            [attr.aria-label]="'core.showadvanced' |translate">
+                            [ariaLabel]="'core.showadvanced' |translate">
                             <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
                         </ion-button>
                     </ion-item>
diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
index 6ad516896..5be4c93df 100644
--- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
+++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
@@ -9,7 +9,7 @@
     </ion-label>
     <div slot="end">
         <div class="ion-text-end">
-            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" [attr.aria-label]="'core.edit' | translate">
+            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" [ariaLabel]="'core.edit' | translate">
                 <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </div>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index eb5ae623d..59ee6ec3d 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/book/components/index/addon-mod-book-index.html b/src/addons/mod/book/components/index/addon-mod-book-index.html
index 6f60eaf28..8918c7daa 100644
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 1cf3aeba0..12f84e5db 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_book.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/book/pages/contents/contents.html b/src/addons/mod/book/pages/contents/contents.html
index b1169bfeb..d540f7b94 100644
--- a/src/addons/mod/book/pages/contents/contents.html
+++ b/src/addons/mod/book/pages/contents/contents.html
@@ -9,7 +9,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="showToc()" [attr.aria-label]="'addon.mod_book.toc' | translate" aria-haspopup="true" *ngIf="loaded">
+            <ion-button (click)="showToc()" [ariaLabel]="'addon.mod_book.toc' | translate" aria-haspopup="true" *ngIf="loaded">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/chat/components/index/addon-mod-chat-index.html b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
index 74b7c4e80..9ac6a6b51 100644
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/chat/components/users-modal/users-modal.html b/src/addons/mod/chat/components/users-modal/users-modal.html
index dd98dc8f9..98cfc8b70 100644
--- a/src/addons/mod/chat/components/users-modal/users-modal.html
+++ b/src/addons/mod/chat/components/users-modal/users-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_chat.currentusers' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/chat/pages/chat/chat.html b/src/addons/mod/chat/pages/chat/chat.html
index fd15a114c..065c7324b 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -9,7 +9,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
+            <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [ariaLabel]="'core.users' | translate">
                 <ion-icon name="fas-users" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index fd8aa8e1d..b8ce3f97e 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/data/components/action/addon-mod-data-action.html b/src/addons/mod/data/components/action/addon-mod-data-action.html
index 26315c8b0..af8482d39 100644
--- a/src/addons/mod/data/components/action/addon-mod-data-action.html
+++ b/src/addons/mod/data/components/action/addon-mod-data-action.html
@@ -1,34 +1,33 @@
 <ion-button size="small" *ngIf="action === 'actionsmenu'" fill="clear" (click)="actionsMenu($event)"
-    [attr.aria-label]="'addon.mod_data.actionsmenu' | translate">
+    [ariaLabel]="'addon.mod_data.actionsmenu' | translate">
     <ion-icon name="fas-ellipsis-vertical" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
-<ion-button size="small" *ngIf="action === 'more'" fill="clear" (click)="viewEntry()"
-    [attr.aria-label]="'addon.mod_data.showmore' | translate">
+<ion-button size="small" *ngIf="action === 'more'" fill="clear" (click)="viewEntry()" [ariaLabel]="'addon.mod_data.showmore' | translate">
     <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
-<ion-button size="small" *ngIf="action === 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
+<ion-button size="small" *ngIf="action === 'edit'" fill="clear" (click)="editEntry()" [ariaLabel]="'core.edit' | translate">
     <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'delete' && !entry.deleted" fill="clear" color="danger" (click)="deleteEntry()"
-    [attr.aria-label]="'core.delete' | translate">
+    [ariaLabel]="'core.delete' | translate">
     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'delete' && entry.deleted" fill="clear" color="danger" (click)="undoDelete()"
-    [attr.aria-label]="'core.restore' | translate">
+    [ariaLabel]="'core.restore' | translate">
     <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'approve'" fill="clear" (click)="approveEntry()"
-    [attr.aria-label]="'addon.mod_data.approve' | translate">
+    [ariaLabel]="'addon.mod_data.approve' | translate">
     <ion-icon name="fas-thumbs-up" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
 <ion-button size="small" *ngIf="action === 'disapprove'" fill="clear" (click)="disapproveEntry()"
-    [attr.aria-label]="'addon.mod_data.disapprove' | translate">
+    [ariaLabel]="'addon.mod_data.disapprove' | translate">
     <ion-icon name="far-thumbs-down" slot="icon-only" aria-hidden="true" />
 </ion-button>
 
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index 269610acf..ac4cf7ce9 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button *ngIf="canSearch" (click)="showSearch()" [attr.aria-label]="'addon.mod_data.search' | translate">
+    <ion-button *ngIf="canSearch" (click)="showSearch()" [ariaLabel]="'addon.mod_data.search' | translate">
         <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <core-context-menu>
@@ -10,7 +10,7 @@
             (action)="gotoEntry(firstEntry)" />
     </core-context-menu>
 
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index 94ce975de..8b7a5c7e1 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_data.search' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -19,7 +19,7 @@
     <form (ngSubmit)="searchEntries($event)" [formGroup]="searchForm" #searchFormEl>
         <ion-list class="ion-no-margin">
             <ion-item [hidden]="search.searchingAdvanced">
-                <ion-input type="text" [attr.aria-label]="'addon.mod_data.search' | translate"
+                <ion-input type="text" [ariaLabel]="'addon.mod_data.search' | translate"
                     placeholder="{{ 'addon.mod_data.search' | translate}}" name="text" formControlName="text" />
             </ion-item>
             <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index d536d0ee9..0c2b27f8e 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -48,15 +48,14 @@
     <div collapsible-footer *ngIf="entryLoaded && hasPrevious || hasNext" slot="fixed" appearOnBottom>
         <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
             <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
-                <ion-button [disabled]="!hasPrevious" fill="clear" [attr.aria-label]="'core.previous' | translate"
+                <ion-button [disabled]="!hasPrevious" fill="clear" [ariaLabel]="'core.previous' | translate"
                     (click)="gotoEntry(offset! -1)">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-col>
             <ion-col class="ion-text-center" />
             <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
-                <ion-button [disabled]="!hasNext" fill="clear" [attr.aria-label]=" 'core.next' | translate"
-                    (click)="gotoEntry(offset! + 1)">
+                <ion-button [disabled]="!hasNext" fill="clear" [ariaLabel]=" 'core.next' | translate" (click)="gotoEntry(offset! + 1)">
                     <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-col>
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index dbeae8223..cef4e75c3 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/folder/components/index/addon-mod-folder-index.html b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
index 43ab829b3..705542928 100644
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index ed1795069..ee39d41a5 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -1,9 +1,9 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" *ngIf="showSearch" (click)="openSearch()" [attr.aria-label]="'core.search' | translate">
+    <ion-button fill="clear" *ngIf="showSearch" (click)="openSearch()" [ariaLabel]="'core.search' | translate">
         <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
@@ -135,7 +135,7 @@
                     </ion-row>
                 </ion-label>
                 <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
-                    [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)" slot="end">
+                    [ariaLabel]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)" slot="end">
                     <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ion-item>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index d20baf0a8..1a35dd9eb 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -16,7 +16,7 @@
                             [attr.aria-label]="'addon.mod_forum.unread' | translate">
                             <ion-icon name="fas-circle" color="primary" aria-hidden="true" />
                         </ion-note>
-                        <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
+                        <ion-button *ngIf="optionsMenuEnabled" fill="clear" [ariaLabel]="('core.displayoptions' | translate)"
                             (click)="showOptionsMenu($event)">
                             <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                         </ion-button>
@@ -45,7 +45,7 @@
                                 [attr.aria-label]="'addon.mod_forum.unread' | translate">
                                 <ion-icon name="fas-circle" color="primary" aria-hidden="true" />
                             </ion-note>
-                            <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
+                            <ion-button *ngIf="optionsMenuEnabled" fill="clear" [ariaLabel]="('core.displayoptions' | translate)"
                                 (click)="showOptionsMenu($event)">
                                 <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                             </ion-button>
diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png
index cfab8bca1..0aabac3e0 100644
Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png differ
diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
index 10ff6ad2e..f75438025 100644
--- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -1,16 +1,15 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <ion-button *ngIf="!showLoading && glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
-        [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
+        [ariaLabel]="'addon.mod_glossary.browsemode' | translate">
         <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
-    <ion-button *ngIf="!showLoading && glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
+    <ion-button *ngIf="!showLoading && glossary" (click)="toggleSearch()" [ariaLabel]="'addon.mod_glossary.bysearch' | translate">
         <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
-    <ion-button *ngIf="!showLoading" fill="clear" (click)="openModuleSummary()" aria-haspopup="true"
-        [attr.aria-label]="'core.info' | translate">
+    <ion-button *ngIf="!showLoading" fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/glossary/pages/entry/entry.html b/src/addons/mod/glossary/pages/entry/entry.html
index 072c8dd3f..02d6f6278 100644
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@@ -67,11 +67,10 @@
             <ion-item *ngIf="canDelete || canEdit">
                 <div slot="end">
                     <ion-button *ngIf="canDelete" fill="clear" color="danger" (click)="deleteEntry()"
-                        [attr.aria-label]="'addon.mod_glossary.deleteentry' | translate">
+                        [ariaLabel]="'addon.mod_glossary.deleteentry' | translate">
                         <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
                     </ion-button>
-                    <ion-button *ngIf="canEdit" fill="clear" (click)="editEntry()"
-                        [attr.aria-label]="'addon.mod_glossary.editentry' | translate">
+                    <ion-button *ngIf="canEdit" fill="clear" (click)="editEntry()" [ariaLabel]="'addon.mod_glossary.editentry' | translate">
                         <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
                     </ion-button>
                 </div>
diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index 290364527..a7bd968e5 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -8,7 +8,7 @@
             (action)="viewAllAttempts()" iconAction="fas-chart-bar" />
     </core-context-menu>
 
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index 519c2f619..411d6f487 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index 86cdc185f..9d0e6c7a5 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_imscp.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/imscp/pages/view/view.html b/src/addons/mod/imscp/pages/view/view.html
index f272a3b8f..611732ec9 100644
--- a/src/addons/mod/imscp/pages/view/view.html
+++ b/src/addons/mod/imscp/pages/view/view.html
@@ -10,7 +10,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button *ngIf="loaded" (click)="showToc()" aria-haspopup="true" [attr.aria-label]="'addon.mod_imscp.toc' | translate">
+            <ion-button *ngIf="loaded" (click)="showToc()" aria-haspopup="true" [ariaLabel]="'addon.mod_imscp.toc' | translate">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index a1de43153..acdf9307a 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/lesson/components/menu-modal/menu-modal.html b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
index f0498afd9..902552399 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ pageInstance?.lesson?.name }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 0655146b7..f56047a6c 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -9,7 +9,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate"
+            <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [ariaLabel]="'addon.mod_lesson.lessonmenu' | translate"
                 (click)="showMenu()">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
@@ -72,7 +72,7 @@
                         <!-- Short answer. -->
                         <ion-item class="ion-text-wrap" *ngSwitchCase="'shortanswer'">
                             <ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
-                                [attr.aria-label]="'addon.mod_lesson.youranswer' | translate" [id]="question.input!.id"
+                                [ariaLabel]="'addon.mod_lesson.youranswer' | translate" [id]="question.input!.id"
                                 [formControlName]="question.input!.name" autocorrect="off" [maxlength]="question.input!.maxlength" />
                         </ion-item>
 
diff --git a/src/addons/mod/lti/components/index/addon-mod-lti-index.html b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
index fbfb8a94a..6afba2a86 100644
--- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/page/components/index/addon-mod-page-index.html b/src/addons/mod/page/components/index/addon-mod-page-index.html
index dddc42495..2f82a39e6 100644
--- a/src/addons/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addons/mod/page/components/index/addon-mod-page-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index a9a4e628c..6af2017bd 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/quiz/components/index/index.scss b/src/addons/mod/quiz/components/index/index.scss
index b10c69da8..1bfbfd491 100644
--- a/src/addons/mod/quiz/components/index/index.scss
+++ b/src/addons/mod/quiz/components/index/index.scss
@@ -36,6 +36,9 @@
             min-height: 60px;
             padding-top: var(--mdl-spacing-2);
             padding-bottom: var(--mdl-spacing-2);
+            @include margin-horizontal(var(--mdl-spacing-2), null);
+
+            font: var(--mdl-typography-body-font-md);
 
             p {
                 margin: 0px;
@@ -44,13 +47,15 @@
         }
 
         ion-accordion-group {
-            border-top: 1px solid var(--stroke);
-
             .accordion-expanded	.addon-mod_quiz-attempt-title-info,
             .accordion-expanding .addon-mod_quiz-attempt-title-info {
                 visibility: hidden;
             }
 
+            h3 {
+                font: var(--mdl-typography-subtitle-font-md);
+            }
+
             hr {
                 background-color: var(--stroke);
                 height: 1px;
@@ -58,19 +63,11 @@
             }
 
             ion-accordion:nth-child(odd) {
-                background-color: var(--core-table-odd-cell-background);
-
-                ::ng-deep ion-item {
-                    --background: var(--core-table-odd-cell-background);
-                }
+                --ion-item-background: var(--core-table-odd-cell-background);
             }
 
             ion-accordion:nth-child(even) {
-                background-color: var(--core-table-even-cell-background);
-
-                ::ng-deep ion-item {
-                    --background: var(--core-table-even-cell-background);
-                }
+                --ion-item-background: var(--core-table-even-cell-background);
             }
         }
     }
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
index 919ed509e..c960cadd3 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
index 30de24c1d..dfd0f6b3d 100644
--- a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
+++ b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ title | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index 1d06bd917..35002d7c1 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -12,11 +12,10 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
-                (click)="showConnectionError($event)" [attr.aria-label]="'addon.mod_quiz.connectionerror' | translate"
-                aria-haspopup="dialog">
+                (click)="showConnectionError($event)" [ariaLabel]="'addon.mod_quiz.connectionerror' | translate" aria-haspopup="dialog">
                 <ion-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true" />
             </ion-button>
-            <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate" (click)="openNavigation()">
+            <ion-button *ngIf="navigation.length" [ariaLabel]="'addon.mod_quiz.opentoc' | translate" (click)="openNavigation()">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index 37390dc62..65a6d4904 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -8,8 +8,8 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
-                (click)="openNavigation()" aria-haspopup="true">
+            <ion-button fill="clear" *ngIf="navigation.length" [ariaLabel]="'addon.mod_quiz.opentoc' | translate" (click)="openNavigation()"
+                aria-haspopup="true">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -44,7 +44,7 @@
         <div collapsible-footer appearOnBottom *ngIf="loaded && numPages > 1" slot="fixed">
             <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
                 <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
-                    <ion-button [disabled]="previousPage < 0" fill="clear" [attr.aria-label]="'core.previous' | translate"
+                    <ion-button [disabled]="previousPage < 0" fill="clear" [ariaLabel]="'core.previous' | translate"
                         (click)="changePage(previousPage)">
                         <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
@@ -57,7 +57,7 @@
                     </ion-button>
                 </ion-col>
                 <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
-                    <ion-button [disabled]="nextPage >= numPages" fill="clear" [attr.aria-label]="'core.next' | translate"
+                    <ion-button [disabled]="nextPage >= numPages" fill="clear" [ariaLabel]="'core.next' | translate"
                         (click)="changePage(nextPage)">
                         <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
                     </ion-button>
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index a2cccf4a1..0a0419d87 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 36b05044b..ca8b6b3ba 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index cf823ac0b..760ec10ae 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_scorm.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/scorm/pages/player/player.html b/src/addons/mod/scorm/pages/player/player.html
index 4b426014f..ba56e50d7 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -10,7 +10,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <core-button-with-spinner *ngIf="showToc" [loading]="loadingToc">
-                <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()" [attr.aria-label]="'addon.mod_scorm.toc' | translate"
+                <ion-button fill="clear" *ngIf="toc.length" (click)="openToc()" [ariaLabel]="'addon.mod_scorm.toc' | translate"
                     aria-haspopup="true">
                     <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true" />
                 </ion-button>
diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index a87a03127..e5abcb1e9 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index e5b74e85c..70252ad61 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
index eeff12dbc..c5d6010f8 100644
--- a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -1,13 +1,13 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
     <!-- Select subwiki. -->
-    <ion-button *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)" [attr.aria-label]="'addon.mod_wiki.subwiki' | translate"
+    <ion-button *ngIf="subwikiData.count > 1" (click)="showSubwikiPicker($event)" [ariaLabel]="'addon.mod_wiki.subwiki' | translate"
         aria-haspopup="true">
         <ion-icon *ngIf="!groupWiki" name="fas-user" aria-hidden="true" />
         <ion-icon *ngIf="groupWiki" name="fas-users" aria-hidden="true" />
     </ion-button>
 
-    <ion-button *ngIf="!showLoading && currentPageObj" (click)="openMap()" [attr.aria-label]="'addon.mod_wiki.map' | translate"
+    <ion-button *ngIf="!showLoading && currentPageObj" (click)="openMap()" [ariaLabel]="'addon.mod_wiki.map' | translate"
         aria-haspopup="true">
         <ion-icon name="fas-map" aria-hidden="true" />
     </ion-button>
@@ -19,7 +19,7 @@
             (action)="goToNewPage()" />
     </core-context-menu>
 
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index ecd32a8ee..813186174 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_wiki.map' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/wiki/pages/edit/edit.html b/src/addons/mod/wiki/pages/edit/edit.html
index 743e3e1a1..2687fdc96 100644
--- a/src/addons/mod/wiki/pages/edit/edit.html
+++ b/src/addons/mod/wiki/pages/edit/edit.html
@@ -20,7 +20,7 @@
     <core-loading [hideUntil]="loaded">
         <form [formGroup]="pageForm" #editPageForm *ngIf="loaded">
             <ion-item class="ion-text-wrap" *ngIf="canEditTitle">
-                <ion-input [attr.aria-label]="'addon.mod_wiki.newpagetitle' | translate" name="title" type="text"
+                <ion-input [ariaLabel]="'addon.mod_wiki.newpagetitle' | translate" name="title" type="text"
                     [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title" />
             </ion-item>
 
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index d16591ae1..43879cde8 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index ce7f3ab40..b51588d75 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.mod_workshop.userplan' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
index 5c88ef4d2..385105399 100644
--- a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
+++ b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
@@ -7,7 +7,7 @@
             <h1>{{ 'addon.mod_workshop.editsubmission' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="save()" [attr.aria-label]="'core.save' | translate">
+            <ion-button fill="clear" (click)="save()" [ariaLabel]="'core.save' | translate">
                 {{ 'core.save' | translate }}
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 2d0193a32..6c5a1afb1 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -11,7 +11,7 @@
         </ion-title>
         <ion-buttons slot="end" [hidden]="!loaded">
             <ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()"
-                [attr.aria-label]="'core.save' | translate">
+                [ariaLabel]="'core.save' | translate">
                 {{ 'core.save' | translate }}
             </ion-button>
             <ion-button *ngIf="canAddFeedback" fill="clear" (click)="saveEvaluation()">
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index e7d957543..54e44cfca 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ 'addon.notes.addnewnote' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -20,7 +20,7 @@
             </ion-select>
         </ion-item>
         <ion-item>
-            <ion-textarea [attr.aria-label]="'addon.notes.note' | translate" placeholder="{{ 'addon.notes.note' | translate }}" rows="5"
+            <ion-textarea [ariaLabel]="'addon.notes.note' | translate" placeholder="{{ 'addon.notes.note' | translate }}" rows="5"
                 [(ngModel)]="text" name="text" required="required" />
         </ion-item>
         <div class="ion-padding">
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index a96150d7f..058c56ec6 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -11,8 +11,7 @@
     </ion-toolbar>
 </ion-header>
 <core-navbar-buttons slot="end">
-    <ion-button [hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()"
-        [attr.aria-label]="'core.toggledelete' | translate">
+    <ion-button [hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()" [ariaLabel]="'core.toggledelete' | translate">
         <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <core-context-menu>
@@ -80,12 +79,12 @@
                         </span>
                     </p>
                     <ion-button *ngIf="note.deleted" slot="end" fill="clear" color="danger" (click)="undoDeleteNote($event, note)"
-                        [attr.aria-label]="'core.restore' | translate">
+                        [ariaLabel]="'core.restore' | translate">
                         <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                     <ion-button *ngIf="showDelete && !note.deleted && (type !== 'personal' || note.usermodified === currentUserId)"
                         slot="end" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger" (click)="deleteNote($event, note)"
-                        [attr.aria-label]="'core.delete' | translate">
+                        [ariaLabel]="'core.delete' | translate">
                         <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
diff --git a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
index 40af91739..1dc30c312 100644
--- a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
+++ b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
@@ -15,7 +15,7 @@
                 [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()" />
         </ion-label>
     </ion-item>
-    <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
+    <div class="fake-ion-item ion-text-wrap" [class.readonly]="question.readOnly" [hidden]="!question.loaded">
         <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
             [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()" />
     </div>
diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.scss b/src/addons/qtype/ddimageortext/component/ddimageortext.scss
index de99dcda6..e8379b116 100644
--- a/src/addons/qtype/ddimageortext/component/ddimageortext.scss
+++ b/src/addons/qtype/ddimageortext/component/ddimageortext.scss
@@ -4,12 +4,20 @@
 :host {
     --ddimageortext-border-drop: var(--medium);
     --ddimageortext-draghome-background: var(--core-dd-question-color-2);
+    --cursor: pointer;
+
+    .readonly,
+    core-format-text ::ng-deep .readonly {
+        --cursor: auto;
+    }
+
 }
 
 .addon-qtype-ddimageortext-container {
     min-height: 80px; // To display the loading.
 }
 
+
 core-format-text ::ng-deep {
 
     div.ddarea {
@@ -39,7 +47,7 @@ core-format-text ::ng-deep {
 
         div.draghome {
             border: 1px solid var(--core-dd-question-border);
-            cursor: pointer;
+            cursor: var(--cursor);
             background-color: var(--ddimageortext-draghome-background);
             display: inline-block;
             height: auto;
@@ -78,23 +86,17 @@ core-format-text ::ng-deep {
 
         .drag {
             border: 1px solid var(--core-dd-question-border);
-            cursor: pointer;
+            cursor: var(--cursor);
             z-index: 2;
         }
         .drag.placed {
             border: 1px solid var(--ddimageortext-border-drop);
         }
-        .dragitems.readonly .drag {
-            cursor: auto;
-        }
-        .dragitems>div {
+        .dragitems > div {
             clear: both;
         }
         .dragitems {
-            cursor: pointer;
-        }
-        .dragitems.readonly {
-            cursor: auto;
+            cursor: var(--cursor);
         }
         .drag img {
             display: block;
@@ -106,10 +108,7 @@ core-format-text ::ng-deep {
             border: 1px solid var(--ddimageortext-border-drop);
             position: absolute;
             z-index: 1;
-            cursor: pointer;
-        }
-        .readonly .dropzone {
-            cursor: auto;
+            cursor: var(--cursor);
         }
 
         div.dragitems div.draghome, div.dragitems div.drag {
diff --git a/src/addons/qtype/ddmarker/component/ddmarker.scss b/src/addons/qtype/ddmarker/component/ddmarker.scss
index 980cb3b54..992622012 100644
--- a/src/addons/qtype/ddmarker/component/ddmarker.scss
+++ b/src/addons/qtype/ddmarker/component/ddmarker.scss
@@ -1,4 +1,13 @@
 // Style ddmarker content a bit. Almost all these styles are copied from Moodle.
+:host {
+    --cursor: pointer;
+
+    .readonly,
+    core-format-text ::ng-deep .readonly {
+        --cursor: auto;
+    }
+}
+
 .addon-qtype-ddmarker-container {
     min-height: 80px; // To display the loading.
 }
@@ -33,18 +42,11 @@ core-format-text ::ng-deep {
 
     .dragitems, // Previous to 3.9.
     .draghomes {
-        &.readonly {
-            .dragitem,
-            .marker {
-                cursor: auto;
-            }
-        }
-
         .dragitem, // Previous to 3.9.
         .draghome,
         .marker {
             vertical-align: top;
-            cursor: pointer;
+            cursor: var(--cursor);
             position: relative;
             margin: 10px;
             display: inline-block;
@@ -70,7 +72,7 @@ core-format-text ::ng-deep {
     .droparea {
         .dragitem,
         .marker {
-            cursor: pointer;
+            cursor: var(--cursor);
             position: absolute;
             vertical-align: top;
             z-index: 2;
diff --git a/src/addons/qtype/ddwtos/component/ddwtos.scss b/src/addons/qtype/ddwtos/component/ddwtos.scss
index 557fc3f76..a20501041 100644
--- a/src/addons/qtype/ddwtos/component/ddwtos.scss
+++ b/src/addons/qtype/ddwtos/component/ddwtos.scss
@@ -1,6 +1,16 @@
 @use "theme/globals" as *;
 
 // Style ddwtos content a bit. Almost all these styles are copied from Moodle.
+
+:host {
+    --cursor: pointer;
+
+    .readonly,
+    core-format-text ::ng-deep .readonly {
+        --cursor: default;
+    }
+}
+
 .addon-qtype-ddwtos-container {
     min-height: 80px; // To display the loading.
     position: relative;
@@ -27,7 +37,7 @@ core-format-text ::ng-deep, .drags ::ng-deep {
         border: 1px solid var(--core-dd-question-border);
         margin-bottom: 2px;
         border-radius: 5px;
-        cursor: pointer;
+        cursor: var(--cursor);
     }
     .draghome, .drag {
         display: inline-block;
@@ -48,7 +58,7 @@ core-format-text ::ng-deep, .drags ::ng-deep {
         z-index: 2;
         border-radius: 5px;
         line-height: 25px;
-        cursor: pointer;
+        cursor: var(--cursor);
     }
     .drag.selected,
     .drop.selected {
@@ -60,17 +70,10 @@ core-format-text ::ng-deep, .drags ::ng-deep {
     &.notreadonly .draghome,
     &.notreadonly .drop,
     &.notreadonly .answercontainer {
-        cursor: pointer;
+        cursor: var(--cursor);
         border-radius: 5px;
     }
 
-    &.readonly .drag,
-    &.readonly .draghome,
-    &.readonly .drop,
-    &.readonly .answercontainer {
-        cursor: default;
-    }
-
     span.incorrect {
         background-color: var(--core-question-incorrect-color-bg);
     }
diff --git a/src/addons/qtype/essay/component/addon-qtype-essay.html b/src/addons/qtype/essay/component/addon-qtype-essay.html
index b3c8b906f..aa3816480 100644
--- a/src/addons/qtype/essay/component/addon-qtype-essay.html
+++ b/src/addons/qtype/essay/component/addon-qtype-essay.html
@@ -16,7 +16,7 @@
             <input *ngIf="question.answerDraftIdInput" type="hidden" [name]="question.answerDraftIdInput.name"
                 [value]="question.answerDraftIdInput.value">
             <!-- Plain text textarea. -->
-            <ion-textarea *ngIf="question.isPlainText" [attr.aria-label]="'core.question.answer' | translate" class="core-question-textarea"
+            <ion-textarea *ngIf="question.isPlainText" [ariaLabel]="'core.question.answer' | translate" class="core-question-textarea"
                 [ngClass]='{"core-monospaced": question.isMonospaced}' placeholder="{{ 'core.question.answer' | translate }}"
                 [attr.name]="question.textarea.name" [ngModel]="question.textarea.text" />
             <!-- Rich text editor. -->
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index bd1b653ad..4e69f9ce5 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -16,25 +16,27 @@
     <!-- Checkbox for multiple choice. -->
     <ng-container *ngIf="question.multi">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
-            <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-                <div>
-                    <div [class]="option.class">
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
-                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-                    </div>
-                    <div *ngIf="option.feedback" class="specificfeedback">
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+            <div class="flex-column">
+                <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
+                    [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                    <div class="flex-grow ion-text-wrap">
+                        <div [class]="option.class">
+                            <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
+                                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                        </div>
                     </div>
+                    <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+                        [attr.aria-label]="'core.question.correct' | translate" />
+                    <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+                        [attr.aria-label]="'core.question.incorrect' | translate" />
+                </ion-checkbox>
+                <div *ngIf="option.feedback" class="specificfeedback">
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
+                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 </div>
-                <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                    [attr.aria-label]="'core.question.correct' | translate" />
-                <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                    [attr.aria-label]="'core.question.incorrect' | translate" />
-            </ion-checkbox>
-
+            </div>
             <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
+            <!-- @TODO Check if this is still needed -->
             <input type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
         </ion-item>
     </ng-container>
@@ -42,23 +44,26 @@
     <!-- Radio buttons for single choice. -->
     <ion-radio-group *ngIf="!question.multi" [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
-            <ion-radio [value]="option.value" [disabled]="option.disabled"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-                <div>
-                    <div [class]="option.class">
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
-                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-                    </div>
-                    <div *ngIf="option.feedback" class="specificfeedback">
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+            <div class="flex-column">
+                <ion-radio [value]="option.value" [disabled]="option.disabled"
+                    [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                    <div class="flex-grow ion-text-wrap">
+                        <div [class]="option.class">
+                            <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
+                                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                        </div>
                     </div>
+                    <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+                        [attr.aria-label]="'core.question.correct' | translate" />
+                    <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+                        [attr.aria-label]="'core.question.incorrect' | translate" />
+                </ion-radio>
+
+                <div *ngIf="option.feedback" class="specificfeedback">
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
+                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 </div>
-                <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                    [attr.aria-label]="'core.question.correct' | translate" />
-                <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                    [attr.aria-label]="'core.question.incorrect' | translate" />
-            </ion-radio>
+            </div>
         </ion-item>
         <ion-button *ngIf="!question.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
             [disabled]="!question.singleChoiceModel" (click)="clear()" type="button">
@@ -66,6 +71,7 @@
         </ion-button>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
+        <!-- @TODO Check if this is still needed -->
         <input type="hidden" [ngModel]="question.singleChoiceModel" [attr.name]="question.optionsName">
     </ion-radio-group>
 </ion-list>
diff --git a/src/addons/qtype/multichoice/component/multichoice.scss b/src/addons/qtype/multichoice/component/multichoice.scss
index fea23fd97..5fd3ad0d4 100644
--- a/src/addons/qtype/multichoice/component/multichoice.scss
+++ b/src/addons/qtype/multichoice/component/multichoice.scss
@@ -1,9 +1,13 @@
+@use "theme/globals" as *;
+
 :host ::ng-deep {
     .specificfeedback {
         background-color: var(--core-question-feedback-color-bg);
         color: var(--core-question-feedback-color);
-        display: inline;
         padding: 0 .7em;
+        font-size: var(--text-size);
+
+        @include pointer-events-on-buttons();
     }
 
     .d-flex {
diff --git a/src/addons/qtype/ordering/component/addon-qtype-ordering.html b/src/addons/qtype/ordering/component/addon-qtype-ordering.html
index 79ca41eab..986c3514e 100644
--- a/src/addons/qtype/ordering/component/addon-qtype-ordering.html
+++ b/src/addons/qtype/ordering/component/addon-qtype-ordering.html
@@ -35,11 +35,11 @@
                 @if (!dragDisabled) {
                 <div slot="end" class="flex-row">
                     <ion-button fill="clear" (click)="moveItemByClick($event, false, item.id)" data-action="move-backward"
-                        [attr.aria-label]="'core.moveup' | translate" [attr.aria-description]="item.contentText">
+                        [ariaLabel]="'core.moveup' | translate" [attr.aria-description]="item.contentText">
                         <ion-icon slot="icon-only" name="fas-chevron-up" aria-hidden="true" />
                     </ion-button>
                     <ion-button fill="clear" (click)="moveItemByClick($event, true, item.id)" data-action="move-forward"
-                        [attr.aria-label]="'core.movedown' | translate" [attr.aria-description]="item.contentText">
+                        [ariaLabel]="'core.movedown' | translate" [attr.aria-description]="item.contentText">
                         <ion-icon slot="icon-only" name="fas-chevron-down" aria-hidden="true" />
                     </ion-button>
                 </div>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 40ccc995e..724d4cb75 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -56,7 +56,7 @@
                     </ion-badge>
                 </ion-label>
                 <ion-button slot="end" (click)="deleteCourse($event, course)" [disabled]="course.isDownloading" color="danger" fill="clear"
-                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
+                    [ariaLabel]="'addon.storagemanager.deletedatafrom' | translate:
                 { name: course.title }">
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
diff --git a/src/core/components/attachments/core-attachments.html b/src/core/components/attachments/core-attachments.html
index c5035b61e..7ec85a4f7 100644
--- a/src/core/components/attachments/core-attachments.html
+++ b/src/core/components/attachments/core-attachments.html
@@ -8,7 +8,7 @@
                 </span>
                 <span *ngIf="!maxSubmissionsReadable">{{ 'core.maxfilesize' | translate:{$a: maxSizeReadable} }}</span>
             </ion-label>
-            <ion-button slot="end" (click)="add()" [attr.aria-label]="'core.fileuploader.addfiletext' | translate"
+            <ion-button slot="end" (click)="add()" [ariaLabel]="'core.fileuploader.addfiletext' | translate"
                 *ngIf="unlimitedFiles || (maxSubmissions !== undefined && maxSubmissions >= 0 && files && files.length < maxSubmissions)">
                 <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
             </ion-button>
diff --git a/src/core/components/context-menu/core-context-menu.html b/src/core/components/context-menu/core-context-menu.html
index 5041a3e4f..dee543e37 100644
--- a/src/core/components/context-menu/core-context-menu.html
+++ b/src/core/components/context-menu/core-context-menu.html
@@ -1,4 +1,4 @@
-<ion-button [hidden]="hideMenu" fill="clear" [attr.aria-label]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
+<ion-button [hidden]="hideMenu" fill="clear" [ariaLabel]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
     [attr.aria-controls]="uniqueId">
     <ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 06a81d24f..51f61ce01 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,13 +1,13 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status === statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
+        [ariaLabel]="(statusTranslatable || 'core.download') | translate">
         <ion-icon slot="icon-only" name="fas-cloud-arrow-down" aria-hidden="true" />
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status === statusOutdated || (status === statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" @coreShowHideAnimation [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
+        (click)="download($event, true)" @coreShowHideAnimation [ariaLabel]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true" />
     </ion-button>
 
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index 565930726..e053a2fba 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -19,8 +19,8 @@
                 <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
             </ion-button>
 
-            <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)"
-                [attr.aria-label]="'core.delete' | translate" color="danger">
+            <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)" [ariaLabel]="'core.delete' | translate"
+                color="danger">
                 <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true" />
             </ion-button>
         </div>
diff --git a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
index cf55200bd..503f5a5ae 100644
--- a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
+++ b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
@@ -1,9 +1,9 @@
 <ion-button fill="clear" (click)="scroll($event, 'backward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'start'"
-    [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
+    [ariaLabel]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" flip-rtl="false" />
 </ion-button>
 
 <ion-button fill="clear" (click)="scroll($event, 'forward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'end'"
-    [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
+    [ariaLabel]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
     <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" flip-rtl="false" />
 </ion-button>
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index cb54e3393..09a3734d9 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -6,7 +6,7 @@
 <ng-container *ngIf="safeUrl && !launchExternalLabel">
     <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar && !loading">
         <ion-button fill="clear" (click)="toggleFullscreen()"
-            [attr.aria-label]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
+            [ariaLabel]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
             <ion-icon [name]="fullscreen ? 'fas-compress' : 'fas-expand'" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </core-navbar-buttons>
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 1c86d60ca..e9db2d2a8 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -31,12 +31,10 @@
     --contents-display: block;
 
     @include core-transition(all, 200ms);
-    pointer-events: none;
     display: var(--contents-display);
 
     &.core-loading-loaded {
         position: static;
-        pointer-events: auto;
         --contents-display: contents;
         --internal-loading-inline-min-height: 0px;
 
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index a0933b39a..eb5953383 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -19,25 +19,26 @@
             <!-- Form to edit the file's name. -->
             <ion-input type="text" name="filename" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off"
                 (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode"
-                [attr.aria-label]="'core.filename' | translate" />
+                [ariaLabel]="'core.filename' | translate" />
 
             <div class="buttons" slot="end">
                 <ion-button fill="clear" *ngIf="isIOS && !editMode" (click)="openFile($event, true)"
-                    [attr.aria-label]="openButtonLabel | translate">
+                    [ariaLabel]="openButtonLabel | translate">
                     <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
                 </ion-button>
 
                 <ng-container *ngIf="manage">
-                    <ion-button *ngIf="editMode" fill="clear" [attr.aria-label]="'core.save' | translate" color="success" type="submit">
+                    <ion-button *ngIf="editMode" fill="clear" [ariaLabel]="'core.save' | translate" color="success"
+                        (click)="changeName(newFileName, $event)">
                         <ion-icon name="fas-check" slot="icon-only" aria-hidden="true" />
                     </ion-button>
 
                     <ion-button *ngIf="!editMode" fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
-                        [attr.aria-label]="'core.edit' | translate">
+                        [ariaLabel]="'core.edit' | translate">
                         <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
                     </ion-button>
 
-                    <ion-button *ngIf="!editMode" fill="clear" (click)="deleteFile($event)" [attr.aria-label]="'core.delete' | translate"
+                    <ion-button *ngIf="!editMode" fill="clear" (click)="deleteFile($event)" [ariaLabel]="'core.delete' | translate"
                         color="danger">
                         <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
diff --git a/src/core/components/message/message.html b/src/core/components/message/message.html
index f8c3e1099..2c8d28ac9 100644
--- a/src/core/components/message/message.html
+++ b/src/core/components/message/message.html
@@ -30,11 +30,11 @@
         </div>
 
         <ion-button *ngIf="showDelete && !message.deleted && message.delete !== false" fill="clear" [@coreSlideInOut]="'fromRight'"
-            color="danger" (click)="delete($event)" [attr.aria-label]="'addon.messages.deletemessage' | translate" class="delete-button">
+            color="danger" (click)="delete($event)" [ariaLabel]="'addon.messages.deletemessage' | translate" class="delete-button">
             <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
         </ion-button>
         <ion-button *ngIf="showDelete && message.deleted" fill="clear" [@coreSlideInOut]="'fromRight'" color="danger"
-            (click)="undoDelete($event)" [attr.aria-label]="'core.restore' | translate" class="delete-button">
+            (click)="undoDelete($event)" [ariaLabel]="'core.restore' | translate" class="delete-button">
             <ion-icon name="fas-rotate-left" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </div>
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index 3d77826db..dab08f326 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,6 +1,6 @@
 <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="items.length > 1">
     <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="previousIndex < 0" fill="clear" [attr.aria-label]="previousTitle" (click)="navigate(previousIndex)">
+        <ion-button [disabled]="previousIndex < 0" fill="clear" [ariaLabel]="previousTitle" (click)="navigate(previousIndex)">
             <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </ion-col>
@@ -8,7 +8,7 @@
         <core-progress-bar [progress]="progress" [text]="progressText" *ngIf="currentIndex >= 0" />
     </ion-col>
     <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="nextIndex >= items.length" fill="clear" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
+        <ion-button [disabled]="nextIndex >= items.length" fill="clear" [ariaLabel]="nextTitle" (click)="navigate(nextIndex)">
             <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" />
         </ion-button>
     </ion-col>
diff --git a/src/core/components/password-modal/password-modal.html b/src/core/components/password-modal/password-modal.html
index d5a1c2dea..8b1b77ef6 100644
--- a/src/core/components/password-modal/password-modal.html
+++ b/src/core/components/password-modal/password-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ title | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -14,7 +14,7 @@
     <form (ngSubmit)="submitPassword($event)" #passwordForm>
         <div>
             <ion-item>
-                <ion-input [attr.aria-label]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
+                <ion-input [ariaLabel]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
                     type="password" placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus
                     [clearOnEdit]="false">
                     <core-show-password slot="end" />
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html
index b7d807ffd..cd2f3ed4d 100644
--- a/src/core/components/send-message-form/core-send-message-form.html
+++ b/src/core/components/send-message-form/core-send-message-form.html
@@ -5,7 +5,7 @@
         (keyup.meta.enter)="enterKeyUp($event, 'meta')" (keydown.enter)="enterKeyDown($event)"
         (keydown.control.enter)="enterKeyDown($event, 'control')" (keydown.meta.enter)="enterKeyDown($event, 'meta')">
     </textarea>
-    <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled" [attr.aria-label]="'core.send' | translate"
+    <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled" [ariaLabel]="'core.send' | translate"
         [core-suppress-events] (onClick)="submitForm($event)">
         <ion-icon name="send" slot="icon-only" aria-hidden="true" flip-rtl />
     </ion-button>
diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html
index 362f23d41..21642a1ce 100644
--- a/src/core/components/show-password/core-show-password.html
+++ b/src/core/components/show-password/core-show-password.html
@@ -1,5 +1,5 @@
 <ng-content />
-<ion-button fill="clear" [attr.aria-label]="(shown ? 'core.hide' : 'core.show') | translate" core-suppress-events (onClick)="toggle($event)"
+<ion-button fill="clear" [ariaLabel]="(shown ? 'core.hide' : 'core.show') | translate" core-suppress-events (onClick)="toggle($event)"
     (mousedown)="doNotBlur($event)" (keydown)="doNotBlur($event)" (keyup)="toggle($event)">
     <ion-icon [name]="shown ? 'fas-eye-slash' : 'fas-eye'" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index f1af5a514..547935bf5 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -3,7 +3,7 @@
         <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
         <ng-container *ngIf="hideUntil">
             <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
-                [attr.aria-label]="'core.previous' | translate">
+                [ariaLabel]="'core.previous' | translate">
                 <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
             </ion-button>
             <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" role="tablist" [attr.aria-label]="description">
@@ -29,7 +29,7 @@
                 </ng-container>
             </swiper-container>
             <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
-                [attr.aria-label]="'core.next' | translate">
+                [ariaLabel]="'core.next' | translate">
                 <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
             </ion-button>
         </ng-container>
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index b821e41ad..9c97fcaca 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -2,7 +2,7 @@
     <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate" />
     <ng-container *ngIf="hideUntil">
         <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
-            [attr.aria-label]="'core.previous' | translate">
+            [ariaLabel]="'core.previous' | translate">
             <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only" />
         </ion-button>
         <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" role="tablist" [attr.aria-label]="description">
@@ -27,7 +27,7 @@
             </ng-container>
         </swiper-container>
         <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
-            [attr.aria-label]="'core.next' | translate">
+            [ariaLabel]="'core.next' | translate">
             <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only" />
         </ion-button>
     </ng-container>
diff --git a/src/core/directives/auto-focus.ts b/src/core/directives/auto-focus.ts
index 48071cd1b..eb550ac35 100644
--- a/src/core/directives/auto-focus.ts
+++ b/src/core/directives/auto-focus.ts
@@ -22,7 +22,7 @@ import { CoreDom } from '@singletons/dom';
  * Directive to auto focus an element when a view is loaded.
  *
  * The value of the input will decide if show keyboard when focusing the element (only on Android).
- * In case value is nofocus, the directive is disabled.
+ * In case value is false, the directive is disabled.
  *
  * <ion-input [core-auto-focus]="showKeyboard">
  */
diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.html b/src/core/features/block/components/side-blocks-button/side-blocks-button.html
index 523e63c8d..d4bd9fe7f 100644
--- a/src/core/features/block/components/side-blocks-button/side-blocks-button.html
+++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.html
@@ -1,3 +1,3 @@
-<ion-button (click)="openBlocks()" [userTour]="userTour" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary">
+<ion-button (click)="openBlocks()" [userTour]="userTour" [ariaLabel]="'core.block.opendrawerblocks' | translate" color="secondary">
     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/features/block/components/side-blocks/side-blocks.html b/src/core/features/block/components/side-blocks/side-blocks.html
index a76529bb2..418da89f8 100644
--- a/src/core/features/block/components/side-blocks/side-blocks.html
+++ b/src/core/features/block/components/side-blocks/side-blocks.html
@@ -1,7 +1,7 @@
 <ion-header class="no-title">
     <ion-toolbar>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/comments/pages/viewer/viewer.html b/src/core/features/comments/pages/viewer/viewer.html
index ba28f8aeb..5dafee37a 100644
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@@ -10,7 +10,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <ion-button *ngIf="canDeleteComments" slot="end" fill="clear" (click)="toggleDelete()"
-                [attr.aria-label]="'core.toggledelete' | translate">
+                [ariaLabel]="'core.toggledelete' | translate">
                 <ion-icon *ngIf="!showDelete" name="fas-pen" slot="icon-only" aria-hidden="true" />
                 <ion-icon *ngIf="showDelete" name="fas-check" slot="icon-only" aria-hidden="true" />
             </ion-button>
diff --git a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
index 05bbb9ba3..7868f6620 100644
--- a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
+++ b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.contentlinks.chooseaccount' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index 1f49076f2..4651ea3f3 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -1,5 +1,5 @@
 <core-navbar-buttons slot="end" prepend>
-    <ion-button fill="clear" (click)="gotoCourseDownloads()" [attr.aria-label]="'addon.storagemanager.coursedownloads' | translate">
+    <ion-button fill="clear" (click)="gotoCourseDownloads()" [ariaLabel]="'addon.storagemanager.coursedownloads' | translate">
         <ion-icon name="fas-cloud-arrow-down" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
@@ -31,12 +31,12 @@
         <div collapsible-footer appearOnBottom *ngIf="displayCourseIndex && (previousSection || nextSection)" slot="fixed">
             <div class="core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width">
                 <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
-                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name" class="ion-text-nowrap">
+                    [ariaLabel]="('core.previous' | translate) + ': ' + previousSection.name" class="ion-text-nowrap">
                     <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true" />
                     <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                 </ion-button>
                 <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
-                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name" class="ion-text-nowrap">
+                    [ariaLabel]="('core.next' | translate) + ': ' + nextSection.name" class="ion-text-nowrap">
                     <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                     <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true" />
                 </ion-button>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 4c83f6bb6..546a70079 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -4,7 +4,7 @@
             <h1 id="core-course-section-selector-label">{{ 'core.course.courseindex' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
index 3162f135f..b6781ba7e 100644
--- a/src/core/features/course/components/module-completion/core-course-module-completion.html
+++ b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -20,14 +20,14 @@
         </ng-container>
 
         <ng-container *ngIf="!completion.isautomatic">
-            <ion-button *ngIf="completed" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+            <ion-button *ngIf="completed" color="success" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
                 class="completioninfo completion_complete chip">
                 <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                 {{ 'core.course.completion_manual:done' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
                     [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
             </ion-button>
-            <ion-button *ngIf="!completed" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+            <ion-button *ngIf="!completed" fill="outline" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
                 class="completioninfo completion_incomplete chip">
                 {{ 'core.course.completion_manual:markdone' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index 928f43f99..3074c02b8 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -1,13 +1,13 @@
 <ng-container *ngIf="completion && !completion.isautomatic">
     <ng-container *ngIf="completion.istrackeduser">
-        <ion-button *ngIf="completion.state" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+        <ion-button *ngIf="completion.state" color="success" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
             class="ion-text-wrap chip">
             <ion-icon name="fas-check" slot="start" aria-hidden="true" />
             {{ 'core.course.completion_manual:done' | translate }}
             <ion-icon *ngIf="completion?.offline" name="fas-arrows-rotate"
                 [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end" />
         </ion-button>
-        <ion-button *ngIf="!completion.state" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+        <ion-button *ngIf="!completion.state" fill="outline" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
             class="ion-text-wrap chip">
             {{ 'core.course.completion_manual:markdone' | translate }}
             <ion-icon *ngIf="completion?.offline" name="fas-arrows-rotate"
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index 3516aa08b..64cb80e6d 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -1,7 +1,7 @@
 <ion-header class="no-title">
     <ion-toolbar>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -24,7 +24,7 @@
                 </h1>
             </ion-label>
             <ion-button fill="clear" *ngIf="displayOptions.displayOpenInBrowser && externalUrl" [href]="externalUrl" core-link
-                [showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate" slot="end" [class.hidden]="!isTeacher"
+                [showBrowserWarning]="false" [ariaLabel]="'core.openinbrowser' | translate" slot="end" [class.hidden]="!isTeacher"
                 class="core-module-oib-button">
                 <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
@@ -164,7 +164,7 @@
                     <ion-badge color="light">{{ size | coreBytesToSize }}</ion-badge>
                 </ion-label>
                 <ion-button *ngIf="!removeFilesLoading" [disabled]="prefetchLoading" (click)="removeFiles()" color="danger" fill="clear"
-                    [attr.aria-label]="'core.clearstoreddata' | translate:{$a: size | coreBytesToSize}" slot="end">
+                    [ariaLabel]="'core.clearstoreddata' | translate:{$a: size | coreBytesToSize}" slot="end">
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
                 <ion-spinner *ngIf="removeFilesLoading" slot="end" aria-hidden="true" />
diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index 7902ac903..b5310802f 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title />
         <ion-buttons slot="end" *ngIf="isModal">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -41,7 +41,7 @@
                         </ion-chip>
                     </ion-label>
                     <ion-button *ngIf="displayOpenInBrowser" fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
-                        [attr.aria-label]="'core.openinbrowser' | translate" slot="end" [class.hidden]="!isTeacher"
+                        [ariaLabel]="'core.openinbrowser' | translate" slot="end" [class.hidden]="!isTeacher"
                         class="core-course-oib-button">
                         <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
                     </ion-button>
diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html
index 5b17a3397..9948d6bf9 100644
--- a/src/core/features/course/pages/index/index.html
+++ b/src/core/features/course/pages/index/index.html
@@ -10,7 +10,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openCourseSummary()" [attr.aria-label]="'core.course.coursesummary' | translate">
+            <ion-button fill="clear" (click)="openCourseSummary()" [ariaLabel]="'core.course.coursesummary' | translate">
                 <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
             </ion-button>
             <!-- Add an empty context menu so tab pages can add items, otherwise the menu disappears in some cases. -->
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index 95c3f03e1..f3f719077 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -11,10 +11,10 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="displayOpenInBrowser && module.url && module.uservisible && !unsupported" [href]="module.url"
-                core-link [showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate">
+                core-link [showBrowserWarning]="false" [ariaLabel]="'core.openinbrowser' | translate">
                 <ion-icon name="fas-up-right-from-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
-            <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
+            <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
                 <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index 777234016..3b8239b9f 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -17,7 +17,7 @@
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
             <!-- Options menu. -->
             <ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
-                [attr.aria-label]="('core.displayoptions' | translate)">
+                [ariaLabel]="('core.displayoptions' | translate)">
                 <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
             </ion-button>
 
diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
index c1e4865f4..296ac37e0 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.html
+++ b/src/core/features/courses/pages/dashboard/dashboard.html
@@ -1,5 +1,5 @@
 <core-navbar-buttons slot="end" prepend>
-    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
+    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [ariaLabel]="'core.courses.searchcourses' | translate">
         <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/core/features/dataprivacy/components/contactdpo/contactdpo.html b/src/core/features/dataprivacy/components/contactdpo/contactdpo.html
index 9192b9051..686e3e8f1 100644
--- a/src/core/features/dataprivacy/components/contactdpo/contactdpo.html
+++ b/src/core/features/dataprivacy/components/contactdpo/contactdpo.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.dataprivacy.contactdataprotectionofficer' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/dataprivacy/components/newrequest/newrequest.html b/src/core/features/dataprivacy/components/newrequest/newrequest.html
index 8b2ee4076..646a313cf 100644
--- a/src/core/features/dataprivacy/components/newrequest/newrequest.html
+++ b/src/core/features/dataprivacy/components/newrequest/newrequest.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.dataprivacy.createnewdatarequest' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
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 e2ed8eb1b..e39a3a882 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
@@ -435,6 +435,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
      * @param parent Parent where to set the position.
      */
     protected setCurrentCursorPosition(parent: Node): void {
+        if (!this.rteEnabled || !this.element.classList.contains('has-focus')) {
+            return;
+        }
+
         const range = document.createRange();
 
         // Select all so it will go to the end.
@@ -600,7 +604,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         this.control?.setValue(null, { emitEvent: false });
 
         setTimeout(() => {
-            if (this.rteEnabled && this.editorElement) {
+            if (this.editorElement) {
                 this.setCurrentCursorPosition(this.editorElement);
             }
         }, 1);
diff --git a/src/core/features/emulator/components/capture-media/capture-media.html b/src/core/features/emulator/components/capture-media/capture-media.html
index a3b55675d..01b542886 100644
--- a/src/core/features/emulator/components/capture-media/capture-media.html
+++ b/src/core/features/emulator/components/capture-media/capture-media.html
@@ -33,12 +33,12 @@
     <ion-row>
         <ion-col />
         <ion-col class="ion-text-center">
-            <ion-button fill="clear" *ngIf="!hasCaptured" (click)="actionClicked()" [attr.aria-label]="title">
+            <ion-button fill="clear" *ngIf="!hasCaptured" (click)="actionClicked()" [ariaLabel]="title">
                 <ion-icon *ngIf="!isCapturing && isVideo" name="fas-video" slot="icon-only" aria-hidden="true" />
                 <ion-icon *ngIf="isImage" name="fas-camera" slot="icon-only" aria-hidden="true" />
                 <ion-icon *ngIf="isCapturing" name="fas-square" slot="icon-only" aria-hidden="true" />
             </ion-button>
-            <ion-button fill="clear" *ngIf="hasCaptured" (click)="discard()" [attr.aria-label]="'core.discard' | translate">
+            <ion-button fill="clear" *ngIf="hasCaptured" (click)="discard()" [ariaLabel]="'core.discard' | translate">
                 <ion-icon color="danger" name="fas-trash" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
index bda39a252..b309bfa6b 100644
--- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
+++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.html
@@ -1,7 +1,7 @@
 <header>
     <h1>{{ 'core.fileuploader.audiotitle' | translate }}</h1>
 
-    <ion-button shape="round" fill="clear" [attr.aria-label]="'core.close' | translate" (click)="cancel()">
+    <ion-button shape="round" fill="clear" [ariaLabel]="'core.close' | translate" (click)="cancel()">
         <ion-icon slot="icon-only" name="close" />
     </ion-button>
 </header>
@@ -12,8 +12,7 @@
     <div *ngIf="status === 'empty'" class="core-audio-recorder--wrapper">
         <p>{{ 'core.fileuploader.startrecordinginstructions' | translate }}</p>
 
-        <ion-button shape="round" color="danger" [attr.aria-label]="'core.fileuploader.startrecording' | translate"
-            (click)="startRecording()">
+        <ion-button shape="round" color="danger" [ariaLabel]="'core.fileuploader.startrecording' | translate" (click)="startRecording()">
             <ion-icon slot="icon-only" name="fas-microphone" />
         </ion-button>
     </div>
@@ -31,18 +30,18 @@
 
             <div class="core-audio-recorder--control">
                 <ion-button *ngIf="status === 'recording-ongoing'" shape="round" fill="clear"
-                    [attr.aria-label]="'core.fileuploader.pauserecording' | translate" (click)="pauseRecording()">
+                    [ariaLabel]="'core.fileuploader.pauserecording' | translate" (click)="pauseRecording()">
                     <ion-icon slot="icon-only" name="fas-circle-pause" />
                 </ion-button>
 
-                <ion-button *ngIf="status === 'recording-paused'" [attr.aria-label]="'core.fileuploader.resumerecording' | translate"
+                <ion-button *ngIf="status === 'recording-paused'" [ariaLabel]="'core.fileuploader.resumerecording' | translate"
                     shape="round" fill="clear" color="danger" (click)="resumeRecording()">
                     <ion-icon slot="icon-only" name="fas-microphone" />
                 </ion-button>
             </div>
 
             <div class="core-audio-recorder--control">
-                <ion-button shape="round" fill="clear" [attr.aria-label]="'core.fileuploader.stoprecording' | translate"
+                <ion-button shape="round" fill="clear" [ariaLabel]="'core.fileuploader.stoprecording' | translate"
                     (click)="stopRecording()">
                     <ion-icon slot="icon-only" name="fa-check" />
                 </ion-button>
@@ -57,7 +56,7 @@
 
         <div class="core-audio-recorder--controls">
             <div class="core-audio-recorder--control">
-                <ion-button shape="round" fill="clear" color="danger" [attr.aria-label]="'core.fileuploader.discardrecording' | translate"
+                <ion-button shape="round" fill="clear" color="danger" [ariaLabel]="'core.fileuploader.discardrecording' | translate"
                     (click)="discardRecording()">
                     <ion-icon slot="icon-only" name="fas-trash" />
                 </ion-button>
diff --git a/src/core/features/h5p/components/h5p-player/core-h5p-player.html b/src/core/features/h5p/components/h5p-player/core-h5p-player.html
index c6f1eb653..d5948426d 100644
--- a/src/core/features/h5p/components/h5p-player/core-h5p-player.html
+++ b/src/core/features/h5p/components/h5p-player/core-h5p-player.html
@@ -1,11 +1,10 @@
 <div *ngIf="!showPackage && urlParams" class="core-h5p-placeholder">
-    <ion-button class="core-h5p-placeholder-play-button" fill="clear" (click)="play($event)"
-        [attr.aria-label]="'core.h5p.play' | translate">
+    <ion-button class="core-h5p-placeholder-play-button" fill="clear" (click)="play($event)" [ariaLabel]="'core.h5p.play' | translate">
         <ion-icon name="far-circle-play" slot="icon-only" aria-hidden="true" />
     </ion-button>
 
     <div class="core-h5p-placeholder-download-container">
-        <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async" [canTrustDownload]="true"
+        <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async" [canTrustDownload]="true"
             (action)="download()" />
     </div>
 </div>
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
index bc2f9f617..9a405ae15 100644
--- a/src/core/features/login/components/login-methods/login-methods.html
+++ b/src/core/features/login/components/login-methods/login-methods.html
@@ -4,7 +4,7 @@
 
 <div class="core-login-methods" *ngIf="loginMethods.length">
     <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin" *ngFor="let method of loginMethods" (click)="method.action()"
-        [attr.aria-label]="method.name" expand="block">
+        [ariaLabel]="method.name" expand="block">
         <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start" />
         <ion-label>{{ method.name }}</ion-label>
     </ion-button>
@@ -21,7 +21,7 @@
 <ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
     <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
     <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
-        (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
+        (click)="oauthClicked(provider)" [ariaLabel]="provider.name" expand="block">
         <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
         <ion-label>{{ provider.name }}</ion-label>
     </ion-button>
diff --git a/src/core/features/login/components/site-help/site-help.html b/src/core/features/login/components/site-help/site-help.html
index 5483d3b5a..2d8c923c6 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.login.help' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.html b/src/core/features/login/components/site-onboarding/site-onboarding.html
index 140519174..794b87d56 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -1,13 +1,13 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-button fill="clear" (click)="previous($event)" [attr.aria-label]="'core.back' | translate">
+            <ion-button fill="clear" (click)="previous($event)" [ariaLabel]="'core.back' | translate">
                 <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
         <ion-title />
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
+            <ion-button fill="clear" (click)="skip($event)" [ariaLabel]="'core.skip' | translate">
                 {{'core.skip' | translate}}
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/components/sites-modal/sites-modal.html b/src/core/features/login/components/sites-modal/sites-modal.html
index 9b78848b6..010f99a84 100644
--- a/src/core/features/login/components/sites-modal/sites-modal.html
+++ b/src/core/features/login/components/sites-modal/sites-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
+            <ion-button fill="clear" (click)="close($event)" [ariaLabel]="'core.back' | translate" class="ion-back-button">
                 <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -12,7 +12,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 1" (click)="toggleDelete()"
-                [attr.aria-label]="'core.login.toggleremove' | translate">
+                [ariaLabel]="'core.login.toggleremove' | translate">
                 <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -32,7 +32,7 @@
                             }}</span>
                     </ion-badge>
                     <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
-                        [attr.aria-label]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
+                        [ariaLabel]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
                         <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ng-container>
diff --git a/src/core/features/login/pages/change-password/change-password.html b/src/core/features/login/pages/change-password/change-password.html
index 44821f7b2..053db0233 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -10,7 +10,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [ariaLabel]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 5da2f6d87..30eee5eea 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -9,10 +9,10 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
+            <ion-button fill="clear" (click)="openSettings()" [ariaLabel]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
-            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [ariaLabel]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 9d1f5f7f3..1a8370834 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -10,7 +10,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="authInstructions" (click)="showAuthInstructions()"
-                [attr.aria-label]="'core.login.instructions' | translate">
+                [ariaLabel]="'core.login.instructions' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index 39022d08d..fc9364330 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -39,7 +39,7 @@
                 <ion-item lines="full">
                     <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
                         autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus"
-                        [attr.aria-label]="'core.login.usernameoremail' | translate" />
+                        [ariaLabel]="'core.login.usernameoremail' | translate" />
                 </ion-item>
                 <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
                     {{ 'core.courses.search' | translate }}
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index e17e0d753..bab706356 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-buttons slot="start">
-            <ion-button fill="clear" (click)="cancel($event)" [attr.aria-label]="'core.back' | translate" class="ion-back-button">
+            <ion-button fill="clear" (click)="cancel($event)" [ariaLabel]="'core.back' | translate" class="ion-back-button">
                 <ion-icon ios="chevron-back" md="arrow-back-sharp" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -11,7 +11,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [ariaLabel]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 186bbc4ce..938e75d65 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -9,7 +9,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
+            <ion-button fill="clear" (click)="openSettings()" [ariaLabel]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index 38c21d054..2743fa00a 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -10,10 +10,10 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="accountsList.count > 0" (click)="toggleDelete()"
-                [attr.aria-label]="'core.login.toggleremove' | translate">
+                [ariaLabel]="'core.login.toggleremove' | translate">
                 <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
             </ion-button>
-            <ion-button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate">
+            <ion-button (click)="openSettings()" [ariaLabel]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-gear" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -29,7 +29,7 @@
                         }}</span>
                 </ion-badge>
                 <ion-button *ngIf="showDelete" slot="end" fill="clear" color="danger" (click)="deleteSite($event, site)"
-                    [attr.aria-label]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
+                    [ariaLabel]="'core.login.removeaccount' | translate" [@coreSlideInOut]="'fromRight'">
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </ng-template>
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 70b2023c7..b45428a55 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -6,7 +6,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close($event)" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -119,7 +119,7 @@
         </ion-label>
     </ion-item>
     <div class="ion-padding">
-        <ion-button (click)="logout($event)" expand="block" color="danger" [attr.aria-label]="'core.mainmenu.logout' | translate"
+        <ion-button (click)="logout($event)" expand="block" color="danger" [ariaLabel]="'core.mainmenu.logout' | translate"
             class="ion-text-wrap">
             <ng-container *ngIf="!removeAccountOnLogout">
                 <ion-icon name="fas-right-from-bracket" slot="start" aria-hidden="true" />
diff --git a/src/core/features/policy/components/policy-modal/policy-modal.html b/src/core/features/policy/components/policy-modal/policy-modal.html
index 412885f05..b3bf00004 100644
--- a/src/core/features/policy/components/policy-modal/policy-modal.html
+++ b/src/core/features/policy/components/policy-modal/policy-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ policy.name }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/policy/pages/acceptances/acceptances.html b/src/core/features/policy/pages/acceptances/acceptances.html
index 894f577df..f07e889b5 100644
--- a/src/core/features/policy/pages/acceptances/acceptances.html
+++ b/src/core/features/policy/pages/acceptances/acceptances.html
@@ -104,7 +104,7 @@
 
                     <span class="core-policy-user-agreement-actions" *ngIf="policy.canrevoke">
                         <ion-button fill="none" (click)="setAcceptance($event, policy, false)"
-                            [attr.aria-label]="'core.policy.useracceptanceactionrevokeone' | translate:{$a: policy.name}">
+                            [ariaLabel]="'core.policy.useracceptanceactionrevokeone' | translate:{$a: policy.name}">
                             {{ 'core.policy.useracceptanceactionrevoke' | translate }}
                         </ion-button>
                     </span>
@@ -121,7 +121,7 @@
 
                     <span class="core-policy-user-agreement-actions" *ngIf="policy.canaccept">
                         <ion-button fill="none" (click)="setAcceptance($event, policy, true)"
-                            [attr.aria-label]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
+                            [ariaLabel]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
                             {{ 'core.policy.useracceptanceactionaccept' | translate }}
                         </ion-button>
                     </span>
@@ -133,11 +133,11 @@
 
                     <span class="core-policy-user-agreement-actions" *ngIf="policy.canaccept">
                         <ion-button fill="none" (click)="setAcceptance($event, policy, true)"
-                            [attr.aria-label]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
+                            [ariaLabel]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
                             {{ 'core.policy.useracceptanceactionaccept' | translate }}
                         </ion-button>
                         <ion-button fill="none" (click)="setAcceptance($event, policy, false)"
-                            [attr.aria-label]="'core.policy.useracceptanceactiondeclineone' | translate:{$a: policy.name}">
+                            [ariaLabel]="'core.policy.useracceptanceactiondeclineone' | translate:{$a: policy.name}">
                             {{ 'core.policy.useracceptanceactiondecline' | translate }}
                         </ion-button>
                     </span>
@@ -191,7 +191,7 @@
             <p *ngIf="!isPreviousVersion">{{ policy.name }}</p>
         </ion-label>
         <ion-button fill="clear" (click)="viewFullPolicy($event, policy)"
-            [attr.aria-label]="'core.policy.viewpolicy' | translate:{policyname: policy.name}">
+            [ariaLabel]="'core.policy.viewpolicy' | translate:{policyname: policy.name}">
             <ion-icon slot="icon-only" name="fas-eye" aria-hidden="true" />
         </ion-button>
     </ion-item>
@@ -236,7 +236,7 @@
 
                         <span class="core-policy-user-agreement-actions" *ngIf="policy.canrevoke">
                             <ion-button fill="none" (click)="setAcceptance($event, policy, false)"
-                                [attr.aria-label]="'core.policy.useracceptanceactionrevokeone' | translate:{$a: policy.name}">
+                                [ariaLabel]="'core.policy.useracceptanceactionrevokeone' | translate:{$a: policy.name}">
                                 {{ 'core.policy.useracceptanceactionrevoke' | translate }}
                             </ion-button>
                         </span>
@@ -253,7 +253,7 @@
 
                         <span class="core-policy-user-agreement-actions" *ngIf="policy.canaccept">
                             <ion-button fill="none" (click)="setAcceptance($event, policy, true)"
-                                [attr.aria-label]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
+                                [ariaLabel]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
                                 {{ 'core.policy.useracceptanceactionaccept' | translate }}
                             </ion-button>
                         </span>
@@ -265,11 +265,11 @@
 
                         <span class="core-policy-user-agreement-actions" *ngIf="policy.canaccept">
                             <ion-button fill="none" (click)="setAcceptance($event, policy, true)"
-                                [attr.aria-label]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
+                                [ariaLabel]="'core.policy.useracceptanceactionacceptone' | translate:{$a: policy.name}">
                                 {{ 'core.policy.useracceptanceactionaccept' | translate }}
                             </ion-button>
                             <ion-button fill="none" (click)="setAcceptance($event, policy, false)"
-                                [attr.aria-label]="'core.policy.useracceptanceactiondeclineone' | translate:{$a: policy.name}">
+                                [ariaLabel]="'core.policy.useracceptanceactiondeclineone' | translate:{$a: policy.name}">
                                 {{ 'core.policy.useracceptanceactiondecline' | translate }}
                             </ion-button>
                         </span>
diff --git a/src/core/features/policy/pages/site-policy/site-policy.html b/src/core/features/policy/pages/site-policy/site-policy.html
index b559ecb41..368789aa4 100644
--- a/src/core/features/policy/pages/site-policy/site-policy.html
+++ b/src/core/features/policy/pages/site-policy/site-policy.html
@@ -9,7 +9,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="cancel()" [attr.aria-label]="'core.cancel' | translate">
+            <ion-button fill="clear" (click)="cancel()" [ariaLabel]="'core.cancel' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
@@ -110,7 +110,7 @@
                         <p *ngIf="stepData">{{ 'core.policy.steppolicies' | translate:{ $a:stepData } }}</p>
                     </ion-label>
                     <ion-button *ngIf="hasScroll" class="core-site-policy-go-top-button" color="secondary" slot="end"
-                        (click)="scrollTop($event)" [attr.aria-label]="'core.policy.backtotop' | translate">
+                        (click)="scrollTop($event)" [ariaLabel]="'core.policy.backtotop' | translate">
                         <ion-icon name="fas-chevron-up" slot="icon-only" aria-hidden="true" />
                     </ion-button>
                 </ion-item>
diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
index 369bf2ea9..3ab801280 100644
--- a/src/core/features/question/question.scss
+++ b/src/core/features/question/question.scss
@@ -106,10 +106,4 @@
     .fa.icon.questioncorrectnessicon {
         font-size: var(--mdl-typography-icon-fontSize-md);
     }
-
-    .item.item-interactive.item-interactive-disabled ::ng-deep {
-        ion-label, ion-select, ion-checkbox {
-            opacity: 0.7;
-        }
-    }
 }
diff --git a/src/core/features/rating/components/ratings/ratings-modal.html b/src/core/features/rating/components/ratings/ratings-modal.html
index e6446d520..df99a2c2f 100644
--- a/src/core/features/rating/components/ratings/ratings-modal.html
+++ b/src/core/features/rating/components/ratings/ratings-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.rating.ratings' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/reminders/components/set-button/set-button.html b/src/core/features/reminders/components/set-button/set-button.html
index 803f90ae0..8441b8155 100644
--- a/src/core/features/reminders/components/set-button/set-button.html
+++ b/src/core/features/reminders/components/set-button/set-button.html
@@ -1,5 +1,5 @@
 <ion-button fill="clear" size="small" (click)="setReminder($event)"
-    [attr.aria-label]="'core.reminders.setareminderfor' | translate : { title: title, label: labelClean }">
+    [ariaLabel]="'core.reminders.setareminderfor' | translate : { title: title, label: labelClean }">
     <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>
diff --git a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
index abd3e5ff3..77ef122e8 100644
--- a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
+++ b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
@@ -10,7 +10,7 @@
         <div class="flex-row">
             <!-- Input to enter the value. -->
             <ion-input id="reminderValue" type="number" name="customvalue" [(ngModel)]="customValue" placeholder="10"
-                [attr.aria-label]="'core.reminders.value' | translate" />
+                [ariaLabel]="'core.reminders.value' | translate" />
 
             <!-- Units. -->
             <span class="accesshide" id="reminderUnits_label">{{ 'core.reminders.units' | translate }}</span>
diff --git a/src/core/features/reportbuilder/components/report-summary/report-summary.html b/src/core/features/reportbuilder/components/report-summary/report-summary.html
index 898f440f7..ea51610ff 100644
--- a/src/core/features/reportbuilder/components/report-summary/report-summary.html
+++ b/src/core/features/reportbuilder/components/report-summary/report-summary.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title />
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/reportbuilder/pages/report/report.html b/src/core/features/reportbuilder/pages/report/report.html
index 5862a3e7a..3549fb4ca 100644
--- a/src/core/features/reportbuilder/pages/report/report.html
+++ b/src/core/features/reportbuilder/pages/report/report.html
@@ -4,7 +4,7 @@
             <ion-back-button [text]="'core.back' | translate" />
         </ion-buttons>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openInfo()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="openInfo()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-circle-info" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html
index 5761833a5..2a1b69cba 100644
--- a/src/core/features/search/components/global-search-filters/global-search-filters.html
+++ b/src/core/features/search/components/global-search-filters/global-search-filters.html
@@ -4,7 +4,7 @@
             <h1>{{ 'core.search.filterheader' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index c10f9d2ea..c61f32359 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/src/core/features/search/components/search-box/core-search-box.html
@@ -1,11 +1,11 @@
 <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
-    <ion-input [attr.aria-label]="placeholder" type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder"
+    <ion-input [ariaLabel]="placeholder" type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder"
         [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"
         (ionFocus)="focus($event)">
-        <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText">
+        <ion-button slot="end" fill="clear" type="submit" [ariaLabel]="searchLabel" [disabled]="disabled || !searchText">
             <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
         </ion-button>
-        <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
+        <ion-button *ngIf="showClear" slot="end" fill="clear" [ariaLabel]="'core.clearsearch' | translate"
             [disabled]="searched === '' || disabled" (click)="clearForm()">
             <ion-icon name="fas-delete-left" slot="icon-only" aria-hidden="true" flip-rtl />
         </ion-button>
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index 37484811f..bc6f5a9b7 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -9,7 +9,7 @@
         </ion-title>
 
         <ion-buttons slot="end" *ngIf="siteId">
-            <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
+            <ion-button fill="clear" (click)="copyInfo()" [ariaLabel]="'core.settings.copyinfo' | translate">
                 <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index bda6b9467..08886bdc5 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -9,7 +9,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
+            <ion-button fill="clear" (click)="copyInfo()" [ariaLabel]="'core.settings.copyinfo' | translate">
                 <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/settings/pages/error-log/error-log.html b/src/core/features/settings/pages/error-log/error-log.html
index 8a8c0a442..e964cf9ad 100644
--- a/src/core/features/settings/pages/error-log/error-log.html
+++ b/src/core/features/settings/pages/error-log/error-log.html
@@ -9,7 +9,7 @@
         </ion-title>
 
         <ion-buttons slot="end" *ngIf="errorLogs.length">
-            <ion-button fill="clear" (click)="copyError()" [attr.aria-label]="'core.settings.copyinfo' | translate">
+            <ion-button fill="clear" (click)="copyError()" [ariaLabel]="'core.settings.copyinfo' | translate">
                 <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index c0a20a3a2..e075696af 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -37,7 +37,7 @@
                         </p>
                     </ion-label>
                     <core-button-with-spinner [loading]="isSynchronizing()" slot="end">
-                        <ion-button fill="clear" (click)="synchronize()" [attr.aria-label]="'core.settings.synchronizenow' | translate"
+                        <ion-button fill="clear" (click)="synchronize()" [ariaLabel]="'core.settings.synchronizenow' | translate"
                             [disabled]="!isOnline || (dataSaver && limitedConnection)">
                             <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                         </ion-button>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index 44b02e537..8a703469b 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -8,7 +8,7 @@
         </ion-title>
         <ion-buttons slot="end">
             <core-navbar-buttons>
-                <ion-button (click)="showInfo()" [attr.aria-label]="'core.info' | translate">
+                <ion-button (click)="showInfo()" [ariaLabel]="'core.info' | translate">
                     <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
                 </ion-button>
             </core-navbar-buttons>
@@ -55,11 +55,11 @@
                     <ng-template #siteItem let-site="site">
                         <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end" *ngIf="!site.loggedOut">
                             <ion-button fill="clear" (click)="synchronize(site.id)"
-                                [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                                [ariaLabel]="'core.settings.synchronizenow' | translate">
                                 <ion-icon name="fas-rotate" slot="icon-only" aria-hidden="true" />
                             </ion-button>
                         </core-button-with-spinner>
-                        <ion-button fill="clear" (click)="login(site.id)" [attr.aria-label]="'core.login.login' | translate"
+                        <ion-button fill="clear" (click)="login(site.id)" [ariaLabel]="'core.login.login' | translate"
                             *ngIf="site.loggedOut" slot="end">
                             <ion-icon name="fas-right-to-bracket" slot="icon-only" aria-hidden="true" />
                         </ion-button>
diff --git a/src/core/features/sharedfiles/components/list-modal/list-modal.html b/src/core/features/sharedfiles/components/list-modal/list-modal.html
index 49c0406f0..600c9064f 100644
--- a/src/core/features/sharedfiles/components/list-modal/list-modal.html
+++ b/src/core/features/sharedfiles/components/list-modal/list-modal.html
@@ -4,7 +4,7 @@
             <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 884f0e8fd..6190b15c3 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -1,5 +1,5 @@
 <core-navbar-buttons slot="end" prepend>
-    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
+    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [ariaLabel]="'core.courses.searchcourses' | translate">
         <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
index b5cb3a882..cee8e615e 100644
--- a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
+++ b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons slot="end">
-    <ion-button fill="clear" (click)="openModuleSummary()" [attr.aria-label]="'core.info' | translate">
+    <ion-button fill="clear" (click)="openModuleSummary()" [ariaLabel]="'core.info' | translate">
         <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
     </ion-button>
 </core-navbar-buttons>
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 6617eae5d..f068fdc3e 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -18,7 +18,7 @@
                 <ion-label>
                     <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
                         <ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
-                            [attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
+                            [ariaLabel]="'core.user.newpicture' | translate" fill="clear">
                             <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true" />
                         </ion-button>
                     </core-user-avatar>
diff --git a/src/core/features/user/pages/complete-profile/complete-profile.html b/src/core/features/user/pages/complete-profile/complete-profile.html
index c3d28949c..f3ecb7ef3 100644
--- a/src/core/features/user/pages/complete-profile/complete-profile.html
+++ b/src/core/features/user/pages/complete-profile/complete-profile.html
@@ -10,7 +10,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [ariaLabel]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index b3ba23c73..6bf663b19 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -10,18 +10,18 @@
 <ion-footer>
     <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
         <ion-col size="auto">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
         <ion-col />
         <ion-col size="auto" *ngIf="swiper">
-            <ion-button fill="clear" [attr.aria-label]="'core.zoomout' | translate" (click)="zoom(false)">
+            <ion-button fill="clear" [ariaLabel]="'core.zoomout' | translate" (click)="zoom(false)">
                 <ion-icon name="fas-magnifying-glass-minus" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
         <ion-col size="auto" *ngIf="swiper">
-            <ion-button fill="clear" [attr.aria-label]="'core.zoomin' | translate" (click)="zoom(true)">
+            <ion-button fill="clear" [ariaLabel]="'core.zoomin' | translate" (click)="zoom(true)">
                 <ion-icon name="fas-magnifying-glass-plus" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-col>
diff --git a/src/core/features/viewer/components/qr-scanner/qr-scanner.html b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
index 82bc299d9..7ad4fa7d4 100644
--- a/src/core/features/viewer/components/qr-scanner/qr-scanner.html
+++ b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
@@ -4,7 +4,7 @@
             <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index 7753bb032..d5ac719c2 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -4,7 +4,7 @@
             <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
             </ion-button>
         </ion-buttons>
diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index cb97417eb..e73338425 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -299,9 +299,6 @@ export class CoreDomUtilsProvider {
     async focusElement(
         element: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement | HTMLIonButtonElement | HTMLElement,
     ): Promise<void> {
-        let retries = 10;
-
-        const isIonButton = element.tagName === 'ION-BUTTON';
         let elementToFocus = element;
 
         /**
@@ -318,6 +315,7 @@ export class CoreDomUtilsProvider {
             }
         }
 
+        const isIonButton = element.tagName === 'ION-BUTTON';
         if ('getInputElement' in elementToFocus) {
             // If it's an Ionic element get the right input to use.
             elementToFocus.componentOnReady && await elementToFocus.componentOnReady();
@@ -332,6 +330,7 @@ export class CoreDomUtilsProvider {
             throw new CoreError('Element to focus cannot be focused');
         }
 
+        let retries = 10;
         while (retries > 0 && elementToFocus !== document.activeElement) {
             elementToFocus.focus();
 
diff --git a/src/theme/components/ion-accordion.scss b/src/theme/components/ion-accordion.scss
new file mode 100644
index 000000000..a98b14b0e
--- /dev/null
+++ b/src/theme/components/ion-accordion.scss
@@ -0,0 +1,5 @@
+ion-accordion {
+    .ion-accordion-toggle-icon[slot="start"] {
+        @include margin-horizontal(null, var(--mdl-spacing-4));
+    }
+}
diff --git a/src/theme/components/ion-alert.scss b/src/theme/components/ion-alert.scss
index 74c255a07..3c51f1847 100644
--- a/src/theme/components/ion-alert.scss
+++ b/src/theme/components/ion-alert.scss
@@ -73,3 +73,33 @@ ion-alert {
         padding-bottom: 0;
     }
 }
+
+ion-alert.core-alert-network-error .alert-head,
+div.core-iframe-network-error {
+    position: relative;
+    content: " ";
+    background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
+    margin: 25px auto;
+
+    h2 {
+        @include sr-only();
+    }
+
+    &::after {
+        content: " ";
+        position: absolute;
+        top: -20%;
+        right: -15%;
+        width: 50%;
+        height: 50%;
+        background-color: var(--danger);
+        -webkit-mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
+        mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
+    }
+}
+
+[dir=rtl] ion-alert.core-alert-network-error .alert-head::after,
+[dir=rtl] div.core-iframe-network-error::after {
+    right: unset;
+    left: -15%;
+}
diff --git a/src/theme/components/ion-button.scss b/src/theme/components/ion-button.scss
index 5fd9e9628..690456df3 100644
--- a/src/theme/components/ion-button.scss
+++ b/src/theme/components/ion-button.scss
@@ -103,3 +103,59 @@ ion-button {
         }
     }
 }
+
+ion-button,
+ion-fab-button,
+button,
+[role="button"] {
+    text-transform: none;
+    min-height: var(--a11y-sizing-minTargetSize);
+    min-width: var(--a11y-sizing-minTargetSize);
+
+    &.button-large {
+        min-height: 2.8em;
+        min-width: 2.8em
+    }
+}
+
+[role="button"],
+.clickable {
+    cursor: pointer;
+
+
+    [disabled],
+    [aria-disabled="true"] {
+        cursor: default;
+        opacity: var(--mdl-button-disabled-opacity);
+        pointer-events: none;
+    }
+}
+
+ion-button.core-button-as-link {
+    text-decoration: underline;
+    font-size: inherit;
+    font-weight: normal;
+    letter-spacing: normal;
+    white-space: break-spaces;
+}
+
+button.as-link {
+    display: inline;
+    min-height: auto;
+    min-width: auto;
+    color: var(--core-link-color);
+    background: none;
+    border: 0;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+    text-align: start;
+    font-size: inherit;
+}
+
+
+button[disabled] {
+    cursor: default;
+    opacity: var(--mdl-button-disabled-opacity);
+    pointer-events: none;
+}
diff --git a/src/theme/components/ion-checkbox.scss b/src/theme/components/ion-checkbox.scss
index 1105a5550..80afa1d8f 100644
--- a/src/theme/components/ion-checkbox.scss
+++ b/src/theme/components/ion-checkbox.scss
@@ -16,12 +16,20 @@ input[type=checkbox] {
 }
 
 ion-checkbox {
-    &.md.checkbox-disabled::part(label),
-    &.ios.checkbox-disabled {
-        opacity: var(--mdl-input-disabled-opacity);
+    &.checkbox-disabled {
+        @include pointer-events-on-buttons();
+
+        &.md::part(label),
+        &.ios {
+            opacity: var(--mdl-input-disabled-opacity);
+        }
     }
 }
 
 .ios input[type=checkbox] {
     --outer-border-width: 1px;
 }
+
+input[type=checkbox][disabled] {
+    opacity: var(--mdl-input-disabled-opacity);
+}
diff --git a/src/theme/components/ion-input.scss b/src/theme/components/ion-input.scss
index 6675453f4..24fef008b 100644
--- a/src/theme/components/ion-input.scss
+++ b/src/theme/components/ion-input.scss
@@ -3,3 +3,8 @@ ion-input {
         opacity: var(--mdl-input-disabled-opacity);
     }
 }
+
+input[disabled],
+input[readonly] {
+    opacity: var(--mdl-input-disabled-opacity);
+}
diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index b7f13dd2b..80c2d492b 100644
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@@ -47,6 +47,10 @@ ion-item.item {
     &.item-has-interactive-control:focus-within {
         @include core-focus-outline();
     }
+
+    &.item-has-interactive-control.item-interactive-disabled {
+        pointer-events: none;
+    }
 }
 
 // Fake item.
@@ -246,6 +250,22 @@ ion-item.item.item-file {
     [slot=end] {
         @include margin-horizontal(var(--mdl-spacing-4), null);
     }
+
+    // Disabled items.
+    &.item-disabled,
+    &.item-interactive-disabled:not(.item-multiple-inputs) ion-label {
+        opacity: var(--mdl-item-disabled-opacity) !important;
+    }
+
+    // No highlight on RTE.
+    &.item-rte {
+        --full-highlight-height: 0px !important;
+    }
+
+    &.item-multiple-inputs.only-links  a {
+        cursor: pointer;
+    }
+
 }
 
 .item-dimmed {
@@ -255,56 +275,3 @@ ion-item.item.item-file {
         --background: var(--light);
     }
 }
-
-// No highlight on RTE.
-ion-item.item-rte {
-    --full-highlight-height: 0px !important;
-}
-
-// Make links clickable when inside radio or checkbox items. Style part.
-@media (hover: hover) {
-    ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {
-        color: var(--color-hover);
-
-        &::after {
-            background: var(--background-hover);
-            opacity: var(--background-hover-opacity);
-        }
-    }
-
-    ion-item.ion-color.item-multiple-inputs:hover::part(native) {
-        color: #{current-color(contrast)};
-
-        &::after {
-            background: #{current-color(contrast)};
-        }
-    }
-}
-
-// It fixes the click on links where ion-ripple-effect is present.
-// Make links clickable when inside radio or checkbox items. Pointer and cursor part.
-ion-item.item-multiple-inputs:not(.only-links):not(.item-rte),
-ion-item.ion-activatable:not(.only-links) {
-    cursor: pointer;
-    ion-label {
-        z-index: 3;
-        pointer-events: none;
-
-        ion-anchor, a,
-        ion-button, button,
-        ion-item.ion-focusable,
-        audio, video, select, input, iframe {
-            pointer-events: visible;
-        }
-    }
-
-    ion-checkbox, ion-datetime, ion-radio, ion-select{
-        position: static;
-    }
-}
-
-ion-item.item-multiple-inputs.only-links {
-    a {
-        cursor: pointer;
-    }
-}
diff --git a/src/theme/components/ion-radio.scss b/src/theme/components/ion-radio.scss
index 92b3ca081..3050b1711 100644
--- a/src/theme/components/ion-radio.scss
+++ b/src/theme/components/ion-radio.scss
@@ -57,8 +57,16 @@ input[type=radio],
 }
 
 ion-radio {
-    &.md.radio-disabled::part(label),
-    &.ios.radio-disabled {
-        opacity: var(--mdl-input-disabled-opacity);
+    &.radio-disabled {
+        @include pointer-events-on-buttons();
+
+        &.md::part(label),
+        &.ios {
+            opacity: var(--mdl-input-disabled-opacity);
+        }
     }
 }
+
+input[type=radio][disabled] {
+    opacity: var(--mdl-input-disabled-opacity);
+}
diff --git a/src/theme/components/ion-select.scss b/src/theme/components/ion-select.scss
index d36e6ff4c..369445f9a 100644
--- a/src/theme/components/ion-select.scss
+++ b/src/theme/components/ion-select.scss
@@ -72,3 +72,7 @@ ion-select-popover {
         }
     }
 }
+
+select[disabled] {
+    opacity: var(--mdl-input-disabled-opacity);
+}
diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss
index b3e49d758..e15794e90 100644
--- a/src/theme/helpers/custom.mixins.scss
+++ b/src/theme/helpers/custom.mixins.scss
@@ -171,6 +171,20 @@
     }
 }
 
+@mixin pointer-events-on-buttons() {
+    a,
+    ion-button,
+    button,
+    audio,
+    video,
+    select,
+    input,
+    iframe,
+    [role="button"] {
+        pointer-events: visible;
+    }
+}
+
 /**
  * Same as item-push-svg-url but admits flip-rtl
  */
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 43e6b0cae..b7e12df4e 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -63,6 +63,17 @@ html[dir=rtl] {
     flex-direction: row;
 }
 
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
 .margin-bottom-sm { margin-bottom: 8px; }
 .margin-bottom-md { margin-bottom: 12px; }
 
@@ -96,94 +107,6 @@ ion-footer {
     }
 }
 
-// Buttons.
-ion-button,
-ion-fab-button,
-button,
-[role="button"] {
-    text-transform: none;
-    min-height: var(--a11y-sizing-minTargetSize);
-    min-width: var(--a11y-sizing-minTargetSize);
-
-    &.button-large {
-        min-height: 2.8em;
-        min-width: 2.8em
-    }
-}
-
-[role="button"],
-.clickable {
-    cursor: pointer;
-
-
-    [disabled],
-    [aria-disabled="true"] {
-        cursor: default;
-        opacity: var(--mdl-button-disabled-opacity);
-        pointer-events: none;
-    }
-}
-
-button[disabled] {
-    cursor: default;
-    opacity: var(--mdl-button-disabled-opacity);
-    pointer-events: none;
-}
-
-ion-button.core-button-as-link {
-    text-decoration: underline;
-    font-size: inherit;
-    font-weight: normal;
-    letter-spacing: normal;
-    white-space: break-spaces;
-}
-
-button.as-link {
-    display: inline;
-    min-height: auto;
-    min-width: auto;
-    color: var(--core-link-color);
-    background: none;
-    border: 0;
-    line-height: inherit;
-    margin: 0;
-    padding: 0;
-    text-align: start;
-    font-size: inherit;
-}
-
-
-// Ionic alert.
-ion-alert.core-alert-network-error .alert-head,
-div.core-iframe-network-error {
-    position: relative;
-    content: " ";
-    background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
-    margin: 25px auto;
-
-    h2 {
-        @include sr-only();
-    }
-
-    &::after {
-        content: " ";
-        position: absolute;
-        top: -20%;
-        right: -15%;
-        width: 50%;
-        height: 50%;
-        background-color: var(--danger);
-        -webkit-mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
-        mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
-    }
-}
-
-[dir=rtl] ion-alert.core-alert-network-error .alert-head::after,
-[dir=rtl] div.core-iframe-network-error::after {
-    right: unset;
-    left: -15%;
-}
-
 // Ionic list.
 ion-list {
     padding: 0 !important;
@@ -572,12 +495,6 @@ audio.core-media-adapt-width {
     width: 100%;
 }
 
-// Disabled items.
-ion-item.item-disabled,
-ion-item.item-interactive-disabled:not(.item-multiple-inputs) ion-label {
-    opacity: var(--mdl-item-disabled-opacity) !important;
-}
-
 ion-item-divider.item,
 ion-item.item,
 td {
@@ -773,24 +690,6 @@ video::-webkit-media-text-track-display {
     white-space: normal !important;
 }
 
-/*
-* This is to solve popver issue in chrome 114
-* For more info see: https://github.com/ionic-team/ionic-framework/issues/27599
-*/
-[popover].popover-viewport {
-    display: initial;
-    position: initial;
-    margin: initial;
-    border: initial;
-    background: initial;
-    padding: initial;
-    width: initial;
-    height: initial;
-    overflow: initial;
-    inset: initial;
-    color: initial;
-}
-
 /**
  * https://github.com/ionic-team/ionic-framework/blob/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8/BREAKING.md#css-utilities
  */
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 11ccfb456..c0b1d291f 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -28,6 +28,7 @@
 
 /* Ionic components overrides */
 html {
+    @import "components/ion-accordion.scss";
     @import "components/ion-action-sheet.scss";
     @import "components/ion-alert.scss";
     @import "components/ion-back-button.scss";