MOBILE-3750 a11y: Add horizontal scroll buttons

scripts/langindex.json

@@ -2036,6 +2036,8 @@
   "core.save": "moodle",
   "core.savechanges": "assign",
   "core.scanqr": "local_moodlemobileapp",
+  "core.scrollbackward": "local_moodlemobileapp",
+  "core.scrollforward": "local_moodlemobileapp",
   "core.search": "moodle",
   "core.searching": "local_moodlemobileapp",
   "core.searchresults": "moodle",

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -2,7 +2,8 @@
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner" slot="end">
+    <div slot="end">
+        <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
                 <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -14,12 +15,20 @@
             </ion-badge>
             <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
         </div>
+
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
+        </core-horizontal-scroll-controls>
+    </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-     <div class="core-horizontal-scroll">
+    <div
+        [id]="scrollElementId"
+        class="core-horizontal-scroll"
+        (scroll)="scrollControls.updateScrollPosition()"
+    >
         <ng-container *ngFor="let course of courses">
             <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses"
                 [showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts

@@ -46,6 +46,7 @@ export class AddonBlockRecentlyAccessedCoursesComponent extends CoreBlockBaseCom
 
     downloadCourseEnabled = false;
     downloadCoursesEnabled = false;
+    scrollElementId!: string;
 
     protected prefetchIconsInitialized = false;
     protected isDestroyed = false;
@@ -62,6 +63,10 @@ export class AddonBlockRecentlyAccessedCoursesComponent extends CoreBlockBaseCom
      * Component being initialized.
      */
     async ngOnInit(): Promise<void> {
+        // Generate unique id for scroll element.
+        const scrollId = CoreUtils.getUniqueId('AddonBlockRecentlyAccessedCoursesComponent-Scroll');
+
+        this.scrollElementId = `addon-block-recentlyaccessedcourses-scroll-${scrollId}`;
 
         // Refresh the enabled flags if enabled.
         this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

@@ -1,8 +1,17 @@
 <ion-item-divider sticky="true">
     <ion-label><h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2></ion-label>
+    <div slot="end">
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
+        </core-horizontal-scroll-controls>
+    </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
-    <div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
+    <div
+        [id]="scrollElementId"
+        [hidden]="!items || items.length === 0"
+        class="core-horizontal-scroll"
+        (scroll)="scrollControls.updateScrollPosition()"
+    >
         <div *ngFor="let item of items">
             <ion-card>
                 <ion-item class="core-course-module-handler item-media ion-text-wrap" detail="false" (click)="action($event, item)"

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts

@@ -22,6 +22,7 @@ import {
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreContentLinksHelper } from '@features/contentlinks/services/contentlinks-helper';
+import { CoreUtils } from '@services/utils/utils';
 
 /**
  * Component to render a recently accessed items block.
@@ -34,6 +35,7 @@ import { CoreContentLinksHelper } from '@features/contentlinks/services/contentl
 export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseComponent implements OnInit {
 
     items: AddonBlockRecentlyAccessedItemsItem[] = [];
+    scrollElementId!: string;
 
     protected fetchContentDefaultError = 'Error getting recently accessed items data.';
 
@@ -41,6 +43,18 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
         super('AddonBlockRecentlyAccessedItemsComponent');
     }
 
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        // Generate unique id for scroll element.
+        const scrollId = CoreUtils.getUniqueId('AddonBlockRecentlyAccessedItemsComponent-Scroll');
+
+        this.scrollElementId = `addon-block-recentlyaccesseditems-scroll-${scrollId}`;
+
+        super.ngOnInit();
+    }
+
     /**
      * Perform the invalidate content function.
      *

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -2,7 +2,8 @@
     <ion-label>
         <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner" slot="end">
+    <div slot="end">
+        <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">
                 <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -14,12 +15,21 @@
             </ion-badge>
             <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
         </div>
+
+        <core-horizontal-scroll-controls #scrollControls [aria-controls]="scrollElementId">
+        </core-horizontal-scroll-controls>
+    </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-    <div class="core-horizontal-scroll" *ngIf="courses.length > 0">
+    <div
+        [hidden]="courses.length === 0"
+        [id]="scrollElementId"
+        class="core-horizontal-scroll"
+        (scroll)="scrollControls.updateScrollPosition()"
+    >
         <ng-container *ngFor="let course of courses">
             <core-courses-course-progress [course]="course" class="core-block_starredcourses"
                 [showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>

src/addons/block/starredcourses/components/starredcourses/starredcourses.ts

@@ -46,6 +46,7 @@ export class AddonBlockStarredCoursesComponent extends CoreBlockBaseComponent im
 
     downloadCourseEnabled = false;
     downloadCoursesEnabled = false;
+    scrollElementId!: string;
 
     protected prefetchIconsInitialized = false;
     protected isDestroyed = false;
@@ -62,6 +63,11 @@ export class AddonBlockStarredCoursesComponent extends CoreBlockBaseComponent im
      * Component being initialized.
      */
     async ngOnInit(): Promise<void> {
+        // Generate unique id for scroll element.
+        const scrollId = CoreUtils.getUniqueId('AddonBlockStarredCoursesComponent-Scroll');
+
+        this.scrollElementId = `addon-block-starredcourses-scroll-${scrollId}`;
+
         // Refresh the enabled flags if enabled.
         this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
         this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite();

src/core/components/components.module.ts

@@ -57,6 +57,7 @@ import { CoreTimerComponent } from './timer/timer';
 import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
 import { CoreComboboxComponent } from './combobox/combobox';
 import { CoreSpacerComponent } from './spacer/spacer';
+import { CoreHorizontalScrollControlsComponent } from './horizontal-scroll-controls/horizontal-scroll-controls';
 
 @NgModule({
     declarations: [
@@ -96,6 +97,7 @@ import { CoreSpacerComponent } from './spacer/spacer';
         CoreUserAvatarComponent,
         CoreComboboxComponent,
         CoreSpacerComponent,
+        CoreHorizontalScrollControlsComponent,
     ],
     imports: [
         CommonModule,
@@ -142,6 +144,7 @@ import { CoreSpacerComponent } from './spacer/spacer';
         CoreUserAvatarComponent,
         CoreComboboxComponent,
         CoreSpacerComponent,
+        CoreHorizontalScrollControlsComponent,
     ],
 })
 export class CoreComponentsModule {}

src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html

@@ -0,0 +1,23 @@
+<ion-button
+    fill="clear"
+    color="dark"
+    (click)="scroll('backward')"
+    [hidden]="scrollPosition === 'hidden'"
+    [disabled]="scrollPosition === 'start'"
+    [attr.aria-label]="'core.scrollbackward' | translate"
+    [attr.aria-controls]="targetId"
+>
+    <ion-icon name="fas-caret-left" slot="icon-only" aria-hidden="true"></ion-icon>
+</ion-button>
+
+<ion-button
+    fill="clear"
+    color="dark"
+    (click)="scroll('forward')"
+    [hidden]="scrollPosition === 'hidden'"
+    [disabled]="scrollPosition === 'end'"
+    [attr.aria-label]="'core.scrollforward' | translate"
+    [attr.aria-controls]="targetId"
+>
+    <ion-icon name="fas-caret-right" slot="icon-only" aria-hidden="true"></ion-icon>
+</ion-button>

src/core/components/horizontal-scroll-controls/horizontal-scroll-controls.scss

@@ -0,0 +1,10 @@
+:host {
+    --flex-row-direction: row;
+
+    display: flex;
+    flex-direction: var(--flex-row-direction);
+}
+
+:host-context([dir="rtl"]) {
+    --flex-row-direction: row-reverse;
+}

src/core/components/horizontal-scroll-controls/horizontal-scroll-controls.ts

@@ -0,0 +1,106 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input } from '@angular/core';
+import { Platform } from '@singletons';
+
+const enum ScrollPosition {
+    Start = 'start',
+    End = 'end',
+    Middle = 'middle',
+    Hidden = 'hidden',
+}
+
+@Component({
+    selector: 'core-horizontal-scroll-controls',
+    templateUrl: 'core-horizontal-scroll-controls.html',
+    styleUrls: ['./horizontal-scroll-controls.scss'],
+})
+export class CoreHorizontalScrollControlsComponent {
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('aria-controls') targetId?: string;
+
+    scrollPosition: ScrollPosition = ScrollPosition.Hidden;
+
+    /**
+     * Get target element.
+     */
+    private get target(): HTMLElement | null {
+        return this.targetId && document.getElementById(this.targetId) || null;
+    }
+
+    /**
+     * Scroll the target in the given direction.
+     *
+     * @param direction Scroll direction.
+     */
+    scroll(direction: 'forward' | 'backward'): void {
+        if (!this.target) {
+            return;
+        }
+
+        const leftDelta = direction === 'forward' ? this.target.clientWidth : -this.target.clientWidth;
+        const newScrollLeft = Math.max(
+            Math.min(
+                this.target.scrollLeft + leftDelta,
+                this.target.scrollWidth - this.target.clientWidth,
+            ),
+            0,
+        );
+
+        this.target.scrollBy({
+            left: leftDelta,
+            behavior: 'smooth',
+        });
+
+        this.updateScrollPosition(newScrollLeft);
+    }
+
+    /**
+     * Update the current scroll position.
+     */
+    updateScrollPosition(scrollLeft?: number): void {
+        this.scrollPosition = this.getScrollPosition(scrollLeft);
+    }
+
+    /**
+     * Get the current scroll position.
+     *
+     * @param scrollLeft Scroll left to use for reference in the calculations.
+     * @returns Scroll position.
+     */
+    private getScrollPosition(scrollLeft?: number): ScrollPosition {
+        scrollLeft = scrollLeft ?? this.target?.scrollLeft ?? 0;
+
+        if (!this.target || this.target.scrollWidth <= this.target.clientWidth) {
+            return ScrollPosition.Hidden;
+        }
+
+        if (scrollLeft === 0) {
+            return Platform.isRTL ? ScrollPosition.End : ScrollPosition.Start;
+        }
+
+        if (!Platform.isRTL && this.target.scrollWidth - scrollLeft === this.target.clientWidth) {
+            return ScrollPosition.End;
+        }
+
+        if (Platform.isRTL && this.target.scrollWidth + scrollLeft === this.target.clientWidth) {
+            return ScrollPosition.Start;
+        }
+
+        return ScrollPosition.Middle;
+    }
+
+}

src/core/lang.json

@@ -269,6 +269,8 @@
     "sorry": "Sorry...",
     "sort": "Sort",
     "sortby": "Sort by",
+    "scrollbackward": "Scroll backward",
+    "scrollforward": "Scroll forward",
     "start": "Start",
     "storingfiles": "Storing files",
     "strftimedate": "%d %B %Y",

src/theme/theme.base.scss

@@ -32,6 +32,10 @@
     text-transform: none;
 }
 
+.flex { display: flex; }
+.inline-block { display: inline-block; }
+.block { display: block; }
+
 .flex-row {
     display: flex;
     flex-direction: row;