MOBILE-3752 a11y: Minor accessibility improvements

src/addons/mod/data/data-forms.scss

@@ -22,8 +22,6 @@
     .addon-data-advanced-search {
         padding: 16px;
         width: 100%;
-        // @todo check if needed
-        // @include safe-area-padding-horizontal(16px !important, 16px !important);
     }
 
     .addon-data-contents form,

src/addons/mod/data/data.scss

@@ -17,8 +17,6 @@ $grid-column-paddings: (
     white-space: normal;
     word-break: break-word;
     padding: 16px;
-    // @todo check if needed
-    // @include safe-area-padding-horizontal(16px !important, 16px !important);
 
     background-color: var(--ion-item-background);
     border-width: 1px 0;

src/core/components/file/file.scss

@@ -1,31 +0,0 @@
-:host {
-    // @todo
-    // .card-md core-file + core-file > .item-md.item-block > .item-inner,
-    // core-file + core-file > .item-md.item-block > .item-inner {
-    //     border-top: 1px solid $list-md-border-color;
-    // }
-
-    // .card-ios core-file + core-file > .item-ios.item-block > .item-inner,
-    // core-file + core-file > .item-ios.item-block > .item-inner {
-    //     border-top: $hairlines-width solid $list-ios-border-color;
-    //     .buttons {
-    //         min-height: 53px;
-    //         min-width: 58px;
-    //     }
-    // }
-
-    // core-file > .item.item-block > .item-inner {
-    //     border-bottom: 0;
-    //     @include safe-area-padding(null, 0px, null, null);
-    //     .buttons {
-    //         display: flex;
-    //         flex-flow: row;
-    //         align-items: center;
-    //         z-index: 1;
-    //         justify-content: space-around;
-    //         align-content: center;
-    //         min-height: 52px;
-    //         min-width: 53px;
-    //     }
-    // }
-}

src/core/components/file/file.ts

@@ -34,7 +34,6 @@ import { CoreWSFile } from '@services/ws';
 @Component({
     selector: 'core-file',
     templateUrl: 'core-file.html',
-    styleUrls: ['file.scss'],
 })
 export class CoreFileComponent implements OnInit, OnDestroy {
 

src/core/components/user-avatar/user-avatar.scss

@@ -1,5 +1,7 @@
 :host {
     position: relative;
+    width: var(--core-avatar-size);
+    height: var(--core-avatar-size);
 
     .clickable {
         cursor: pointer;

src/core/features/block/components/block/block.scss

@@ -4,9 +4,6 @@
     background: var(--background);
 
     ion-item-divider {
-        min-height: 60px;
+        min-height: var(--item-divider-min-height);
-        .core-button-spinner {
-            margin: 0;
-        }
     }
 }

src/core/features/block/components/course-blocks/course-blocks.scss

@@ -16,7 +16,6 @@
                 box-shadow: none !important;
                 flex-grow: 1;
                 max-width: 100%;
-                // @todo @include core-split-area-start();
             }
 
             div.core-course-blocks-side {
@@ -24,7 +23,6 @@
                 min-width: var(--side-blocks-min-width);
                 box-shadow: var(--side-blocks-box-shadow);
                 z-index: 2;
-                // @todo @include core-split-area-end();
             }
 
             .core-course-blocks-content,

src/core/features/course/components/format/format.scss

@@ -52,31 +52,4 @@
         }
     }
 
-// @todo
-//     .item-divider  {
-//         .label {
-//             margin-top: 0;
-//             margin-bottom: 0;
-//         }
-
-//         core-format-text {
-//             line-height: 44px;
-//         }
-
-//         ion-badge core-format-text {
-//             line-height: normal;
-//             margin-bottom: 9px;
-//         }
-
-//         &.core-section-download .label{
-//             @include margin(null, 0, null, null);
-//         }
-//     }
-
-//     div.core-section-download {
-//         @include padding(null, 0, null, null);
-//     }
-
-//
-
 }

src/core/features/course/components/module-description/course-module-description.scss

@@ -1,17 +0,0 @@
-// @todo Review commented styles.
-// ion-app.app-root {
-//     .safe-area-page,
-//     .safe-padding-horizontal {
-//         core-course-module-description {
-//             padding-left: 0 !important;
-//             padding-right: 0 !important;
-//             .item-ios.item-block {
-//                 @include safe-area-padding-horizontal($item-ios-padding-end / 2, null);
-
-//                 .item-inner {
-//                     @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
-//                 }
-//             }
-//         }
-//     }
-// }

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -28,7 +28,10 @@
         </p>
     </ion-label>
     <ng-container *ngIf="!isEnrolled">
-        <ion-icon *ngFor="let icon of icons" color="dark" size="small"
+        <ion-icon *ngFor="let icon of icons" color="dark" size="small" [name]="icon.icon"
-        [name]="icon.icon" [attr.aria-label]="icon.label | translate" slot="end"></ion-icon>
+            [title]="icon.label | translate"
+            [attr.aria-label]="icon.label | translate"
+            slot="end">
+        </ion-icon>
     </ng-container>
 </ion-item>

src/core/features/login/pages/site/site.html

@@ -93,7 +93,7 @@
                 (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate">
             </ion-searchbar>
             <ng-container *ngFor="let site of filteredSites">
-                <ng-container *ngTemplateOutlet="site"></ng-container>
+                <ng-container *ngTemplateOutlet="sitelisting; context: {site: site}"></ng-container>
             </ng-container>
         </ion-list>
     </ng-container>

src/core/features/login/pages/site/site.scss

@@ -2,14 +2,6 @@
     margin-bottom: 20px;
 }
 
-.searchbar-ios {
-    background: transparent;
-
-    .searchbar-input {
-        background-color: white; // @todo $searchbar-ios-toolbar-input-background;
-    }
-}
-
 .item {
     &.core-login-need-help {
         margin-top: 16px;

src/core/features/mainmenu/pages/home/home.scss

@@ -17,10 +17,3 @@ $core-dashboard-logo: false !default;
         display: none;
     }
 }
-
-ion-badge.core-course-download-courses-progress {
-    display: block;
-    // @include float(start);
-    // @include margin(12px, 12px, null, 12px);
-}
-

src/core/features/search/components/search-box/core-search-box.html

@@ -6,11 +6,11 @@
                 [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus"
                 [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
             </ion-input>
-            <ion-button slot="end" fill="clear" type="submit" size="small" [attr.aria-label]="searchLabel"
+            <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
                 [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
                 <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
-            <ion-button *ngIf="showClear" slot="end" fill="clear" size="small"
+            <ion-button *ngIf="showClear" slot="end" fill="clear"
                 [attr.aria-label]="'core.clearsearch' | translate" [disabled]="searched == '' || disabled"
                 (click)="clearForm()">
                 <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true"></ion-icon>

src/theme/globals.variables.scss

@@ -228,7 +228,7 @@ $core-login-text-color-dark: $white !default;
 $core-star-color: $brand-color !default;
 
 $core-large-avatar-size:  90px !default;
-$core-avatar-size:  40px !default;
+$core-avatar-size:  44px !default;
 
 $core-send-message-input-background: $gray !default;
 $core-send-message-input-color: $black !default;
@@ -252,7 +252,7 @@ $addon-messages-avatar-size: 30px !default;
 $addon-messages-discussion-badge: $primary !default;
 $addon-messages-discussion-badge-text: $white !default;
 
-$addon-forum-avatar-size: 28px !default;
+$addon-forum-avatar-size: 44px !default;
 $addon-forum-border-color: $gray !default;
 $addon-forum-highlight-color: $gray-lighter !default;
 

src/theme/theme.base.scss

@@ -1,4 +1,4 @@
-@import "./globals.mixins.ionic.scss";
+@import "./globals.scss";
 
 // Common styles.
 .text-left           { text-align: left; }
@@ -126,7 +126,9 @@ ion-button.button-small ion-icon.faicon[slot] {
     font-size: 1.5em !important;
 }
 
-[dir=rtl] ion-icon.icon-flip-rtl {
+[dir=rtl] ion-icon.icon-flip-rtl,
+[dir=rtl] ion-item::part(detail-icon),
+[dir=rtl] ion-icon.item-detail-icon {
     transform: scaleX(-1);
 }
 
@@ -206,7 +208,7 @@ ion-toolbar {
 // Modals.
 .core-modal-fullscreen  .modal-wrapper {
     position: absolute;
-    // @todo @include position(0 !important, null, null, 0 !important);
+    @include position(0 !important, null, null, 0 !important);
     display: block;
     width: 100% !important;
     height: 100% !important;
@@ -218,11 +220,10 @@ ion-toolbar {
 
 @media only screen and (min-height: 400px) and (min-width: 300px) {
     .core-modal-lateral {
-        // @todo @include core-split-area-end();
 
         .modal-wrapper {
             position: absolute;
-            @include position(0 !important, 0 !important, 0 !important, auto);
+            @include position(0 !important, 0 !important, 0 !important, unset !important);
             display: block;
             height: 100% !important;
             width: auto;
@@ -425,6 +426,16 @@ ion-select::part(text) {
     text-decoration: underline;
 }
 
+core-block ion-item-divider .core-button-spinner {
+    display: flex;
+    align-items: center;
+    @include margin-horizontal(10px);
+
+    ion-badge.core-course-download-courses-progress {
+        @include margin(null, 12px, null, null);
+    }
+}
+
 // Horizontal scrolling elements
 .core-horizontal-scroll {
     display: flex;