From e8d354e2981bf79f10df94d40c59aa8d31291a8f Mon Sep 17 00:00:00 2001
From: Emine Erbay <emine.erbay@mni.thm.de>
Date: Thu, 12 Sep 2019 10:41:15 +0200
Subject: [PATCH] add a11y to the buttons on the comments
---
.../shared/comment/comment.component.html | 35 +++++++++++++++----
src/assets/i18n/creator/de.json | 12 ++++++-
src/assets/i18n/creator/en.json | 10 ++++++
src/assets/i18n/participant/de.json | 2 ++
src/assets/i18n/participant/en.json | 2 ++
5 files changed, 53 insertions(+), 8 deletions(-)
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index cda64559a..407033016 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -17,7 +17,7 @@
</button>
<span class="fill-remaining-space"></span>
<button mat-icon-button *ngIf="!isStudent || comment.correct === 1" [disabled]="isStudent"
- (click)="markCorrect(comment, 1)">
+ (click)="markCorrect(comment, 1)" tabindex="0" attr.aria-labelledby="comment_correct{{ comment.id }}">
<mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
'not-marked' : (comment.correct === 0 || comment.correct === 2)}"
[matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
@@ -25,7 +25,7 @@
</mat-icon>
</button>
<button mat-icon-button *ngIf="!isStudent || comment.correct === 2" [disabled]="isStudent"
- (click)="markCorrect(comment, 2)">
+ (click)="markCorrect(comment, 2)" tabindex="0" attr.aria-labelledby="comment_not_correct{{ comment.id }}">
<mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
'not-marked' : (comment.correct === 0 || comment.correct === 1)}"
[matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
@@ -33,17 +33,19 @@
</mat-icon>
</button>
<button mat-icon-button *ngIf="!isStudent || comment.favorite" [disabled]="isStudent"
- (click)="setFavorite(comment)">
+ (click)="setFavorite(comment)" tabindex="0" attr.aria-labelledby="comment_grade{{ comment.id }}">
<mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
[matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
: ('comment-page.mark-not-favorite' | translate)">grade
</mat-icon>
</button>
- <button mat-icon-button *ngIf="!isStudent" (click)="openDeleteCommentDialog()">
+ <button mat-icon-button *ngIf="!isStudent" (click)="openDeleteCommentDialog()"
+ tabindex="0" attr.aria-labelledby="comment_delete{{ comment.id }}">
<mat-icon class="not-marked" matTooltip="{{ 'comment-page.delete' | translate }}">delete
</mat-icon>
</button>
- <button mat-icon-button *ngIf="!isStudent && moderationEnabled" (click)="setAck(comment)">
+ <button mat-icon-button *ngIf="!isStudent && moderationEnabled" (click)="setAck(comment)"
+ tabindex="0" attr.aria-labelledby="comment_moderation{{ comment.id }}">
<mat-icon class="gavel" [matTooltip]="!comment.ack ? ('comment-page.acknowledge' | translate)
: ('comment-page.reject' | translate)">gavel
</mat-icon>
@@ -62,14 +64,33 @@
<span class="fill-remaining-space click" (click)="openPresentDialog(comment)"></span>
<div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState"
(@rubberBand.done)="resetAnimationState()">
- <button mat-icon-button (click)="voteUp(comment)" matTooltip="{{ 'comment-page.vote-up' | translate }}">
+ <button mat-icon-button (click)="voteUp(comment)" matTooltip="{{ 'comment-page.vote-up' | translate }}"
+ tabindex="0" attr.aria-labelledby="comment_vote_up{{ comment.id }}">
<mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
</button>
<span class="score">{{comment.score}}</span>
- <button mat-icon-button (click)="voteDown(comment)" matTooltip="{{ 'comment-page.vote-down' | translate }}">
+ <button mat-icon-button (click)="voteDown(comment)" matTooltip="{{ 'comment-page.vote-down' | translate }}"
+ tabindex="0" attr.aria-labelledby="comment_vote_down{{ comment.id }}">
<mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
</button>
</div>
</div>
</div>
</mat-card>
+
+<!--Hidden Div's for a11y-Descriptions-->
+<div class="visually-hidden">
+ <div id="comment_correct{{ comment.id }}">{{comment.correct != 1 ? ('comment-page.a11y-comment_not_marked_correct' | translate)
+ : ('comment-page.a11y-comment_marked_correct' | translate) }}
+ </div>
+ <div id="comment_not_correct{{ comment.id }}">{{comment.correct != 2 ? ('comment-page.a11y-comment_not_marked_wrong' | translate)
+ : ('comment-page.a11y-comment_marked_wrong' | translate) }}
+ </div>
+ <div id="comment_grade{{ comment.id }}">{{ !comment.favorite ? ('comment-page.a11y-comment_grade' | translate)
+ : ('comment-page.a11y-comment_not_grade' | translate) }}
+ </div>
+ <div id="comment_delete{{ comment.id }}">{{'comment-page.a11y-comment_delete' | translate}}</div>
+ <div id="comment_moderation{{ comment.id }}">{{'comment-page.a11y-comment_moderation' | translate}}</div>
+ <div id="comment_vote_up{{ comment.id }}">{{'comment-page.a11y-comment_vote_up' | translate}}</div>
+ <div id="comment_vote_down{{ comment.id }}">{{'comment-page.a11y-comment_vote_down' | translate}}</div>
+</div>
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 223306ac4..6b8deca70 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -29,12 +29,22 @@
"wrong": "Verneint"
},
"comment-page": {
+ "a11y-comment_delete": "Löscht diese Frage",
+ "a11y-comment_grade": "Markiert diese Frage als Bonus Frage",
+ "a11y-comment_marked_correct": "Hebt die Bejahung auf",
+ "a11y-comment_marked_wrong": "Hebt die Verneinung auf",
+ "a11y-comment_moderation": "Lehnt diese Frage ab",
+ "a11y-comment_not_grade": "Hebt die Bonus Markierung auf",
+ "a11y-comment_not_marked_correct": "Bejaht diese Frage",
+ "a11y-comment_not_marked_wrong": "Verneint diese Frage",
+ "a11y-comment_vote_down": "Stimmt dieser Frage ab",
+ "a11y-comment_vote_up": "Stimmt dieser Frage zu",
"abort": "Abbrechen",
"ask-question-description": "Gib hier deine Frage ein!",
"acknowledge": "Erlauben",
"cancel": "Zurück",
"cancel-description": "Zurück",
- "comment": "Die Frage {{ comment }} wurde um {{ time }} Uhr gestellt und hat derzeitig {{ votes }} votes.",
+ "comment": "Die Frage {{ comment }} wurde um {{ time }} Uhr gestellt und hat derzeitig {{ votes }} Stimmen.",
"comma": "Microsoft Excel",
"delete": "Frage löschen",
"delimiter": "Bitte wähle ein Format!",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 29850fe70..30c860903 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -29,6 +29,16 @@
"wrong": "Marked as wrong by you"
},
"comment-page": {
+ "a11y-comment_delete": "Deletes this question",
+ "a11y-comment_grade": "Marks this question as a bonus question",
+ "a11y-comment_marked_correct": "Cancels the mark as correct",
+ "a11y-comment_marked_wrong": "Cancels the mark as incorrect",
+ "a11y-comment_moderation": "Rejects this question",
+ "a11y-comment_not_grade": "Cancels the mark as bonus",
+ "a11y-comment_not_marked_correct": "Marks this question correct",
+ "a11y-comment_not_marked_wrong": "Marks this question as not correct",
+ "a11y-comment_vote_down": "Votes down this question",
+ "a11y-comment_vote_up": "Votes up this question",
"abort": "Cancel",
"acknowledge": "Acknowledge",
"ask-question-description": "Enter your question here!",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 53cfa4d8b..b5bb763e6 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -23,6 +23,8 @@
"a11y-not_interested": "Filtert alle verneinten Fragen",
"a11y-search_box": "Geben sie die gewünschte Frage ein",
"a11y-swap_vert": "Option Fragen zu sortieren",
+ "a11y-comment_vote_down": "Stimmt dieser Frage ab",
+ "a11y-comment_vote_up": "Stimmt dieser Frage zu",
"add-comment": "Stell deine Frage!",
"comment-sent": "Die Frage wurde veröffentlicht.",
"comment-sent-to-moderator": "Die Frage wird nun von einem Moderator überprüft.",
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 414fa1536..850a5a38e 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -23,6 +23,8 @@
"a11y-not_interested": "Filters all questions marked as wrong",
"a11y-search_box": "Enter the desired question",
"a11y-swap_vert": "Option to sort questions",
+ "a11y-comment_vote_down": "Votes down this question",
+ "a11y-comment_vote_up": "Votes up this question",
"add-comment": "Ask a question!",
"comment-sent": "The question has been published.",
"comment-sent-to-moderator": "The question will be reviewed by a moderator.",
--
GitLab