MOBILE-3745 a11y: Use fill clear on top toolbar buttons

2021-05-06 10:56:20 +02:00 · 2021-05-06 10:56:20 +02:00 · e7b61672f1
commit e7b61672f1
parent e919e38bf9
46 changed files with 52 additions and 48 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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;
 }