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 7a657879196ab8e43a398e78d248c9158f3130ae..c52e0d1190b45ba74feba7248c427ad78b278783 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
@@ -9,7 +9,8 @@
(input)="searchComments()" [(ngModel)]="searchInput"
aria-labelledby="search-box-input-description"/>
<mat-placeholder class="placeholder">{{ searchPlaceholder }}</mat-placeholder>
- <button mat-icon-button class="searchBarButton close" *ngIf="searchInput !== '' || search"
+ <button id="search_close-button"
+ mat-icon-button class="searchBarButton close" *ngIf="searchInput !== '' || search"
(click)="hideCommentsList=false; searchInput = ''; search = false; searchPlaceholder = '';">
<mat-icon>close</mat-icon>
</button>
@@ -25,13 +26,15 @@
<mat-icon class="searchBarIcon">search</mat-icon>
</button>
- <button mat-icon-button class="searchBarButton"
+ <button id="sort-button"
+ mat-icon-button class="searchBarButton"
*ngIf="!searchBox.value && comments && comments.length > 0 && !search"
[matMenuTriggerFor]="sortMenu" matTooltip="{{ 'comment-list.sort-comments' | translate }}">
<mat-icon class="searchBarIcon">swap_vert</mat-icon>
</button>
- <button mat-icon-button class="searchBarButton"
+ <button id="filter-button"
+ mat-icon-button class="searchBarButton"
*ngIf="!searchBox.value && comments && comments.length > 0 && !search"
[matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
<mat-icon class="searchBarIcon">filter_list</mat-icon>
diff --git a/src/app/components/moderator/moderator-comment-page/moderator-comment-page.component.ts b/src/app/components/moderator/moderator-comment-page/moderator-comment-page.component.ts
index 4dc7a408afa7c9de9e72b3f6555f47a9a2353307..aee8fc94e0a7e4216888e6cc800c25fd204e2a06 100644
--- a/src/app/components/moderator/moderator-comment-page/moderator-comment-page.component.ts
+++ b/src/app/components/moderator/moderator-comment-page/moderator-comment-page.component.ts
@@ -1,26 +1,30 @@
-import { Component, OnInit, AfterContentInit, Renderer2 } from '@angular/core';
+import { Component, OnInit, Renderer2, OnDestroy, AfterContentInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../../../models/user';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { EventService } from '../../../services/util/event.service';
+import { KeyboardUtils } from '../../../utils/keyboard';
+import { KeyboardKey } from '../../../utils/keyboard/keys';
@Component({
selector: 'app-moderator-comment-page',
templateUrl: './moderator-comment-page.component.html',
styleUrls: ['./moderator-comment-page.component.scss']
})
-export class ModeratorCommentPageComponent implements OnInit, AfterContentInit {
+export class ModeratorCommentPageComponent implements OnInit, OnDestroy, AfterContentInit {
roomId: string;
user: User;
+ listenerFn: () => void;
+
constructor(private route: ActivatedRoute,
private notification: NotificationService,
private authenticationService: AuthenticationService,
- private liveAnnouncer: LiveAnnouncer,
+ public eventService: EventService,
private _r: Renderer2,
- public eventService: EventService) { }
+ private liveAnnouncer: LiveAnnouncer) { }
ngAfterContentInit(): void {
setTimeout( () => {
@@ -30,11 +34,44 @@ export class ModeratorCommentPageComponent implements OnInit, AfterContentInit {
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
+ this.announce();
+ this.listenerFn = this._r.listen(document, 'keyup', (event) => {
+ if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit1) === true && this.eventService.focusOnInput === false) {
+ document.getElementById('searchBox').focus();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit3) === true && this.eventService.focusOnInput === false) {
+ document.getElementById('sort-button').focus();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit4) === true && this.eventService.focusOnInput === false) {
+ document.getElementById('filter-button').focus();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit8) === true && this.eventService.focusOnInput === false) {
+ this.liveAnnouncer.announce('Aktueller Sitzungs-' + document.getElementById('shortId-header').textContent);
+ } else if (
+ KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit9, KeyboardKey.Escape) === true &&
+ this.eventService.focusOnInput === false) {
+ this.announce();
+ } else if (
+ document.getElementById('search_close-button') &&
+ KeyboardUtils.isKeyEvent(event, KeyboardKey.Escape) === true &&
+ this.eventService.focusOnInput === true) {
+ document.getElementById('search_close-button').click();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Escape) === true && this.eventService.focusOnInput === true) {
+ this.eventService.makeFocusOnInputFalse();
+ document.getElementById('sort-button').focus();
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ this.listenerFn();
+ this.eventService.makeFocusOnInputFalse();
}
public announce() {
this.liveAnnouncer.clear();
- this.liveAnnouncer.announce('', 'assertive');
+ this.liveAnnouncer.announce('Du befindest dich auf der Moderations-Seite deiner Sitzung. ' +
+ 'Drücke die Taste 2 um auf das Sitzungs-Menü zu gelangen, ' +
+ 'die Taste 8 um den aktuellen Sitzungs-Code zu hören, oder die Taste 0 um zurück zur Benutzer-Seite zu gelangen. ' +
+ 'Sobald mehrere Fragen vorhanden sind kannst du Fragen suchen und filtern. Mit Taste 1 gelangst du in das Suchfeld,' +
+ 'durch drücken der Escape-Taste wird die Sucheingabe gelöscht. Drücke die Taste 3 um Fragen zu sortieren, ' +
+ 'die Taste 4 um Fragen zu filtern, oder die Taste 9 um diese Ansage zu wiederholen.', 'assertive');
}
-
}
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
index 77c3d19ffc76f832057441dc32020407e2299b37..5a348364c1be5d1838f85abb4da4a709a2dc2b77 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
@@ -6,7 +6,7 @@
<span class="fill-remaining-space"></span>
<mat-card-header fxLayoutAlign="center">
<mat-card-title fxLayoutAlign="center">
- <h2>{{ room.name }}</h2>
+ <h1>{{ room.name }}</h1>
</mat-card-title>
<mat-card-subtitle fxLayoutAlign="center">
<mat-icon *ngIf="moderationEnabled" class="gavel">
@@ -24,25 +24,27 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <h4>{{room.description.trim()}}</h4>
+ <h3>{{room.description.trim()}}</h3>
</mat-card-content>
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1">
<mat-grid-tile>
- <button mat-icon-button [disableRipple]="true"
+ <button id="question_answer-button"
+ mat-icon-button [disableRipple]="true"
routerLink="/moderator/room/{{ room.shortId }}/comments">
<mat-icon matBadge="{{commentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
</mat-icon>
- <h3>{{ 'room-page.public-stream' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" -->
+ <h2>{{ 'room-page.public-stream' | translate}}</h2> <!-- *ngIf="deviceType === 'desktop'" -->
</button>
</mat-grid-tile>
<mat-grid-tile *ngIf="moderationEnabled">
- <button mat-icon-button [disableRipple]="true"
+ <button id="gavel-button"
+ mat-icon-button [disableRipple]="true"
routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
<mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
[ngClass]="{'desktop' : deviceType === 'desktop'}">gavel
</mat-icon>
- <h3>{{ 'room-page.moderating-stream' | translate}}</h3> <!-- *ngIf="deviceType === 'desktop'" -->
+ <h2>{{ 'room-page.moderating-stream' | translate}}</h2> <!-- *ngIf="deviceType === 'desktop'" -->
</button>
</mat-grid-tile>
<!-- <mat-grid-tile>
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
index a6e46c6d4e1ada7013c894b469791d554ccd4e49..c5fbc7d110ef8b22166ebb6fed99629cb84df2f1 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
@@ -79,7 +79,7 @@ mat-grid-list {
margin-bottom: 20px !important;
}
-h2 {
+h1 {
font-size: large;
color: var(--on-surface)!important;
}
@@ -88,7 +88,7 @@ p {
color: var(--on-surface)!important;
}
-h4 {
+h3 {
font-size: medium;
color: var(--on-surface)!important;
padding: 0 1% 0 1%;
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.ts b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.ts
index 7515c835c447c6c7df47dd5f4fa079474367876e..5449ff2679b7656b8a47d591023d955d0e0c52da 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.ts
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterContentInit, Renderer2 } from '@angular/core';
+import { Component, OnInit, Renderer2, OnDestroy, AfterContentInit } from '@angular/core';
import { Room } from '../../../models/room';
import { RoomPageComponent } from '../../shared/room-page/room-page.component';
import { Location } from '@angular/common';
@@ -12,13 +12,15 @@ import { Message } from '@stomp/stompjs';
import { NotificationService } from '../../../services/util/notification.service';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { EventService } from '../../../services/util/event.service';
+import { KeyboardUtils } from '../../../utils/keyboard';
+import { KeyboardKey } from '../../../utils/keyboard/keys';
@Component({
selector: 'app-room-moderator-page',
templateUrl: './room-moderator-page.component.html',
styleUrls: ['./room-moderator-page.component.scss']
})
-export class RoomModeratorPageComponent extends RoomPageComponent implements OnInit, AfterContentInit {
+export class RoomModeratorPageComponent extends RoomPageComponent implements OnInit, OnDestroy, AfterContentInit {
room: Room;
isLoading = true;
@@ -26,6 +28,8 @@ export class RoomModeratorPageComponent extends RoomPageComponent implements OnI
moderatorCommentCounter: number;
viewModuleCount = 1;
+ listenerFn: () => void;
+
constructor(protected location: Location,
protected roomService: RoomService,
protected route: ActivatedRoute,
@@ -34,9 +38,9 @@ export class RoomModeratorPageComponent extends RoomPageComponent implements OnI
protected wsCommentService: WsCommentServiceService,
protected commentService: CommentService,
protected notification: NotificationService,
+ public eventService: EventService,
private liveAnnouncer: LiveAnnouncer,
- private _r: Renderer2,
- public eventService: EventService) {
+ private _r: Renderer2) {
super(roomService, route, location, wsCommentService, commentService);
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
@@ -99,6 +103,38 @@ export class RoomModeratorPageComponent extends RoomPageComponent implements OnI
this.initializeRoom(params['roomId']);
});
this.translateService.use(localStorage.getItem('currentLang'));
+ this.listenerFn = this._r.listen(document, 'keyup', (event) => {
+ if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit1) === true && this.eventService.focusOnInput === false) {
+ document.getElementById('question_answer-button').focus();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit3) === true && this.eventService.focusOnInput === false) {
+ document.getElementById('gavel-button').focus();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit8) === true && this.eventService.focusOnInput === false) {
+ this.liveAnnouncer.clear();
+ this.liveAnnouncer.announce('Aktueller Sitzungs-Name: ' + this.room.name + '. ' +
+ 'Aktueller Sitzungs-Code: ' + this.room.shortId.slice(0, 8));
+ } else if (
+ KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit9, KeyboardKey.Escape) === true &&
+ this.eventService.focusOnInput === false) {
+ this.announce();
+ } else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Escape) === true && this.eventService.focusOnInput === true) {
+ this.eventService.makeFocusOnInputFalse();
+ document.getElementById('question_answer-button').focus();
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ this.listenerFn();
+ this.eventService.makeFocusOnInputFalse();
+ }
+
+ public announce() {
+ this.liveAnnouncer.announce('Du befindest dich in der Sitzung in der du als Moderator gewählt wurdest. ' +
+ 'Drücke die Taste 1 um auf die Fragen-Übersicht zu gelangen, ' +
+ 'die Taste 2 um das Sitzungs-Menü zu öffnen, die Taste 3 um in die Moderationsübersicht zu gelangen, ' +
+ 'die Taste 4 um Einstellungen an der Sitzung vorzunehmen, ' +
+ 'die Taste 8 um den aktuellen Sitzungs-Code zu hören, die Taste 0 um auf den Zurück-Button zu gelangen, ' +
+ 'oder die Taste 9 um diese Ansage zu wiederholen.', 'assertive');
}
copyShortId(): void {
@@ -117,9 +153,4 @@ export class RoomModeratorPageComponent extends RoomPageComponent implements OnI
this.notification.show(msg, '', { duration: 2000 });
});
}
-
- public announce() {
- this.liveAnnouncer.clear();
- this.liveAnnouncer.announce('', 'assertive');
- }
}
diff --git a/src/app/components/shared/comment-page/comment-page.component.ts b/src/app/components/shared/comment-page/comment-page.component.ts
index 3c413f66651c053a6a3de83daa6be2fb4fa9a773..b7909fb5b3b32aa114d52d612a5d1e45f5cd6340 100644
--- a/src/app/components/shared/comment-page/comment-page.component.ts
+++ b/src/app/components/shared/comment-page/comment-page.component.ts
@@ -15,7 +15,6 @@ import { KeyboardKey } from '../../../utils/keyboard/keys';
})
export class CommentPageComponent implements OnInit, OnDestroy, AfterContentInit {
roomId: string;
- shortId: string;
user: User;
listenerFn: () => void;
@@ -34,7 +33,6 @@ export class CommentPageComponent implements OnInit, OnDestroy, AfterContentInit
}
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
- this.shortId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
this.listenerFn = this._r.listen(document, 'keyup', (event) => {
if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit1) === true && this.eventService.focusOnInput === false) {
@@ -51,7 +49,7 @@ export class CommentPageComponent implements OnInit, OnDestroy, AfterContentInit
document.getElementById('filter-button').focus();
} else if (KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit8) === true && this.eventService.focusOnInput === false) {
this.liveAnnouncer.clear();
- this.liveAnnouncer.announce('Aktueller Sitzungs-Code:' + this.shortId.slice(0, 8));
+ this.liveAnnouncer.announce('Aktueller Sitzungs-' + document.getElementById('shortId-header').textContent);
} else if (
KeyboardUtils.isKeyEvent(event, KeyboardKey.Digit9, KeyboardKey.Escape) === true &&
this.eventService.focusOnInput === false
@@ -85,9 +83,9 @@ export class CommentPageComponent implements OnInit, OnDestroy, AfterContentInit
this.liveAnnouncer.announce('Du befindest dich auf der Fragen-Seite deiner Sitzung. ' +
'Drücke die Taste 1 um eine Frage zu stellen, die Taste 2 um auf das Sitzungs-Menü zu gelangen, ' +
'die Taste 8 um den aktuellen Sitzungs-Code zu hören, die Taste 0 um zurück zur Benutzer-Seite zu gelangen. ' +
- 'Sobald mehrere Fragen vorhanden sind, kannst du Fragen suchen und filtern. Mit Taste 3 gelangst du in das Suchfeld,' +
+ 'Sobald mehrere Fragen vorhanden sind kannst du Fragen suchen und filtern. Mit Taste 3 gelangst du in das Suchfeld,' +
'durch drücken der Escape-Taste wird die Sucheingabe gelöscht. Drücke die Taste 4 um Fragen zu sortieren, ' +
- 'oder die Taste 5 um Fragen zu filtern, oder die Taste 9 um diese Ansage zu wiederholen.', 'assertive');
+ 'die Taste 5 um Fragen zu filtern, oder die Taste 9 um diese Ansage zu wiederholen.', 'assertive');
}
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index ed93cf1f15c1940e88ffa0c04f6b506a4785ee1c..ec5e1809a326d53b842cdd7c21a87743f556dc9b 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -23,7 +23,7 @@
gavel
</mat-icon>
</span>
- <h2 *ngIf="router.url.includes('comments')" fxLayoutAlign="center center">
+ <h2 id="shortId-header" *ngIf="router.url.includes('comments')" fxLayoutAlign="center center">
{{'header.id' | translate}}: {{ shortId.slice(0, 4) }} {{ shortId.slice(4, 8) }}
</h2>
<span class="fill-remaining-space"></span>