diff --git a/src/app/components/home/home-page/home-page.component.ts b/src/app/components/home/home-page/home-page.component.ts
index a9c1adaf3c201c259f5f3c4ca9e6afe1b66db402..1c0c20251a66399d6db89c32660d936b020b5247 100644
--- a/src/app/components/home/home-page/home-page.component.ts
+++ b/src/app/components/home/home-page/home-page.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer2 } from '@angular/core';
+import { EventService } from '../../../services/util/event.service';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
@Component({
selector: 'app-home-page',
@@ -9,11 +11,38 @@ export class HomePageComponent implements OnInit {
deviceType: string;
- constructor() {
+ constructor(
+ private eventService: EventService,
+ private liveAnnouncer: LiveAnnouncer,
+ private _r: Renderer2
+ ) {
}
+
+
ngOnInit() {
this.deviceType = localStorage.getItem('deviceType');
+ this.announce();
+ if (!this.eventService.focusOnInput) {
+ this._r.listen(document, 'keyup', (event) => {
+ if (event.keyCode === 49) {
+ document.getElementById('session_id-input').focus();
+ } else if (event.keyCode === 51) {
+ document.getElementById('new_session-button').focus();
+ } else if (event.keyCode === 52) {
+ document.getElementById('language-menu').focus();
+ } else if (event.keyCode === 57 || event.keyCode === 27) {
+ this.announce();
+ }
+ });
+ }
}
+ public announce() {
+ // this.liveAnnouncer.announce('Willkommen auf dieser Seite' + document.getElementById('announcer_text').textContent, 'assertive');
+ this.liveAnnouncer.announce('Sie befinden sich auf der Startseite von frag Punkt jetzt. ' +
+ 'Drücken Sie die Taste 1, um einen Sitzungs-Code einzugeben, die Taste 2 um auf das Sitzungs-Menü zu gelangen,' +
+ 'die Taste 3 um eine neune Sitzung zu erstellen, die Taste 4 um zur Sprachauswahl zu gelangen, ' +
+ 'oder die Taste 9 um diese Ansage zu wiederholen.', 'assertive');
+ }
}
diff --git a/src/app/components/home/new-landing/new-landing.component.html b/src/app/components/home/new-landing/new-landing.component.html
index 2ed543b39ad11b17c81513b61a9d5390ebbdbe0e..a010c97071f6803fb45998bb5ed7d1aff442f3a2 100644
--- a/src/app/components/home/new-landing/new-landing.component.html
+++ b/src/app/components/home/new-landing/new-landing.component.html
@@ -1,6 +1,6 @@
<div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="20px" fxFill>
<app-room-join></app-room-join>
- <button mat-fab class="fab-extended" (click)="createSession()" aria-labelledby="create-label">
+ <button id="new_session-button" mat-fab class="fab-extended" (click)="createSession()" aria-labelledby="create-label">
<mat-icon class="add">add</mat-icon>
{{'home-page.create-session' | translate}}
</button>
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.ts b/src/app/components/participant/room-participant-page/room-participant-page.component.ts
index a0ab604719791e8a53874e70c88ff3c13eec2228..2a03ceba66b5ed6b4be4ff6cb4dad64261585c2b 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.ts
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.ts
@@ -52,7 +52,7 @@ export class RoomParticipantPageComponent extends RoomPageComponent implements O
document.getElementById('question_answer-button').focus();
} else if (event.keyCode === 51) {
this.liveAnnouncer.announce('Aktueller Sitzungs-Code:' + this.room.shortId.slice(0, 8));
- } else if (event.keyCode === 57) {
+ } else if (event.keyCode === 57 || event.keyCode === 27) {
this.announce();
}
});
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 38ce313f034c5bef2b699c68b1d57bdac043fdeb..99cf9880a37d28d7f0cb7b4bf460d2877082edb6 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -22,7 +22,7 @@
</button>
<span class="fill-remaining-space"></span>
- <button mat-button aria-labelledby="language-label" [matMenuTriggerFor]="langMenu">
+ <button id="language-menu" mat-button aria-labelledby="language-label" [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{'footer.language' | translate}}
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 1982bedde7510d2c4ffb8880f8a83cd773386bb5..f5f9b1e2a9c71064d465650be477590c542ef39c 100644
--- a/src/app/components/shared/room-join/room-join.component.html
+++ b/src/app/components/shared/room-join/room-join.component.html
@@ -2,7 +2,8 @@
<form (ngSubmit)="joinRoom(roomId.value)">
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
<mat-form-field (keyup.enter)="onEnter()">
- <input matInput #roomId type="text" pattern="[0-9 ]*" inputmode="numeric" min="00000000" max="99999999"
+ <input id="session_id-input" matInput #roomId (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+ type="text" pattern="[0-9 ]*" inputmode="numeric" min="00000000" max="99999999"
onkeydown="if(this.value.length - (this.value.split(' ').length -1) === 8 && event.keyCode != 8) return false;
if(this.value.length === 4 && event.keyCode != 8) this.value = this.value + ' ';"
[formControl]="roomFormControl" [errorStateMatcher]="matcher"/>
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 44fbb5e11644026f7ac130026244e5472ddfe2a7..b3614df218046071124782cc54f795f2225cb447 100644
--- a/src/app/components/shared/room-join/room-join.component.ts
+++ b/src/app/components/shared/room-join/room-join.component.ts
@@ -11,6 +11,7 @@ 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';
@Component({
selector: 'app-room-join',
@@ -33,7 +34,8 @@ export class RoomJoinComponent implements OnInit {
public notificationService: NotificationService,
private translateService: TranslateService,
public authenticationService: AuthenticationService,
- private moderatorService: ModeratorService
+ private moderatorService: ModeratorService,
+ private eventService: EventService
) {
}
diff --git a/src/app/services/util/event.service.ts b/src/app/services/util/event.service.ts
index 243726b1cd79fcb9734a0622d18060626a23afe6..056219810c79e76b2d97c120167a181391a9d01d 100644
--- a/src/app/services/util/event.service.ts
+++ b/src/app/services/util/event.service.ts
@@ -9,6 +9,7 @@ interface BroadcastEvent {
export class EventService {
private _eventBus: Subject<BroadcastEvent>;
+ focusOnInput: boolean;
constructor() {
this._eventBus = new Subject<BroadcastEvent>();
@@ -18,6 +19,14 @@ export class EventService {
this._eventBus.next({ key, data });
}
+ makeFocusOnInputTrue() {
+ this.focusOnInput = true;
+ }
+
+ makeFocusOnInputFalse() {
+ this.focusOnInput = false;
+ }
+
on<T>(key: any): Observable<T> {
return this._eventBus.asObservable().pipe(
filter(event => event.key === key),