add a11y to the buttons on the comments

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>

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!",

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!",

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.",

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.",