MOBILE-4250 course: Improve translation of module names for a11y

main
Pau Ferrer Ocaña 2023-03-20 09:49:45 +01:00
parent 35bf08e81d
commit b1495c6c9d
8 changed files with 16 additions and 14 deletions

View File

@ -105,7 +105,7 @@
<ion-item class="core-course-storage-activity"
*ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
[modname]="module.modname" [componentId]="module.instance">
[modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural">
</core-mod-icon>
<ion-label class="ion-text-wrap">
<p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">

View File

@ -31,7 +31,8 @@ const fallbackModName = 'external-tool';
})
export class CoreModIconComponent implements OnInit, OnChanges {
@Input() modname?: string; // The module name. Used also as component if set.
@Input() modname = ''; // The module name. Used also as component if set.
@Input() fallbackTranslation = ''; // Fallback translation string if cannot auto translate.
@Input() componentId?: number; // Component Id for external icons.
@Input() modicon?: string; // Module icon url or local url.
@Input() noFilter?: boolean; // Whether to disable filters.
@ -63,7 +64,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
}
}
this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : '';
this.modNameTranslated = CoreCourse.translateModuleName(this.modname, this.fallbackTranslation);
if (CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) {
this.legacyIcon = false;

View File

@ -61,7 +61,7 @@ export class CoreCourseModuleInfoComponent implements OnInit {
async ngOnInit(): Promise<void> {
this.modicon = await CoreCourseModuleDelegate.getModuleIconSrc(this.module.modname, this.module.modicon, this.module);
this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname || '');
this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
this.showCompletion = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('3.11');
}

View File

@ -14,7 +14,8 @@
<ion-item class="ion-text-wrap" *ngIf="module" lines="full">
<ion-label>
<p *ngIf="moduleNameTranslated" class="core-modulename">
<core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
<core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance"
[fallbackTranslation]="module.modplural">
</core-mod-icon>
{{moduleNameTranslated}}
</p>

View File

@ -174,7 +174,7 @@ export class CoreCourseModuleSummaryComponent implements OnInit, OnDestroy {
this.componentId = this.module.id;
this.externalUrl = this.module.url;
this.courseId = this.courseId || this.module.course;
this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname || '');
this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
this.blog = await AddonBlog.isPluginEnabled();

View File

@ -8,7 +8,7 @@
}">
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
[componentId]="module.instance">
[componentId]="module.instance" [fallbackTranslation]="module.modplural">
</core-mod-icon>
<ion-label class="core-module-title">

View File

@ -69,7 +69,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
* @inheritdoc
*/
async ngOnInit(): Promise<void> {
this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname) || '';
this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
this.showLegacyCompletion = this.showLegacyCompletion ??
CoreConstants.CONFIG.uselegacycompletion ??
!CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('3.11');

View File

@ -1509,17 +1509,17 @@ export class CoreCourseProvider {
* Translate a module name to current language.
*
* @param moduleName The module name.
* @param fallback Fallback text to use if not translated. Will use moduleName otherwise.
*
* @returns Translated name.
*/
translateModuleName(moduleName: string): string {
if (this.CORE_MODULES.indexOf(moduleName) < 0) {
moduleName = 'external-tool';
}
translateModuleName(moduleName: string, fallback?: string): string {
const langKey = 'core.mod_' + moduleName;
const translated = Translate.instant(langKey);
return translated !== langKey ? translated : moduleName;
return translated !== langKey ?
translated :
(fallback || moduleName);
}
/**