MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

add alert role to guided tour, move up in html + link label to input in initial description template editor fields

This commit is contained in:
mchouliara 2024-09-30 11:17:10 +03:00
parent 2ebff3328f
commit 3d124f4d44
7 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/app.component.html
View File

@ -1,4 +1,8 @@
<div [class.accessibility-theme]="fontService.isLargeText()">
<ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
></ngx-guided-tour>
<button class="skip-to-main-content" (click)="skipToMain()" tabindex="1">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button>
<div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
@ -15,10 +19,4 @@
</div>
<app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
<router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>
<ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
role="alert"
></ngx-guided-tour>
</div>

10
frontend/src/app/app.component.scss
View File

@ -38,12 +38,12 @@
.skip-to-main-content {
position: fixed;
left: 999px;
left: -190px;
z-index: -1;
&:focus, &:active {
background-color: var(--primary-color);
z-index: 1001;
left: 0px;
color: var(--primary-text);
background-color: var(--primary-color);
z-index: 1001;
left: 50vw;
color: var(--primary-text);
}
}

1
frontend/src/app/library/guided-tour/guided-tour.component.html
View File

@ -10,6 +10,7 @@
</div>
<div *ngIf="currentTourStep && !isOrbShowing">
<div #tourStep *ngIf="currentTourStep"
role="alert"
class="tour-step tour-{{ currentTourStep.orientation }}"
[ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"

3
frontend/src/app/library/guided-tour/guided-tour.module.ts
View File

@ -4,10 +4,11 @@ import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WindowRefService } from './windowref.service';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [GuidedTourComponent],
imports: [CommonModule, TranslateModule],
imports: [CommonModule, TranslateModule, MatButtonModule],
providers: [WindowRefService],
exports: [GuidedTourComponent]
})

2
frontend/src/app/ui/admin/description-template/description-template.module.ts
View File

@ -34,6 +34,7 @@ import { DescriptionFormModule } from '@app/ui/description/editor/description-fo
import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
import { DragulaModule } from 'ng2-dragula';
import { TransitionGroupModule } from '@app/ui/transition-group/transition-group.module';
import { FormFocusDirective } from '@common/forms/form-focus.directive';
@NgModule({
imports: [
@ -52,6 +53,7 @@ import { TransitionGroupModule } from '@app/ui/transition-group/transition-group
DescriptionFormModule,
TransitionGroupModule,
DragulaModule.forRoot(),
FormFocusDirective
],
declarations: [
DescriptionTemplateEditorComponent,

9
frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
View File

@ -1,18 +1,19 @@
<div [formGroup]="form" class="row description-template-editor">
<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}}
<label class="heading col-12" for="sectionName">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
<mat-form-field class="col-12">
<input matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
<input id="sectionName" matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
<mat-error *ngIf="form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
<label class="heading col-12" [appFormFocus]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<div class="col-12">
<rich-text-editor-component [form]="form.get('description')"
id="sectionDescription"
[placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'"
[editable]="!form.disabled">
</rich-text-editor-component>

40
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -36,34 +36,34 @@
<div class="col-9">
<div class="col">
<div class="col-12">
<div class="heading">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}}
<label class="heading" for="nameInput">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}}
&nbsp;*<small class="required-text" class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<input matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
<input id="nameInput" matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}}
<label class="heading" for="codeInput">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<input matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
<input id="codeInput" matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
<label class="heading" [appFormFocus]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
<div class="full-width basic-info-input">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
<rich-text-editor-component id="descriptionInput" [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
@ -73,25 +73,25 @@
</div>
<div class="col-12">
<div class="heading">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}}
<label class="heading" for="typeInput">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}</mat-label>
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
<app-single-auto-complete [id]="'typeInput'" [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('type').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}}
<label class="heading" [appFormFocus]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<mat-select [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
<mat-select id="languageInput" [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
<mat-option *ngFor="let lang of availableLanguages" [value]="lang.code">
{{ lang.name }}
</mat-option>
@ -101,7 +101,7 @@
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</div>
<label class="heading" for="templateUsersInput">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS-HINT'| translate}}</div>
<div class="full-width basic-info-input">
<table class="col-12 user-table">
@ -135,7 +135,7 @@
<div class="col-12 col-lg-4 d-flex justify-content-end" style="overflow: hidden;">
<mat-form-field class="full-width basic-info-input" *ngIf="!viewOnly">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}</mat-label>
<app-single-auto-complete [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
<app-single-auto-complete [id]="'templateUsersInput'" [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
@ -182,16 +182,16 @@
<formGroup [formGroup]="selectedTocEntry.form">
<div class="row">
<div class="col-12">
<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}}
<label for="pageNameInput" class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
</div>
<div class="col-12">
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<input type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
<input id="pageNameInput" type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('backendError')">{{selectedTocEntry.form.get('title').getError('backendError').message}}</mat-error>
<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>