From 571bd5572992b42445f09aaae55bbdfca8046cac Mon Sep 17 00:00:00 2001
From: pfgm49 <paul.fugmann@mni.thm.de>
Date: Mon, 9 Sep 2019 14:48:43 +0200
Subject: [PATCH] Add keyboard-shortcuts and live-announcer to the startpage
---
.../home/home-page/home-page.component.ts | 33 +++++++++++++++++--
.../new-landing/new-landing.component.html | 2 +-
.../room-participant-page.component.ts | 2 +-
.../shared/footer/footer.component.html | 2 +-
.../shared/room-join/room-join.component.html | 3 +-
.../shared/room-join/room-join.component.ts | 4 ++-
src/app/services/util/event.service.ts | 9 +++++
7 files changed, 48 insertions(+), 7 deletions(-)
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 a9c1adaf3..1c0c20251 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 2ed543b39..a010c9707 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 a0ab60471..2a03ceba6 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 38ce313f0..99cf9880a 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 1982bedde..f5f9b1e2a 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 44fbb5e11..b3614df21 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 243726b1c..056219810 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),
--
GitLab