diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4011a103604f07c4f2a96cd20ee932c80146872a..658a12fe783f2ec5ccc615ae388b1f6c18aa9603 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RegisterComponent } from './components/home/_dialogs/register/register.component';
import { PasswordResetComponent } from './components/home/_dialogs/password-reset/password-reset.component';
@@ -55,9 +55,7 @@ import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.com
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
import { ArsModule } from '../../projects/ars/src/lib/ars.module';
-import { QrCodeDialogComponent } from './components/shared/_dialogs/qr-code-dialog/qr-code-dialog.component';
import { MatIconModule } from '@angular/material/icon';
-import { RemoveFromHistoryComponent } from './components/shared/_dialogs/remove-from-history/remove-from-history.component';
import { MatomoModule } from 'ngx-matomo-v9';
import { TagCloudModule } from 'angular-tag-cloud-module';
import { SpacyService } from './services/http/spacy.service';
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
index a89d43d5f7b0adb2acadfb9241787329118b318e..4b4fe2727a2acdd81c77959532d1332ba3c5d220 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
+++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.html
@@ -5,8 +5,7 @@
<div *ngIf="bonusTokens.length >= 1">
<div class="validator">
<mat-form-field>
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
(keyup)="inputChanged($event)"
(input)="inputChanged($event)"
matInput
diff --git a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.ts b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.ts
index 3bf7960f886ee2ee65bf49a8117c996888d1287f..4263ab2fc75bd22a0f3bea602bce72c3b99160f9 100644
--- a/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.ts
+++ b/src/app/components/creator/_dialogs/bonus-token/bonus-token.component.ts
@@ -11,7 +11,6 @@ import { Router } from '@angular/router';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { isNumeric } from 'rxjs/internal-compatibility';
-import { EventService } from '../../../../services/util/event.service';
import { ExplanationDialogComponent } from '../../../shared/_dialogs/explanation-dialog/explanation-dialog.component';
@Component({
@@ -31,7 +30,6 @@ export class BonusTokenComponent implements OnInit, OnDestroy {
constructor(private bonusTokenService: BonusTokenService,
public dialog: MatDialog,
- public eventService: EventService,
protected router: Router,
private dialogRef: MatDialogRef<RoomCreatorPageComponent>,
private translationService: TranslateService,
diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.html b/src/app/components/creator/_dialogs/moderators/moderators.component.html
index 6340dfb4f540a1fa431cc6e45b4e57f65f73c1db..c3fe4740c0dbac8fc9930a5e7e33d90965390531 100644
--- a/src/app/components/creator/_dialogs/moderators/moderators.component.html
+++ b/src/app/components/creator/_dialogs/moderators/moderators.component.html
@@ -3,8 +3,7 @@
<div fxLayout="row">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput
type="email"
#loginId
diff --git a/src/app/components/creator/_dialogs/moderators/moderators.component.ts b/src/app/components/creator/_dialogs/moderators/moderators.component.ts
index e05f47d6e225ebf464149fbfe105f67f40aa928b..2edc179294176309843cfe27b7863ca3175a791d 100644
--- a/src/app/components/creator/_dialogs/moderators/moderators.component.ts
+++ b/src/app/components/creator/_dialogs/moderators/moderators.component.ts
@@ -8,7 +8,6 @@ import { LanguageService } from '../../../../services/util/language.service';
import { Moderator } from '../../../../models/moderator';
import { ModeratorDeleteComponent } from '../moderator-delete/moderator-delete.component';
import { FormControl, Validators } from '@angular/forms';
-import { EventService } from '../../../../services/util/event.service';
@Component({
selector: 'app-moderators',
@@ -29,8 +28,7 @@ export class ModeratorsComponent implements OnInit {
public translationService: TranslateService,
protected moderatorService: ModeratorService,
protected langService: LanguageService,
- @Inject(MAT_DIALOG_DATA) public data: any,
- public eventService: EventService) {
+ @Inject(MAT_DIALOG_DATA) public data: any) {
langService.langEmitter.subscribe(lang => translationService.use(lang));
}
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
index 13cc82a372f6d9187fbcf9e88c383060051e2075..a1afba8d2a0fd2c13c6d68ad6eba19da5d628873 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
@@ -5,8 +5,7 @@
<div fxLayout="column">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
[(ngModel)]="editRoom.name"
matInput
[formControl]="roomNameFormControl"
@@ -26,8 +25,7 @@
<mat-tab label="{{'room-page.description' | translate}}">
<mat-form-field class="input-block">
<textarea
- (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ appAccessibilityEscapedInput
[(ngModel)]="editRoom.description"
matInput
matTextareaAutosize
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html
index ea4d850ee3a6a7ea312bd751d601e1562fc3c03d..e9022ce022bc60f319a0eb49f55b8c6c5df3b332 100644
--- a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html
+++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html
@@ -2,8 +2,7 @@
<div mat-dialog-content
*ngIf="editRoom">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput
[formControl]="roomNameFormControl"
name="room-name"
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts
index 47a8dcf6a7f1fb1e225d10456f17ed2f782494c8..a5cc8b0c8f520705d08a0ac5d5b8cfe610eb62df 100644
--- a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts
+++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts
@@ -1,7 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { Room } from '../../../../models/room';
import { FormControl, Validators } from '@angular/forms';
-import { EventService } from '../../../../services/util/event.service';
import { MatDialogRef } from '@angular/material/dialog';
import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
import { RoomService } from '../../../../services/http/room.service';
@@ -19,7 +18,6 @@ export class RoomNameSettingsComponent implements OnInit {
]);
constructor(private dialogRef: MatDialogRef<RoomCreatorPageComponent>,
- public eventService: EventService,
private roomService: RoomService) {
}
diff --git a/src/app/components/creator/_dialogs/tags/tags.component.html b/src/app/components/creator/_dialogs/tags/tags.component.html
index fb50ef2a4a2fa4033588f40b51800fb7f17acb4b..ab35ec17fb64c99fca1e6a6e8b2793769be1ee08 100644
--- a/src/app/components/creator/_dialogs/tags/tags.component.html
+++ b/src/app/components/creator/_dialogs/tags/tags.component.html
@@ -5,8 +5,7 @@
<div fxLayout="column">
<div fxLayout="row">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput
type="text"
#tag
diff --git a/src/app/components/creator/_dialogs/tags/tags.component.ts b/src/app/components/creator/_dialogs/tags/tags.component.ts
index 301b3142b13921cfe3ffa9ad320c254082cc442c..00d7cd493052867dbdd9ed0eeca9e07f15872b5c 100644
--- a/src/app/components/creator/_dialogs/tags/tags.component.ts
+++ b/src/app/components/creator/_dialogs/tags/tags.component.ts
@@ -1,10 +1,8 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { NotificationService } from '../../../../services/util/notification.service';
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
import { LanguageService } from '../../../../services/util/language.service';
-import { EventService } from '../../../../services/util/event.service';
import { FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
@@ -22,12 +20,8 @@ export class TagsComponent {
private _closeSubscription: Subscription;
constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
- public dialog: MatDialog,
- public notificationService: NotificationService,
public translationService: TranslateService,
- protected langService: LanguageService,
- @Inject(MAT_DIALOG_DATA) public data: any,
- public eventService: EventService) {
+ protected langService: LanguageService) {
langService.langEmitter.subscribe(lang => translationService.use(lang));
this._closeSubscription = this.dialogRef.beforeClosed().subscribe(() => this.closeDialog());
}
diff --git a/src/app/components/home/_dialogs/password-reset/password-reset.component.html b/src/app/components/home/_dialogs/password-reset/password-reset.component.html
index 55ead6df79f27f1e9c3a8ad07af099bc5af9ea56..4a4e9c02c7241ed1f1a6a0825d13a2dd78d764ab 100644
--- a/src/app/components/home/_dialogs/password-reset/password-reset.component.html
+++ b/src/app/components/home/_dialogs/password-reset/password-reset.component.html
@@ -7,7 +7,7 @@
<form *ngIf="initProcess" (ngSubmit)="resetPassword(email.value)" fxLayout="column" fxLayoutAlign="space-around"
fxLayoutGap="10px">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
aria-labelledby="password-reset-description"
matInput type="email" #email [formControl]="usernameFormControl"
[errorStateMatcher]="matcher" name="email"/>
@@ -39,7 +39,7 @@
</mat-error>
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="password" #password1 [formControl]="passwordFormControl" aria-labelledby="new-password1"
[errorStateMatcher]="matcher"/>
<mat-placeholder class="placeholder">{{ 'register.password' | translate }}</mat-placeholder>
@@ -49,7 +49,7 @@
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="password" #password2 [formControl]="passwordFormControl2" aria-labelledby="new-password2"
[errorStateMatcher]="matcher"/>
<mat-placeholder class="placeholder">{{ 'register.password-verify' | translate }}</mat-placeholder>
@@ -61,7 +61,7 @@
</mat-error>
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="text" #key [formControl]="keyFormControl" aria-labelledby="password-reset-key"
[errorStateMatcher]="matcher"/>
<mat-placeholder class="placeholder">{{ 'password-reset.key' | translate }}</mat-placeholder>
diff --git a/src/app/components/home/_dialogs/password-reset/password-reset.component.ts b/src/app/components/home/_dialogs/password-reset/password-reset.component.ts
index 034ef45d45716fdb8dadebbf7aafe278491a39d2..ffc066ccd7c0ec2c7ad31d98d0b6bd41244670e8 100644
--- a/src/app/components/home/_dialogs/password-reset/password-reset.component.ts
+++ b/src/app/components/home/_dialogs/password-reset/password-reset.component.ts
@@ -5,7 +5,6 @@ import { RegisterComponent, validatePassword } from '../register/register.compon
import { AuthenticationService } from '../../../../services/http/authentication.service';
import { NotificationService } from '../../../../services/util/notification.service';
import { TranslateService } from '@ngx-translate/core';
-import { EventService } from '../../../../services/util/event.service';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { ErrorStateMatcher } from '@angular/material/core';
@@ -39,7 +38,6 @@ export class PasswordResetComponent implements OnInit {
public notificationService: NotificationService,
public dialogRef: MatDialogRef<RegisterComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
- public eventService: EventService,
private liveAnnouncer: LiveAnnouncer, ) {
}
diff --git a/src/app/components/home/_dialogs/register/register.component.html b/src/app/components/home/_dialogs/register/register.component.html
index acc2597c2a413dfb40e6c0f1088e9f1f9f71a705..2cea1e7e5aa6cf2e2808bf436775cb4b9cfa8e57 100644
--- a/src/app/components/home/_dialogs/register/register.component.html
+++ b/src/app/components/home/_dialogs/register/register.component.html
@@ -2,7 +2,7 @@
<form (ngSubmit)="register(userName.value, userPassword1.value)" fxLayout="column"
fxLayoutAlign="space-around" fxLayoutGap="10px">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="email" #userName [formControl]="usernameFormControl"
[errorStateMatcher]="matcher" aria-labelledby="register-email-description"/>
<mat-placeholder class="placeholder">{{ 'register.email' | translate }}</mat-placeholder>
@@ -15,7 +15,7 @@
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="email" #userName2 [formControl]="username2FormControl"
[errorStateMatcher]="matcher" aria-labelledby="register-email-description-repeat"/>
<mat-placeholder class="placeholder">{{ 'register.email-verify' | translate }}</mat-placeholder>
@@ -25,7 +25,7 @@
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="password" #userPassword1
[formControl]="password1FormControl" [errorStateMatcher]="matcher"
aria-labelledby="register-password-description">
@@ -36,7 +36,7 @@
</mat-form-field>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput type="password" #userPassword2
[formControl]="password2FormControl" [errorStateMatcher]="matcher"
aria-labelledby="register-password-description-repeat">
diff --git a/src/app/components/home/_dialogs/register/register.component.ts b/src/app/components/home/_dialogs/register/register.component.ts
index fcdcb366387032b64b73034047ddb2a058f39f30..b9b323bfbb453d55127bbacd1a8d82db6569602b 100644
--- a/src/app/components/home/_dialogs/register/register.component.ts
+++ b/src/app/components/home/_dialogs/register/register.component.ts
@@ -66,8 +66,7 @@ export class RegisterComponent implements OnInit {
public authenticationService: AuthenticationService,
public notificationService: NotificationService,
public dialogRef: MatDialogRef<RegisterComponent>,
- @Inject(MAT_DIALOG_DATA) public data: any,
- public eventService: EventService) {
+ @Inject(MAT_DIALOG_DATA) public data: any) {
}
diff --git a/src/app/components/home/_dialogs/user-activation/user-activation.component.html b/src/app/components/home/_dialogs/user-activation/user-activation.component.html
index 929a0d3450ed2d5820b7205cd3e4163685d44a29..72d64975e62d3c4a8c1ec32c5366dbd9c3745333 100644
--- a/src/app/components/home/_dialogs/user-activation/user-activation.component.html
+++ b/src/app/components/home/_dialogs/user-activation/user-activation.component.html
@@ -3,8 +3,7 @@
fxLayoutAlign="space-around"
fxLayoutGap="10px">
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput
#userActivationKey
type="text"
diff --git a/src/app/components/home/_dialogs/user-activation/user-activation.component.ts b/src/app/components/home/_dialogs/user-activation/user-activation.component.ts
index 5cb6299b937ebcbdc7000fa0787679ea218a8095..56fa753f1ce4b94a1d960d25bfb37a74a12c82a7 100644
--- a/src/app/components/home/_dialogs/user-activation/user-activation.component.ts
+++ b/src/app/components/home/_dialogs/user-activation/user-activation.component.ts
@@ -4,7 +4,6 @@ import { UserService } from '../../../../services/http/user.service';
import { FormControl, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
-import { EventService } from '../../../../services/util/event.service';
@Component({
selector: 'app-user-activation',
@@ -20,8 +19,7 @@ export class UserActivationComponent implements OnInit {
public userService: UserService,
public notificationService: NotificationService,
public dialogRef: MatDialogRef<UserActivationComponent>,
- private translationService: TranslateService,
- public eventService: EventService) {
+ private translationService: TranslateService) {
}
ngOnInit() {
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
index cd87a12c3a45e720766eb9c16a2026c169583f44..667de875d1b8db7466fa5b949e255b1f1574cc2d 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
@@ -7,8 +7,7 @@
fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
#searchBox
id="searchBox"
[ngClass]="{'desktop-input': deviceType === 'desktop',
diff --git a/src/app/components/shared/_dialogs/room-create/room-create.component.html b/src/app/components/shared/_dialogs/room-create/room-create.component.html
index 6ebf25d9056eec6a7ae48b5e24d75dc17583919d..b3cf9be54c25c6b00c4428cb3b010953a4199baf 100644
--- a/src/app/components/shared/_dialogs/room-create/room-create.component.html
+++ b/src/app/components/shared/_dialogs/room-create/room-create.component.html
@@ -3,8 +3,7 @@
fxLayoutAlign="center"
fxLayoutGap="10px">
<mat-form-field>
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
(keypress)="resetEmptyInputs()"
matInput
#roomName
@@ -25,8 +24,7 @@
</mat-form-field>
<mat-slide-toggle (change)="hasCustomShortId=$event.checked">{{ 'home-page.custom-shortid' | translate }}</mat-slide-toggle>
<mat-form-field *ngIf="hasCustomShortId">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
(keyup)="resetInvalidCharacters()"
autofocus
matInput
diff --git a/src/app/components/shared/_dialogs/room-create/room-create.component.ts b/src/app/components/shared/_dialogs/room-create/room-create.component.ts
index abd3aebb0458fb3b8f9a52117257e82ca44035be..bd3ef6432bb3d2726e544c2c8c3ad449bd2b0245 100644
--- a/src/app/components/shared/_dialogs/room-create/room-create.component.ts
+++ b/src/app/components/shared/_dialogs/room-create/room-create.component.ts
@@ -7,7 +7,6 @@ import { NotificationService } from '../../../../services/util/notification.serv
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AuthenticationService } from '../../../../services/http/authentication.service';
import { TranslateService } from '@ngx-translate/core';
-import { EventService } from '../../../../services/util/event.service';
import { User } from '../../../../models/user';
@Component({
@@ -33,7 +32,6 @@ export class RoomCreateComponent implements OnInit {
public dialogRef: MatDialogRef<RoomCreateComponent>,
private translateService: TranslateService,
private authenticationService: AuthenticationService,
- public eventService: EventService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index c4a24b2ab8bfab5dfc30f8d030345037497e2c69..bbce4fc1392c1de8202d8e44d4a7722180c3cf18 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -16,8 +16,7 @@
fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
#searchBox
id="searchBox"
[ngClass]="{'desktop-input': deviceType === 'desktop',
diff --git a/src/app/components/shared/login/login.component.html b/src/app/components/shared/login/login.component.html
index 1f38df86f084878400297c7b0495a531509a43cb..767f6324d39909dd07d1a03f142eb7a1e1ed6f7a 100644
--- a/src/app/components/shared/login/login.component.html
+++ b/src/app/components/shared/login/login.component.html
@@ -4,8 +4,7 @@
(ngSubmit)="login(userEmail.value, userPassword.value)"
>
<mat-form-field class="input-block">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
#userEmail
[errorStateMatcher]="matcher"
[formControl]="usernameFormControl"
@@ -22,8 +21,7 @@
</mat-form-field>
<mat-form-field>
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
#userPassword
[errorStateMatcher]="matcher"
[formControl]="passwordFormControl"
diff --git a/src/app/components/shared/login/login.component.ts b/src/app/components/shared/login/login.component.ts
index 47f0e42243706dd139bf697dcf55e127edba9fb8..ce66e9e26be956838876ac969126c3b905998069 100644
--- a/src/app/components/shared/login/login.component.ts
+++ b/src/app/components/shared/login/login.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges, Inject } from '@angular/core';
+import { Component, OnInit, OnChanges, SimpleChanges, Inject } from '@angular/core';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { Router } from '@angular/router';
import { NotificationService } from '../../../services/util/notification.service';
@@ -9,7 +9,6 @@ import { TranslateService } from '@ngx-translate/core';
import { UserActivationComponent } from '../../home/_dialogs/user-activation/user-activation.component';
import { PasswordResetComponent } from '../../home/_dialogs/password-reset/password-reset.component';
import { RegisterComponent } from '../../home/_dialogs/register/register.component';
-import { EventService } from '../../../services/util/event.service';
import { ErrorStateMatcher } from '@angular/material/core';
export class LoginErrorStateMatcher implements ErrorStateMatcher {
@@ -45,7 +44,6 @@ export class LoginComponent implements OnInit, OnChanges {
private translationService: TranslateService,
public notificationService: NotificationService,
public dialog: MatDialog,
- public eventService: EventService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
}
diff --git a/src/app/components/shared/room-join/room-join.component.html b/src/app/components/shared/room-join/room-join.component.html
index 7162f3412ca36ad111d80c3e962bbe58a3965eb2..deb038454f7cecfb47a526772c773b6729d99c53 100644
--- a/src/app/components/shared/room-join/room-join.component.html
+++ b/src/app/components/shared/room-join/room-join.component.html
@@ -15,8 +15,7 @@
id="session_id-input"
matInput
#sessionCode
- (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ appAccessibilityEscapedInput
type="text"
maxlength="30"
[formControl]="sessionCodeFormControl"
diff --git a/src/app/components/shared/room-join/room-join.component.ts b/src/app/components/shared/room-join/room-join.component.ts
index cc6a6ea8e23488cf3626cbab9095f34f5a2d9916..944928e82e92498ef958889a929134477762da91 100644
--- a/src/app/components/shared/room-join/room-join.component.ts
+++ b/src/app/components/shared/room-join/room-join.component.ts
@@ -11,7 +11,6 @@ import { UserRole } from '../../../models/user-roles.enum';
import { User } from '../../../models/user';
import { Moderator } from '../../../models/moderator';
import { ModeratorService } from '../../../services/http/moderator.service';
-import { EventService } from '../../../services/util/event.service';
import { KeyboardUtils } from '../../../utils/keyboard';
import { KeyboardKey } from '../../../utils/keyboard/keys';
@@ -36,8 +35,7 @@ export class RoomJoinComponent implements OnInit {
public notificationService: NotificationService,
private translateService: TranslateService,
public authenticationService: AuthenticationService,
- private moderatorService: ModeratorService,
- public eventService: EventService
+ private moderatorService: ModeratorService
) {
}
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index 28467a4acdbab66a8db8057ac19f289d183b97cf..913503552e3f874c201c8b4c6a2f2d94eb28ed68 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -16,7 +16,7 @@
<!-- filter input -->
<mat-form-field *ngIf="this.rooms && this.rooms.length > 5" class="filterWrapper">
- <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput
+ <input appAccessibilityEscapedInput matInput
(keyup)="applyFilter($event.target.value)" class="filter"
attr.aria-labelledby="sessionHistoryLabel{{ this.rooms.length === 1 ? '1' : '' }}"/>
<mat-placeholder class="placeholder">{{ 'room-list.filter-message' | translate }}</mat-placeholder>
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index 923347c6a6010d94acf509ea07fe15339f9e8568..383ca3fbfbdf09f65b0f48feb27b94f01c7c05e2 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -55,6 +55,7 @@ import { DeepLDialogComponent } from './_dialogs/deep-ldialog/deep-ldialog.compo
import { ExplanationDialogComponent } from './_dialogs/explanation-dialog/explanation-dialog.component';
import { QuillInputDialogComponent } from './_dialogs/quill-input-dialog/quill-input-dialog.component';
import { WorkerConfigDialogComponent } from './_dialogs/worker-config-dialog/worker-config-dialog.component';
+import { AccessibilityEscapedInputDirective } from '../../directives/accessibility-escaped-input.directive';
@NgModule({
imports: [
@@ -115,7 +116,8 @@ import { WorkerConfigDialogComponent } from './_dialogs/worker-config-dialog/wor
DeepLDialogComponent,
ExplanationDialogComponent,
QuillInputDialogComponent,
- WorkerConfigDialogComponent
+ WorkerConfigDialogComponent,
+ AccessibilityEscapedInputDirective
],
exports: [
RoomJoinComponent,
@@ -140,7 +142,8 @@ import { WorkerConfigDialogComponent } from './_dialogs/worker-config-dialog/wor
CustomMarkdownComponent,
ScrollIntoViewDirective,
ViewCommentDataComponent,
- WriteCommentComponent
+ WriteCommentComponent,
+ AccessibilityEscapedInputDirective
]
})
export class SharedModule {
diff --git a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
index 3c4d2d344bb7675515900fceaaeb5e91ecb36977..9d2f834ee7654e9b7840526bdeee9979b7cb11c4 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
@@ -48,6 +48,7 @@
<input type="text"
aria-label="{{'tag-cloud-popup.tag-correction-placeholder' | translate}}"
matInput
+ appAccessibilityEscapedInput
(keyup)="checkEnter($event)"
[formControl]="replacementInput"
[matAutocomplete]="auto">
diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.ts b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
index 01c3bfc00756947fa74e05d74e63d544c8865f11..2ce446f61a068d1791fad332243f25f9d32ddd4b 100644
--- a/src/app/components/shared/view-comment-data/view-comment-data.component.ts
+++ b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
@@ -19,6 +19,8 @@ import { QuillInputDialogComponent } from '../_dialogs/quill-input-dialog/quill-
import { Marks } from './view-comment-data.marks';
import { LanguagetoolResult } from '../../../services/http/languagetool.service';
import { NotificationService } from '../../../services/util/notification.service';
+import { AccessibilityEscapedInputDirective } from '../../../directives/accessibility-escaped-input.directive';
+import { EventService } from '../../../services/util/event.service';
Quill.register('modules/imageResize', ImageResize);
@@ -64,6 +66,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
constructor(private languageService: LanguageService,
private translateService: TranslateService,
private deviceInfo: DeviceInfoService,
+ private eventService: EventService,
private dialog: MatDialog) {
this.languageService.langEmitter.subscribe(lang => {
this.translateService.use(lang);
@@ -169,6 +172,10 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
elem.addEventListener('paste', (e) => {
setTimeout(this.cleanContentOnPaste.bind(this));
});
+ new AccessibilityEscapedInputDirective(
+ new ElementRef(this.editor.editorElem.firstElementChild as HTMLElement),
+ this.eventService
+ ).ngAfterViewInit();
this.overrideQuillTooltip();
this.syncErrorLayer();
setTimeout(() => {
diff --git a/src/app/components/shared/write-comment/write-comment.component.html b/src/app/components/shared/write-comment/write-comment.component.html
index d1abcac2386e2d8ed03b23c3e8969ce5de40ef3a..9989ec458ca660906022aac0723601fd44268190 100644
--- a/src/app/components/shared/write-comment/write-comment.component.html
+++ b/src/app/components/shared/write-comment/write-comment.component.html
@@ -53,8 +53,7 @@
[placeHolderText]="placeholder">
</app-view-comment-data>
<mat-form-field class="questioner-name-input" *ngIf="isQuestionerNameEnabled && enabled">
- <input (focus)="eventService.makeFocusOnInputTrue()"
- (blur)="eventService.makeFocusOnInputFalse()"
+ <input appAccessibilityEscapedInput
matInput
[formControl]="questionerNameFormControl"
name="questioner-name"
diff --git a/src/app/components/shared/write-comment/write-comment.component.ts b/src/app/components/shared/write-comment/write-comment.component.ts
index 3ae4550189c15ddc68b8e346ee77b6dfd5c44f62..994fbffc08e147ebd09287fe2c6424940e3014c6 100644
--- a/src/app/components/shared/write-comment/write-comment.component.ts
+++ b/src/app/components/shared/write-comment/write-comment.component.ts
@@ -3,7 +3,6 @@ import { TranslateService } from '@ngx-translate/core';
import { Language, LanguagetoolResult, LanguagetoolService } from '../../../services/http/languagetool.service';
import { Comment } from '../../../models/comment';
import { NotificationService } from '../../../services/util/notification.service';
-import { EventService } from '../../../services/util/event.service';
import { LanguageService } from '../../../services/util/language.service';
import { ViewCommentDataComponent } from '../view-comment-data/view-comment-data.component';
import { DeepLService, SourceLang, TargetLang } from '../../../services/http/deep-l.service';
@@ -51,7 +50,6 @@ export class WriteCommentComponent implements OnInit {
constructor(private notification: NotificationService,
private languageService: LanguageService,
private translateService: TranslateService,
- public eventService: EventService,
public languagetoolService: LanguagetoolService,
private deeplService: DeepLService,
private dialog: MatDialog) {
diff --git a/src/app/directives/accessibility-escaped-input.directive.spec.ts b/src/app/directives/accessibility-escaped-input.directive.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a844a1d73effd35c8d82f4abdfcacc718fba2642
--- /dev/null
+++ b/src/app/directives/accessibility-escaped-input.directive.spec.ts
@@ -0,0 +1,9 @@
+/*import { AccessibilityEscapedInputDirective } from './accessibility-escaped-input.directive';
+
+describe('AccessibilityEscapedInputDirective', () => {
+ it('should create an instance', () => {
+ const directive = new AccessibilityEscapedInputDirective();
+ expect(directive).toBeTruthy();
+ });
+});
+ */
diff --git a/src/app/directives/accessibility-escaped-input.directive.ts b/src/app/directives/accessibility-escaped-input.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc2f956795ccb9c84a248fb6eae047f8ef1b98f0
--- /dev/null
+++ b/src/app/directives/accessibility-escaped-input.directive.ts
@@ -0,0 +1,30 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+import { EventService } from '../services/util/event.service';
+
+@Directive({
+ selector: '[appAccessibilityEscapedInput]'
+})
+export class AccessibilityEscapedInputDirective implements AfterViewInit {
+
+ constructor(private reference: ElementRef<HTMLElement>,
+ private eventService: EventService) {
+ }
+
+ ngAfterViewInit(): void {
+ const elem = this.reference.nativeElement;
+ elem.addEventListener('focus', this.focus.bind(this));
+ elem.addEventListener('blur', this.blur.bind(this));
+ if (document.activeElement && document.activeElement.contains(elem)) {
+ this.focus();
+ }
+ }
+
+ private focus() {
+ this.eventService.makeFocusOnInputTrue();
+ }
+
+ private blur() {
+ this.eventService.makeFocusOnInputFalse();
+ }
+
+}