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 f2dbaca3957f5093eee7fe1196033162fffa231b..479f44caa662504a9914058801a112c9bd577bde 100644 --- a/src/app/components/shared/comment-list/comment-list.component.html +++ b/src/app/components/shared/comment-list/comment-list.component.html @@ -126,4 +126,5 @@ <div id="close">{{'comment-list.a11y-close' | translate}}</div> <div id="add">{{'comment-list.a11y-add' | translate}}</div> <div id="close_search">{{'comment-list.a11y-close_search' | translate}}</div> + <div id="new-comment">{{ 'comment-page.new-comment' | translate:{comment: newestComment} }}</div> </div> diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts index 40cf441593fdb5f5b7996ab46990139d7a0debc0..543a81065cee00d0a578afb2c1dd6c1f0b8a2a13 100644 --- a/src/app/components/shared/comment-list/comment-list.component.ts +++ b/src/app/components/shared/comment-list/comment-list.component.ts @@ -15,6 +15,7 @@ import { RoomService } from '../../../services/http/room.service'; import { VoteService } from '../../../services/http/vote.service'; import { NotificationService } from '../../../services/util/notification.service'; import { CorrectWrong } from '../../../models/correct-wrong.enum'; +import { LiveAnnouncer } from '@angular/cdk/a11y'; import { EventService } from '../../../services/util/event.service'; @Component({ @@ -52,6 +53,7 @@ export class CommentListComponent implements OnInit { searchPlaceholder = ''; moderationEnabled = false; thresholdEnabled = false; + newestComment: string; constructor(private commentService: CommentService, private translateService: TranslateService, @@ -61,7 +63,8 @@ export class CommentListComponent implements OnInit { protected roomService: RoomService, protected voteService: VoteService, private notificationService: NotificationService, - public eventService: EventService + public eventService: EventService, + public liveAnnouncer: LiveAnnouncer ) { langService.langEmitter.subscribe(lang => translateService.use(lang)); } @@ -168,6 +171,9 @@ export class CommentListComponent implements OnInit { c.body = payload.body; c.id = payload.id; c.timestamp = payload.timestamp; + + this.announceNewComment(c.body); + this.comments = this.comments.concat(c); break; case 'CommentPatched': @@ -305,4 +311,24 @@ export class CommentListComponent implements OnInit { } this.currentSort = type; } + + + /** + * Announces a new comment receive. + */ + public announceNewComment(comment: string) { + // update variable so text will be fetched to DOM + this.newestComment = comment; + + // Currently the only possible way to announce the new comment text + // @see https://github.com/angular/angular/issues/11405 + setTimeout(() => { + const newCommentText: string = document.getElementById('new-comment').innerText; + + // current live announcer content must be cleared before next read + this.liveAnnouncer.clear(); + + this.liveAnnouncer.announce(newCommentText).catch(err => { /* TODO error handling */ }); + }, 450); + } } diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json index 5296e19af6f0a49a2beb2eb53971536d2d0ace51..b00c822f17aa67e11c1a4ffd9a5efbfee8872da2 100644 --- a/src/assets/i18n/creator/de.json +++ b/src/assets/i18n/creator/de.json @@ -69,6 +69,7 @@ "mark-not-wrong": "Frage nicht verneinen", "mark-read": "In Vollansicht am Beamer besprochen", "mark-wrong": "Frage verneinen", + "new-comment": "Eine neue Frage mit dem Inhalt, {{ comment }}, wurde soeben gestellt.", "no-comments": "Keine Fragen vorhanden.", "reject": "Unterbinden", "search-box-input-description": "Hier kannst du nach Fragen suchen.", diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json index 671885f64301b6cd9c41e60fdfbffd52e6444ac7..28867feca228ef554ef2d85bd96a210ac2e015b5 100644 --- a/src/assets/i18n/creator/en.json +++ b/src/assets/i18n/creator/en.json @@ -69,6 +69,7 @@ "mark-not-wrong": "Mark not as wrong", "mark-read": "Discussed by you in full screen mode on the projector", "mark-wrong": "Mark as wrong", + "new-comment": "A new question with the content, {{ comment }}, has been asked.", "no-comments": "No questions yet", "reject": "Reject", "search-box-input-description": "Here you can search for questions.", diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json index 9757c0a535eb3951617fafa2e21d37aeacf0c9cc..b4b5a718eeb66e248a4474f79d1a159b86306355 100644 --- a/src/assets/i18n/participant/de.json +++ b/src/assets/i18n/participant/de.json @@ -62,6 +62,7 @@ "mark-not-favorite": "Bonus-Frage: Dozent hält die Frage für besonders interessant.", "mark-not-wrong": "Dozent hat die Frage verneint", "mark-read": "Dozent hat die Frage im Hörsaal besprochen.", + "new-comment": "Eine neue Frage mit dem Inhalt, {{ comment }}, wurde soeben gestellt.", "no-comments": "", "search-box-input-description": "Hier kannst du nach Fragen suchen.", "send": "Senden", diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json index bbb642e158bd3e637caf01dea12b22af21ce772e..06201e7d306c486ad3fce244f728fdd5f8543862 100644 --- a/src/assets/i18n/participant/en.json +++ b/src/assets/i18n/participant/en.json @@ -62,6 +62,7 @@ "mark-not-favorite": "Bonus question: Your professor intends to give a bonus for that question.", "mark-not-wrong": "Marked as wrong by the professor", "mark-read": "Already discussed by the professor", + "new-comment": "A new question with the content, {{ comment }}, has been asked.", "no-comments": "No questions yet", "search-box-input-description": "Here you can search for questions.", "send": "Send",