From e7b61672f1d6d7d469bf604272e548e2c4757f24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 6 May 2021 10:56:20 +0200
Subject: [PATCH] MOBILE-3745 a11y: Use fill clear on top toolbar buttons

---
 src/addons/calendar/pages/day/day.html                      | 2 +-
 src/addons/calendar/pages/index/index.html                  | 2 +-
 src/addons/calendar/pages/list/list.html                    | 2 +-
 .../components/conversation-info/conversation-info.html     | 2 +-
 src/addons/messages/pages/contacts/contacts.html            | 2 +-
 .../pages/group-conversations/group-conversations.html      | 2 +-
 .../components/edit-feedback-modal/edit-feedback-modal.html | 2 +-
 src/addons/mod/book/components/toc/toc.html                 | 2 +-
 src/addons/mod/chat/components/users-modal/users-modal.html | 2 +-
 src/addons/mod/chat/pages/chat/chat.html                    | 2 +-
 src/addons/mod/data/components/search/search.html           | 2 +-
 src/addons/mod/forum/components/edit-post/edit-post.html    | 2 +-
 .../components/sort-order-selector/sort-order-selector.html | 2 +-
 src/addons/mod/imscp/components/toc/toc.html                | 2 +-
 src/addons/mod/lesson/components/menu-modal/menu-modal.html | 2 +-
 .../lesson/components/password-modal/password-modal.html    | 2 +-
 src/addons/mod/lesson/pages/player/player.html              | 2 +-
 .../quiz/components/navigation-modal/navigation-modal.html  | 2 +-
 .../quiz/components/preflight-modal/preflight-modal.html    | 2 +-
 src/addons/mod/quiz/pages/player/player.html                | 6 +++---
 src/addons/mod/quiz/pages/review/review.html                | 2 +-
 src/addons/mod/scorm/components/toc/toc.html                | 2 +-
 src/addons/mod/scorm/pages/player/player.html               | 2 +-
 src/addons/mod/wiki/components/map/map.html                 | 2 +-
 src/addons/mod/workshop/components/phase/phase.html         | 2 +-
 src/addons/notes/components/add/add-modal.html              | 2 +-
 src/core/components/recaptcha/core-recaptcha-modal.html     | 2 +-
 src/core/features/comments/components/add/add.html          | 2 +-
 .../components/choose-site-modal/choose-site-modal.html     | 2 +-
 .../components/section-selector/section-selector.html       | 2 +-
 .../components/self-enrol-password/self-enrol-password.html | 2 +-
 .../emulator/components/capture-media/capture-media.html    | 2 +-
 src/core/features/login/components/site-help/site-help.html | 2 +-
 .../login/components/site-onboarding/site-onboarding.html   | 4 ++--
 .../login/pages/change-password/change-password.html        | 2 +-
 src/core/features/login/pages/credentials/credentials.html  | 2 +-
 .../features/login/pages/email-signup/email-signup.html     | 2 +-
 src/core/features/login/pages/site/site.html                | 2 +-
 src/core/features/login/pages/sites/sites.html              | 2 +-
 .../features/rating/components/ratings/ratings-modal.html   | 2 +-
 src/core/features/settings/pages/deviceinfo/deviceinfo.html | 2 +-
 .../sharedfiles/components/list-modal/list-modal.html       | 2 +-
 src/core/features/viewer/components/image/image.html        | 2 +-
 .../features/viewer/components/qr-scanner/qr-scanner.html   | 2 +-
 src/core/features/viewer/components/text/text.html          | 2 +-
 src/theme/theme.base.scss                                   | 4 ++++
 46 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 6a4f49244..25aabb33e 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.calendar.calendarevents' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index 7f1718b39..c5687230a 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </ion-button>
             <core-context-menu>
diff --git a/src/addons/calendar/pages/list/list.html b/src/addons/calendar/pages/list/list.html
index e792a4dae..bb3bc6edb 100644
--- a/src/addons/calendar/pages/list/list.html
+++ b/src/addons/calendar/pages/list/list.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.calendar.calendarevents' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
                 <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
             </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 b99965dc4..129cbdcb9 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.messages.groupinfo' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html
index 278067540..381cd613d 100644
--- a/src/addons/messages/pages/contacts/contacts.html
+++ b/src/addons/messages/pages/contacts/contacts.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.messages.contacts' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
+            <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <!-- Add an empty context menu so discussion page can add items in split view, otherwise the menu
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 225cec557..a5a30b8dc 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.messages.messages' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
+            <ion-button fill="clear" (click)="gotoSearch()" [attr.aria-label]="'addon.messages.searchcombined' | translate">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button (click)="gotoSettings()" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
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 c7ae573a0..ee19a1f3b 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
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ plugin.name }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 71a07ab59..d0f84342b 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.mod_book.toc' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-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 90c23b211..dac82f510 100644
--- a/src/addons/mod/chat/components/users-modal/users-modal.html
+++ b/src/addons/mod/chat/components/users-modal/users-modal.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.mod_chat.currentusers' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 f0197175d..8ffa984d2 100644
--- a/src/addons/mod/chat/pages/chat/chat.html
+++ b/src/addons/mod/chat/pages/chat/chat.html
@@ -8,7 +8,7 @@
             </core-format-text>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
+            <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [attr.aria-label]="'core.users' | translate">
                 <ion-icon name="fas-users" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index bb2f77f52..645ef1768 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.mod_data.search' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/forum/components/edit-post/edit-post.html b/src/addons/mod/forum/components/edit-post/edit-post.html
index 28b4941f6..882dda325 100644
--- a/src/addons/mod/forum/components/edit-post/edit-post.html
+++ b/src/addons/mod/forum/components/edit-post/edit-post.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.mod_forum.yourreply' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
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 e80bf2980..9be7f44ab 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
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'core.sort' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index 90187cbf9..82772b5cb 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.mod_imscp.toc' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-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 7e9108370..421608bda 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -3,7 +3,7 @@
         <ion-title>{{ pageInstance?.lesson?.name }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/lesson/components/password-modal/password-modal.html b/src/addons/mod/lesson/components/password-modal/password-modal.html
index 052715488..13d6c63c6 100644
--- a/src/addons/mod/lesson/components/password-modal/password-modal.html
+++ b/src/addons/mod/lesson/components/password-modal/password-modal.html
@@ -3,7 +3,7 @@
         <ion-title>{{ 'core.login.password' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 b40786ff0..2e35a9298 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -9,7 +9,7 @@
             </core-format-text>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button *ngIf="displayMenu || mediaFile" [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate"
+            <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate"
                 (click)="showMenu()">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
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 cc373e4ce..0fae0ca38 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -3,7 +3,7 @@
         <ion-title>{{ 'addon.mod_quiz.quiznavigation' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 68a418869..40b872183 100644
--- a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
+++ b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
@@ -3,7 +3,7 @@
         <ion-title>{{ title | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 d9d83a79e..6b4cb8b53 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -10,7 +10,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError" (click)="showConnectionError($event)"
+            <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">
                 <ion-icon name="fas-exclamation-circle" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
@@ -30,7 +30,7 @@
             </core-timer>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button *ngIf="previousPage >= 0" (click)="changePage(previousPage)" [attr.aria-label]="'core.previous' | translate">
+            <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)" [attr.aria-label]="'core.previous' | translate">
                 <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">
@@ -43,7 +43,7 @@
         <!-- Navigation arrows if there's no timer. -->
         <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">
             <ion-buttons slot="end">
-                <ion-button *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
+                <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
                     [attr.aria-label]="'core.previous' | translate">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index fdf75869f..6ed4b8fe7 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -6,7 +6,7 @@
         <ion-title>{{ 'addon.mod_quiz.review' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
+            <ion-button fill="clear" *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
                 (click)="openNavigation()" aria-haspopup="true">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index 0a02d1831..46b28caff 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.mod_scorm.toc' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 acaf6d7f5..bf33b88fc 100644
--- a/src/addons/mod/scorm/pages/player/player.html
+++ b/src/addons/mod/scorm/pages/player/player.html
@@ -8,7 +8,7 @@
             </core-format-text>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button *ngIf="showToc && !loadingToc && toc.length" (click)="openToc()"
+            <ion-button fill="clear" *ngIf="showToc && !loadingToc && toc.length" (click)="openToc()"
                 [attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
                 <ion-icon name="fas-bookmark" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index aab584673..7e34f12ef 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.mod_wiki.map' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index ee953c812..59b0153eb 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'addon.mod_workshop.userplan' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index e0d6868d6..ad401e126 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'addon.notes.addnewnote' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/core/components/recaptcha/core-recaptcha-modal.html b/src/core/components/recaptcha/core-recaptcha-modal.html
index 74296c2a2..9d8f70aa6 100644
--- a/src/core/components/recaptcha/core-recaptcha-modal.html
+++ b/src/core/components/recaptcha/core-recaptcha-modal.html
@@ -3,7 +3,7 @@
         <ion-title>{{ 'core.login.security_question' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/comments/components/add/add.html b/src/core/features/comments/components/add/add.html
index 8d163f380..cb848f344 100644
--- a/src/core/features/comments/components/add/add.html
+++ b/src/core/features/comments/components/add/add.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'core.comments.addcomment' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-buttons>
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 c9e2a7de9..a23667308 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
@@ -5,7 +5,7 @@
         </ion-buttons>
         <ion-title>{{ 'core.contentlinks.chooseaccount' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
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 c7d6a3feb..e31d1c9e9 100644
--- a/src/core/features/course/components/section-selector/section-selector.html
+++ b/src/core/features/course/components/section-selector/section-selector.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'core.course.sections' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
index 74eea5067..5de62417d 100644
--- a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
+++ b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
@@ -3,7 +3,7 @@
         <ion-title>{{ 'core.courses.selfenrolment' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="close()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
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 95819fa7a..d3d3825e3 100644
--- a/src/core/features/emulator/components/capture-media/capture-media.html
+++ b/src/core/features/emulator/components/capture-media/capture-media.html
@@ -3,7 +3,7 @@
         <ion-title *ngIf="title">{{ title | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
+            <ion-button fill="clear" (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
             <ion-button *ngIf="hasCaptured" (click)="done()">{{ 'core.done' | translate }}</ion-button>
         </ion-buttons>
     </ion-toolbar>
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 e683a53c5..ecbc3ad2a 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -3,7 +3,7 @@
         <ion-title>{{ 'core.login.help' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeHelp()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeHelp()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 85bb6c5f0..851adbfe8 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 (click)="previous($event)" [attr.aria-label]="'core.back' | translate">
+            <ion-button fill="clear" (click)="previous($event)" [attr.aria-label]="'core.back' | translate">
                 <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
 
         <ion-buttons slot="end">
-            <ion-button (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
+            <ion-button fill="clear" (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
                 {{'core.skip' | translate}}
             </ion-button>
         </ion-buttons>
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 ce70a4fdd..a2704e19d 100644
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.changepassword' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
+            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                 <ion-icon slot="icon-only" name="far-question-circle" aria-hidden="true"></ion-icon>
             </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 8043950ab..7594c44cc 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.login' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button router-direction="forward" routerLink="/settings"
+            <ion-button fill="clear" router-direction="forward" routerLink="/settings"
                 [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-cog" aria-hidden="true"></ion-icon>
             </ion-button>
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 bde636e63..5da51c810 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.newaccount' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button *ngIf="authInstructions" (click)="showAuthInstructions()"
+            <ion-button fill="clear" *ngIf="authInstructions" (click)="showAuthInstructions()"
                 [attr.aria-label]="'core.login.instructions' | translate">
                 <ion-icon slot="icon-only" name="far-question-circle" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 60c8a4458..abd234287 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button router-direction="forward" routerLink="/settings"
+            <ion-button fill="clear" router-direction="forward" routerLink="/settings"
                 [attr.aria-label]="'core.settings.appsettings' | translate">
                 <ion-icon slot="icon-only" name="fas-cog" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index 373cf5f00..59fb663d8 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -7,7 +7,7 @@
         <ion-title>{{ 'core.settings.sites' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
+            <ion-button fill="clear" *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
                 <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button router-direction="forward" routerLink="/settings"
diff --git a/src/core/features/rating/components/ratings/ratings-modal.html b/src/core/features/rating/components/ratings/ratings-modal.html
index a8cc7fe07..a0a48dfa5 100644
--- a/src/core/features/rating/components/ratings/ratings-modal.html
+++ b/src/core/features/rating/components/ratings/ratings-modal.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ 'core.rating.ratings' | translate }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button  (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </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 6783de44d..a1fa11b74 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -7,7 +7,7 @@
             {{ 'core.settings.deviceinfo' | translate }}
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
+            <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
                 <ion-icon slot="icon-only" name="fas-clipboard" color="light" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
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 d07816245..7b0fbb7b7 100644
--- a/src/core/features/sharedfiles/components/list-modal/list-modal.html
+++ b/src/core/features/sharedfiles/components/list-modal/list-modal.html
@@ -6,7 +6,7 @@
         <ion-title>{{ title }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </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 624200036..04da60dc1 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ title }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </ion-button>
         </ion-buttons>
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 f70273deb..c42c63baf 100644
--- a/src/core/features/viewer/components/qr-scanner/qr-scanner.html
+++ b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
@@ -2,7 +2,7 @@
     <ion-toolbar>
         <ion-title>{{ title }}</ion-title>
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>
             </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 631f2c250..6bff2f20c 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -3,7 +3,7 @@
         <ion-title>{{ title }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                 <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 999118e32..b031e6ec8 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -77,6 +77,10 @@ ion-toolbar .in-toolbar.button-clear {
     --ion-toolbar-color: var(--ion-color-primary-contrast);
 }
 
+ion-header ion-toolbar .button.button-clear {
+    --color: var(--ion-color-primary-contrast);
+}
+
 ion-toolbar .core-navbar-button-hidden {
     display: none !important;
 }