From d8fa2142eaee3cb7e1af36b1c04664843bfe7714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 3 May 2021 10:08:20 +0200
Subject: [PATCH] MOBILE-3744 splitview: Change selected item to aria-current
 attribute

---
 src/addons/badges/pages/user-badges/user-badges.html   |  4 ++--
 src/addons/calendar/pages/list/list.html               |  3 ++-
 .../competency/pages/competencies/competencies.html    |  2 +-
 src/addons/competency/pages/planlist/planlist.html     |  2 +-
 src/addons/messages/pages/contacts-35/contacts.html    |  2 +-
 src/addons/messages/pages/contacts/contacts.html       |  4 ++--
 .../messages/pages/discussions-35/discussions.html     |  4 ++--
 .../pages/group-conversations/group-conversations.html |  4 ++--
 src/addons/messages/pages/search/search.html           |  2 +-
 .../assign/pages/submission-list/submission-list.html  |  2 +-
 src/addons/mod/book/components/toc/toc.html            |  2 +-
 src/addons/mod/chat/pages/sessions/sessions.html       |  2 +-
 .../mod/feedback/pages/respondents/respondents.html    |  4 ++--
 src/addons/mod/forum/components/index/index.html       |  2 +-
 .../sort-order-selector/sort-order-selector.html       |  6 +++---
 .../components/index/addon-mod-glossary-index.html     |  5 +++--
 src/addons/mod/imscp/components/toc/toc.html           |  2 +-
 .../mod/lesson/components/menu-modal/menu-modal.html   |  2 +-
 .../components/navigation-modal/navigation-modal.html  |  2 +-
 src/addons/mod/scorm/components/toc/toc.html           |  2 +-
 src/addons/mod/wiki/components/map/map.html            |  2 +-
 .../subwiki-picker/addon-mod-wiki-subwiki-picker.html  |  2 +-
 src/addons/mod/workshop/components/phase/phase.html    |  2 +-
 src/core/classes/page-items-list-manager.ts            | 10 ++++++++++
 .../components/section-selector/section-selector.html  |  2 +-
 src/core/features/grades/pages/course/course.html      |  2 +-
 src/core/features/grades/pages/course/course.scss      |  4 ++--
 src/core/features/grades/pages/courses/courses.html    |  2 +-
 src/core/features/settings/pages/index/index.html      |  2 +-
 src/core/features/settings/pages/site/site.html        |  2 +-
 .../settings/pages/space-usage/space-usage.html        |  2 +-
 .../pages/synchronization/synchronization.html         |  2 +-
 src/core/features/tag/pages/index/index.html           |  2 +-
 .../features/user/pages/participants/participants.html |  2 +-
 src/theme/theme.base.scss                              |  7 ++-----
 35 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/addons/badges/pages/user-badges/user-badges.html b/src/addons/badges/pages/user-badges/user-badges.html
index 64229acbb..cb0b04f47 100644
--- a/src/addons/badges/pages/user-badges/user-badges.html
+++ b/src/addons/badges/pages/user-badges/user-badges.html
@@ -17,8 +17,8 @@
             </core-empty-box>
 
             <ion-list *ngIf="!badges.empty"  class="ion-no-margin">
-                <ion-item class="ion-text-wrap" *ngFor="let badge of badges.items" [title]="badge.name"
-                    (click)="badges.select(badge)" [class.core-selected-item]="badges.isSelected(badge)">
+                <ion-item button class="ion-text-wrap" *ngFor="let badge of badges.items" [title]="badge.name"
+                    (click)="badges.select(badge)" [attr.aria-current]="badges.getItemAriaCurrent(badge)">
                     <ion-avatar slot="start">
                         <img [src]="badge.badgeurl" [alt]="badge.name" core-external-content>
                     </ion-avatar>
diff --git a/src/addons/calendar/pages/list/list.html b/src/addons/calendar/pages/list/list.html
index d3b47c8ae..51c339400 100644
--- a/src/addons/calendar/pages/list/list.html
+++ b/src/addons/calendar/pages/list/list.html
@@ -43,7 +43,8 @@
                         <ion-label>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</ion-label>
                     </ion-item-divider>
                     <ion-item class="addon-calendar-event ion-text-wrap" [title]="event.name" (click)="gotoEvent(event.id)"
-                    [class.core-selected-item]="event.id == eventId" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
+                        [attr.aria-current]="event.id == eventId ? 'page' : 'false'"
+                        [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                         <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" slot="start" class="core-module-icon" alt=""
                             role="presentation">
                         <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
diff --git a/src/addons/competency/pages/competencies/competencies.html b/src/addons/competency/pages/competencies/competencies.html
index 7d75f4d31..94cfd0548 100644
--- a/src/addons/competency/pages/competencies/competencies.html
+++ b/src/addons/competency/pages/competencies/competencies.html
@@ -15,7 +15,7 @@
             <ion-list>
                 <ion-item class="ion-text-wrap" *ngFor="let competency of competencies.items"
                     [title]="competency.competency.shortname" (click)="competencies.select(competency)"
-                    [class.core-selected-item]="competencies.isSelected(competency)">
+                    [attr.aria-current]="competencies.getItemAriaCurrent(competency)">
                     <ion-label>
                         <h2>{{ competency.competency.shortname }} <em>{{competency.competency.idnumber}}</em></h2>
                     </ion-label>
diff --git a/src/addons/competency/pages/planlist/planlist.html b/src/addons/competency/pages/planlist/planlist.html
index f4b32b223..6293d9d48 100644
--- a/src/addons/competency/pages/planlist/planlist.html
+++ b/src/addons/competency/pages/planlist/planlist.html
@@ -17,7 +17,7 @@
             </core-empty-box>
             <ion-list *ngIf="!plans.empty"  class="ion-no-margin">
                 <ion-item class="ion-text-wrap" *ngFor="let plan of plans.items" [title]="plan.name" (click)="plans.select(plan)"
-                    [class.core-selected-item]="plans.isSelected(plan)">
+                    [attr.aria-current]="plans.getItemAriaCurrent(plan)">
                     <ion-label>
                         <h2>{{ plan.name }}</h2>
                         <p *ngIf="plan.duedate > 0">
diff --git a/src/addons/messages/pages/contacts-35/contacts.html b/src/addons/messages/pages/contacts-35/contacts.html
index c4eab56bd..6dbe14d65 100644
--- a/src/addons/messages/pages/contacts-35/contacts.html
+++ b/src/addons/messages/pages/contacts-35/contacts.html
@@ -39,7 +39,7 @@
                         <ion-item class="ion-text-wrap addon-messages-conversation-item"
                             *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
                             [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" detail
-                            [class.core-selected-item]="contact.id == discussionUserId">
+                            [attr.aria-current]="contact.id == discussionUserId ? 'page' :  'false'">
                             <core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
                             <ion-label><h2>{{ contact.fullname }}</h2></ion-label>
                         </ion-item>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index e80cd7637..f491ffb2b 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -28,7 +28,7 @@
                         <ion-list  class="ion-no-margin">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item"
                                 *ngFor="let contact of confirmedContacts" [title]="contact.fullname" detail
-                                (click)="selectUser(contact.id)" [class.core-selected-item]="contact.id == selectedUserId">
+                                (click)="selectUser(contact.id)" [attr.aria-current]="contact.id == selectedUserId ? 'page' :  'false'">
                                 <core-user-avatar slot="start" [user]="contact"
                                     [checkOnline]="contact.showonlinestatus" [linkProfile]="false">
                                 </core-user-avatar>
@@ -65,7 +65,7 @@
                         <ion-list  class="ion-no-margin">
                             <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
                                 [title]="request.fullname" (click)="selectUser(request.id)"
-                                [class.core-selected-item]="request.id == selectedUserId" detail>
+                                [attr.aria-current]="request.id == selectedUserId ? 'page' :  'false'" detail>
                                 <core-user-avatar slot="start" [user]="request" [linkProfile]="false"></core-user-avatar>
                                 <ion-label>
                                     <core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0">
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index 68f7cbabc..5598649a0 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -40,7 +40,7 @@
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let result of search.results" [title]="result.fullname"
                         (click)="gotoDiscussion(result.userid, result.messageid)"
-                        [class.core-selected-item]="result.userid == discussionUserId">
+                        [attr.aria-current]="result.userid == discussionUserId ? 'page' :  'false'">
                         <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
                         <ion-label>
                                 <h2>{{ result.fullname }}</h2>
@@ -52,7 +52,7 @@
                 <ng-container *ngIf="!search.showResults">
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions"
                         [title]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
-                        [class.core-selected-item]="discussion.message!.user == discussionUserId">
+                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' :  'false'">
                         <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                         <ion-label>
                             <h2>{{ discussion.fullname }}</h2>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 386bb41f2..a89bc0a34 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -108,8 +108,8 @@
 <ng-template #conversationsTemplate let-conversations="conversations">
     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" [title]="conversation.name"
         (click)="gotoConversation(conversation.id, conversation.userid)"
-        [class.core-selected-item]="(conversation.id && conversation.id == selectedConversationId) ||
-            (conversation.userid && conversation.userid == selectedUserId)"
+        [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
+            (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
         id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
         <!-- Group conversation image. -->
         <ion-avatar slot="start" *ngIf="conversation.type == typeGroup">
diff --git a/src/addons/messages/pages/search/search.html b/src/addons/messages/pages/search/search.html
index c76172382..2ff576337 100644
--- a/src/addons/messages/pages/search/search.html
+++ b/src/addons/messages/pages/search/search.html
@@ -43,7 +43,7 @@
 
         <!-- List of results -->
         <ion-item class="addon-message-discussion ion-text-wrap" *ngFor="let result of item.results" [title]="result.fullname"
-            (click)="openConversation(result)" [class.core-selected-item]="result == selectedResult" detail>
+            (click)="openConversation(result)" [attr.aria-current]="result == selectedResult ? 'page' :  'false'" detail>
             <core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
             <ion-label>
                 <h2>
diff --git a/src/addons/mod/assign/pages/submission-list/submission-list.html b/src/addons/mod/assign/pages/submission-list/submission-list.html
index 1f7c38d82..dd7bb62f2 100644
--- a/src/addons/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addons/mod/assign/pages/submission-list/submission-list.html
@@ -40,7 +40,7 @@
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions.items">
                     <ion-item class="ion-text-wrap" (click)="submissions.select(submission)"
-                        [class.core-selected-item]="submissions.isSelected(submission)">
+                        [attr.aria-current]="submissions.getItemAriaCurrent(submission)">
                         <core-user-avatar [user]="submission" [linkProfile]="false" slot="start"></core-user-avatar>
                         <ion-label>
                             <h2 *ngIf="submission.userfullname">{{submission.userfullname}}</h2>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 9a1e64faf..207737c4b 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -12,7 +12,7 @@
     <nav>
         <ion-list>
             <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)"
-                [class.core-selected-item]="selected == chapter.id"
+                [attr.aria-current]="selected == chapter.id ? 'page' :  'false'"
                 [class.item-dimmed]="chapter.hidden">
                 <ion-label>
                     <p [class.ion-padding-left]="addPadding && chapter.level == 1 ? true : null">
diff --git a/src/addons/mod/chat/pages/sessions/sessions.html b/src/addons/mod/chat/pages/sessions/sessions.html
index 19257abc0..6c8427d5b 100644
--- a/src/addons/mod/chat/pages/sessions/sessions.html
+++ b/src/addons/mod/chat/pages/sessions/sessions.html
@@ -31,7 +31,7 @@
             </ion-item>
 
             <ion-card *ngFor="let session of sessions.items" (click)="sessions.select(session)"
-                [class.core-selected-item]="sessions.isSelected(session)"
+                [attr.aria-current]="sessions.getItemAriaCurrent(session)"
                 [class.addon-mod-chat-session-show-more]="session.sessionusers.length < session.allsessionusers.length">
 
                 <ion-item class="ion-text-wrap">
diff --git a/src/addons/mod/feedback/pages/respondents/respondents.html b/src/addons/mod/feedback/pages/respondents/respondents.html
index 46cb7eb3f..46064b591 100644
--- a/src/addons/mod/feedback/pages/respondents/respondents.html
+++ b/src/addons/mod/feedback/pages/respondents/respondents.html
@@ -33,7 +33,7 @@
                         </ion-label>
                     </ion-item-divider>
                     <ion-item *ngFor="let attempt of responses.responses.attempts" class="ion-text-wrap" tappable detail="true"
-                        (click)="responses.select(attempt)" [class.core-selected-item]="responses.isSelected(attempt)">
+                        (click)="responses.select(attempt)" [attr.aria-current]="responses.getItemAriaCurrent(attempt)">
                         <core-user-avatar [user]="attempt" slot="start"></core-user-avatar>
                         <ion-label>
                             <h2>{{ attempt.fullname }}</h2>
@@ -58,7 +58,7 @@
                         </ion-label>
                     </ion-item-divider>
                     <ion-item *ngFor="let attempt of responses.anonResponses.attempts" class="ion-text-wrap" tappable detail="true"
-                        (click)="responses.select(attempt)" [class.core-selected-item]="responses.isSelected(attempt)">
+                        (click)="responses.select(attempt)" [attr.aria-current]="responses.getItemAriaCurrent(attempt)">
                         <ion-label>
                             <h2>{{ 'addon.mod_feedback.response_nr' |translate }}: {{attempt.number}}</h2>
                         </ion-label>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index ebce31084..d81b349da 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -80,7 +80,7 @@
 
             <ion-item *ngFor="let discussion of discussions.items"
                 class="addon-mod-forum-discussion" detail="true"
-                [lines]="discussion.groupname && 'none'" [class.core-selected-item]="discussions.isSelected(discussion)"
+                [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions.getItemAriaCurrent(discussion)"
                 (click)="discussions.select(discussion)">
                 <ion-label>
                     <div class="addon-mod-forum-discussion-title">
diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
index 5718a799f..e80bf2980 100644
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
@@ -11,9 +11,9 @@
 <ion-content>
     <ion-list id="addon-mod-forum-sort-selector" role="menu" aria-labelledby="addon-mod-forum-sort-order-button">
         <ng-container *ngFor="let sortOrder of sortOrders">
-            <ion-item class="ion-text-wrap" detail="false" role="combobox" button aria-haspopup="dialog"
-                [attr.aria-current]="selected == sortOrder.value ? 'page' :  'false'"
-                [attr.aria-label]="sortOrder.label | translate" (click)="selectSortOrder(sortOrder)">
+            <ion-item class="ion-text-wrap" detail="false" role="combobox"
+                [attr.aria-current]="selected == sortOrder.value ? 'page' :  'false'" [attr.aria-label]="sortOrder.label | translate"
+                (click)="selectSortOrder(sortOrder)" button aria-haspopup="dialog">
                 <ion-label>
                     <h2>{{ sortOrder.label | translate }}</h2>
                 </ion-label>
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 719cd2097..2259c830b 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
@@ -67,7 +67,7 @@
                 <ion-label>{{ 'addon.mod_glossary.entriestobesynced' | translate }}</ion-label>
             </ion-item-divider>
             <ion-item *ngFor="let entry of entries.offlineEntries" (click)="entries.select(entry)" detail="false"
-                [class.core-selected-item]="entries.isSelected(entry)">
+                [attr.aria-current]="entries.getItemAriaCurrent(entry)">
                 <ion-label>
                     <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                         [courseId]="courseId">
@@ -82,7 +82,8 @@
                     {{ getDivider!(entry) }}
                 </ion-item-divider>
 
-                <ion-item (click)="entries.select(entry)" [class.core-selected-item]="entries.isSelected(entry)" detail="false">
+                <ion-item button (click)="entries.select(entry)" [attr.aria-current]="entries.getItemAriaCurrent(entry)"
+                    detail="false">
                     <ion-label>
                         <core-format-text [text]="entry.concept" contextLevel="module" [contextInstanceId]="glossary!.coursemodule"
                             [courseId]="courseId">
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index 2931c1b00..07be9fa5f 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -12,7 +12,7 @@
     <nav>
         <ion-list>
             <ion-item *ngFor="let item of items" (click)="loadItem(item.href)"
-                [class.core-selected-item]="selected == item.href">
+                [attr.aria-current]="selected == item.href ? 'page' :  'false'">
                 <ion-label [class.core-bold]="!item.href">
                     <span class="ion-padding-left" *ngFor="let i of getNumberForPadding(item.level)"></span>{{item.title}}
                 </ion-label>
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 bf7492b03..7e9108370 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -33,7 +33,7 @@
                 <div *ngIf="!pageInstance.loadingMenu">
                     <ng-container *ngFor="let page of pageInstance.lessonPages">
                         <ion-item class="ion-text-wrap" *ngIf="page.display && page.displayinmenublock" (click)="loadPage(page.id)"
-                            [ngClass]='{"core-selected-item": !pageInstance.eolData && pageInstance.currentPage == page.id}'
+                            [attr.aria-current]="!pageInstance.eolData && pageInstance.currentPage == page.id ? 'page' : 'false'"
                             button detail="true">
                             <ion-label>
                                 <core-format-text [text]="page.title" contextLevel="module" [courseId]="pageInstance.courseId"
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 773827622..cc373e4ce 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -26,7 +26,7 @@
             </ion-item>
 
             <ion-item button class="ion-text-wrap {{question.stateClass}}" *ngFor="let question of navigation"
-                [ngClass]='{"core-selected-item": !summaryShown && currentPage == question.page}'
+                [attr.aria-current]="!summaryShown && currentPage == question.page ? 'page' : 'false'"
                 (click)="loadPage(question.page, question.slot)" detail="true">
 
                 <ion-label>
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index 9de84c25e..d8c6876d8 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -31,7 +31,7 @@
             <ng-container *ngFor="let sco of toc">
                 <ion-item *ngIf="sco.isvisible" class="ion-text-wrap" [detail]="sco.prereq && sco.launch"
                     [ngClass]="'core-padding-' + sco.level + ' addon-mod_scorm-type-' + sco.scormtype"
-                    [class.core-selected-item]="selected == sco.id" (click)="loadSco(sco)"
+                    [attr.aria-current]="selected == sco.id ? 'page' :  'false'" (click)="loadSco(sco)"
                     [disabled]="!sco.prereq || !sco.launch ? true : null" tappable>
                     <ion-icon *ngIf="sco.icon" [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start">
                     </ion-icon>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index 169e0ea38..6053fafd9 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -21,7 +21,7 @@
                     <ion-label>{{ letter.label }}</ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let page of letter.pages" (click)="goToPage(page)"
-                    [class.core-selected-item]="selectedTitle == page.title" tappable>
+                    [attr.aria-current]="selectedTitle == page.title ? 'page' :  'false'" tappable>
                     <ion-icon name="fas-home" slot="start" *ngIf="page.firstpage" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <core-format-text [text]="page.title" contextLevel="module" [contextInstanceId]="moduleId"
diff --git a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index ec970f130..49eecc3ca 100644
--- a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -5,7 +5,7 @@
         </ion-item-divider>
         <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)"
             [attr.disabled]="!subwiki.canedit && subwiki.id <= 0 ? true : null" tappable
-            [class.core-selected-item]="isSubwikiSelected(subwiki)" detail="false">
+            [attr.aria-current]="isSubwikiSelected(subwiki) ? 'page' :  'false'" detail="false">
             <ion-label>{{ subwiki.name }}</ion-label>
             <ion-icon *ngIf="isSubwikiSelected(subwiki)" name="fas-check" slot="end" aria-hidden="true"></ion-icon>
         </ion-item>
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index a505159ab..c322e1f06 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -14,7 +14,7 @@
 <ion-content>
     <ion-list>
         <ng-container *ngFor="let phase of phases">
-            <ion-item-divider [class.core-selected-item]="workshopPhase == phase.code">
+            <ion-item-divider [attr.aria-current]="workshopPhase == phase.code ? 'page' :  'false'">
                 <ion-label>
                     <h2>{{ phase.title }}</h2>
                     <p class="ion-text-wrap" *ngIf="workshopPhase == phase.code">
diff --git a/src/core/classes/page-items-list-manager.ts b/src/core/classes/page-items-list-manager.ts
index 06aa266ed..d7f4afd20 100644
--- a/src/core/classes/page-items-list-manager.ts
+++ b/src/core/classes/page-items-list-manager.ts
@@ -121,6 +121,16 @@ export abstract class CorePageItemsListManager<Item> {
         return this.selectedItem === item;
     }
 
+    /**
+     * Return the current aria value.
+     *
+     * @param item Item.
+     * @return Will return the current value of the item if selected, false otherwise.
+     */
+    getItemAriaCurrent(item: Item): string {
+        return this.isSelected(item) ? 'page' : 'false';
+    }
+
     /**
      * Select an item.
      *
diff --git a/src/core/features/course/components/section-selector/section-selector.html b/src/core/features/course/components/section-selector/section-selector.html
index 964ed6be8..c7d6a3feb 100644
--- a/src/core/features/course/components/section-selector/section-selector.html
+++ b/src/core/features/course/components/section-selector/section-selector.html
@@ -12,7 +12,7 @@
     <ion-list id="core-course-section-selector">
         <ng-container *ngFor="let section of sections">
             <ion-item *ngIf="!section.hiddenbynumsections && section.id != stealthModulesSectionId" class="ion-text-wrap"
-                (click)="selectSection(section)" [class.core-selected-item]="selected?.id == section.id"
+                (click)="selectSection(section)" [attr.aria-current]="selected?.id == section.id ? 'page' :  'false'"
                 [class.item-dimmed]="section.visible === 0 || section.uservisible === false" detail="false"
                 [attr.aria-hidden]="section.uservisible === false" button>
 
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 05f84958b..7b99e353a 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -45,7 +45,7 @@
                                 <th
                                     class="core-grades-table-gradeitem ion-text-start"
                                     [class.column-itemname]="row.itemtype == 'category'"
-                                    [class.core-selected-item]="grades.isSelected(row)"
+                                    [attr.aria-current]="grades.getItemAriaCurrent(row)"
                                     [attr.colspan]="row.colspan"
                                 >
                                     <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index b1d430403..308fbe906 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -90,7 +90,7 @@
 
     .odd {
 
-        td, th, th.core-selected-item {
+        td, th, th[aria-current="page"] {
             background-color: var(--gray-lighter);
 
             // @include darkmode() {
@@ -102,7 +102,7 @@
 
     .even {
 
-        td, th, th.core-selected-item {
+        td, th, th[aria-current="page"] {
             background-color: var(--white);
 
             // @include darkmode() {
diff --git a/src/core/features/grades/pages/courses/courses.html b/src/core/features/grades/pages/courses/courses.html
index b6b2bb494..9f0114767 100644
--- a/src/core/features/grades/pages/courses/courses.html
+++ b/src/core/features/grades/pages/courses/courses.html
@@ -22,7 +22,7 @@
                 <ion-item
                     *ngFor="let course of courses.items"
                     [title]="course.courseFullName"
-                    [class.core-selected-item]="courses.isSelected(course)"
+                    [attr.aria-current]="courses.getItemAriaCurrent(course)"
                     class="ion-text-wrap"
                     button
                     detail
diff --git a/src/core/features/settings/pages/index/index.html b/src/core/features/settings/pages/index/index.html
index a8ea2107c..d66b2cf89 100644
--- a/src/core/features/settings/pages/index/index.html
+++ b/src/core/features/settings/pages/index/index.html
@@ -10,7 +10,7 @@
 <ion-content>
     <core-split-view>
         <ion-list>
-            <ion-item *ngFor="let section of sections.items" [class.core-selected-item]="sections.isSelected(section)" button
+            <ion-item *ngFor="let section of sections.items" [attr.aria-current]="sections.getItemAriaCurrent(section)" button
                 detail="true" (click)="sections.select(section)">
                 <ion-icon [name]="section.icon" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>{{ section.name | translate }}</ion-label>
diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index 1ffff4cda..38aa2f1b4 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -29,7 +29,7 @@
 
                 <ion-item *ngFor="let handler of handlers.items" [ngClass]="['core-settings-handler', handler.class]"
                     [title]="handler.title | translate" detail="true" (click)="handlers.select(handler)" button
-                    [class.core-selected-item]="handlers.isSelected(handler)">
+                    [attr.aria-current]="handlers.getItemAriaCurrent(handler)">
                     <ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon" aria-hidden="true">
                     </ion-icon>
                     <ion-label>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 266f15d68..a688d6d3e 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -18,7 +18,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
-        <ion-item *ngFor="let site of sites" [class.core-selected-item]="site.id == currentSiteId">
+        <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' :  'false'">
             <ion-label class="ion-text-wrap">
                 <h2>
                     <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index aeeafbf83..1a0276b5e 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -30,7 +30,7 @@
                 <h2>{{ 'core.settings.sites' | translate }}</h2>
             </ion-label>
         </ion-item-divider>
-        <ion-item *ngFor="let site of sites" [class.core-selected-item]="site.id == currentSiteId" class="ion-text-wrap">
+        <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' :  'false'" class="ion-text-wrap">
             <ion-label>
                 <h2>
                     <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
diff --git a/src/core/features/tag/pages/index/index.html b/src/core/features/tag/pages/index/index.html
index 17c94e4cb..58799680c 100644
--- a/src/core/features/tag/pages/index/index.html
+++ b/src/core/features/tag/pages/index/index.html
@@ -19,7 +19,7 @@
                     <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let area of areas" [title]="area.nameKey | translate"
-                    (click)="openArea(area)" [class.core-selected-item]="area!.id == selectedAreaId">
+                    (click)="openArea(area)" [attr.aria-current]="area!.id == selectedAreaId ? 'page' :  'false'">
                     <ion-label>
                         <h2>{{ area!.nameKey | translate }}</h2>
                     </ion-label>
diff --git a/src/core/features/user/pages/participants/participants.html b/src/core/features/user/pages/participants/participants.html
index da2656d4a..73d39a6bb 100644
--- a/src/core/features/user/pages/participants/participants.html
+++ b/src/core/features/user/pages/participants/participants.html
@@ -28,7 +28,7 @@
 
             <ion-list *ngIf="!participants.empty">
                 <ion-item *ngFor="let participant of participants.items"
-                    class="ion-text-wrap" [class.core-selected-item]="participants.isSelected(participant)"
+                    class="ion-text-wrap" [attr.aria-current]="participants.getItemAriaCurrent(participant)"
                     [title]="participant.fullname" (click)="participants.select(participant)">
 
                     <core-user-avatar [user]="participant" [linkProfile]="false" [checkOnline]="true" slot="start">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 285521bd4..8ab2de7ad 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -215,14 +215,11 @@ ion-toolbar {
     font-size: 14px;
 }
 
-.core-selected-item {
-    border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
-}
-
 // Item styles
-.item.core-selected-item {
+[aria-current="page"] {
     // TODO: Add safe area to border and RTL
     --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
+    border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
 }
 
 .item.item-file {