EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3750 a11y: Add horizontal scroll buttons

main
Noel De Martin 2021-05-13 11:30:01 +02:00
parent baeb068fdb
commit 255aec5897
13 changed files with 228 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/langindex.json
View File

@ -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",

33
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -2,24 +2,33 @@
<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">
<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>
</ion-button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
[attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
{{prefetchCoursesData.badge}}
</ion-badge>
<ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
<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>
</ion-button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
[attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
{{prefetchCoursesData.badge}}
</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>

5
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts
View File

@ -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();

11
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
View File

@ -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)"

14
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
View File

@ -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.
*

34
src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
View File

@ -2,24 +2,34 @@
<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">
<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>
</ion-button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
[attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
{{prefetchCoursesData.badge}}
</ion-badge>
<ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.loading"></ion-spinner>
<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>
</ion-button>
<ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData.badge"
role="progressbar" [attr.aria-valuemax]="prefetchCoursesData.total"
[attr.aria-valuenow]="prefetchCoursesData.count" [attr.aria-valuetext]="prefetchCoursesData.badgeA11yText">
{{prefetchCoursesData.badge}}
</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>

6
src/addons/block/starredcourses/components/starredcourses/starredcourses.ts
View File

@ -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();

3
src/core/components/components.module.ts
View File

@ -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 {}

23
src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html 100644
View File

@ -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>

10
src/core/components/horizontal-scroll-controls/horizontal-scroll-controls.scss 100644
View File

@ -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;
}

106
src/core/components/horizontal-scroll-controls/horizontal-scroll-controls.ts 100644
View File

@ -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;
}
}

2
src/core/lang.json
View File

@ -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",

4
src/theme/theme.base.scss
View File

@ -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;