Fix accessibility in inputs

src/app/app.module.ts

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

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

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,

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

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

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

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"

src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts

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

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

src/app/components/creator/_dialogs/tags/tags.component.ts

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

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>

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, ) {
   }
 

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

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

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"

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() {

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',

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

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

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',