From 3dc8663c3efeaf3d8a90b0e34f665f1b4613df9e Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sat, 13 Nov 2021 12:34:07 +0100
Subject: [PATCH] Improve report modal accessibility

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Report/ReportModal.vue | 27 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/js/src/components/Report/ReportModal.vue b/js/src/components/Report/ReportModal.vue
index abd54ccf1..f7a955078 100644
--- a/js/src/components/Report/ReportModal.vue
+++ b/js/src/components/Report/ReportModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="modal-card">
     <header class="modal-card-head" v-if="title">
-      <p class="modal-card-title">{{ title }}</p>
+      <h2 class="modal-card-title">{{ title }}</h2>
     </header>
 
     <section
@@ -17,7 +17,7 @@
             <article class="media">
               <div class="media-left">
                 <figure class="image is-48x48" v-if="comment.actor.avatar">
-                  <img :src="comment.actor.avatar.url" alt="Image" />
+                  <img :src="comment.actor.avatar.url" alt="" />
                 </figure>
                 <b-icon
                   class="media-left"
@@ -45,12 +45,16 @@
           </p>
 
           <div class="control">
-            <b-input
-              v-model="content"
-              type="textarea"
-              @keyup.enter="confirm"
-              :placeholder="$t('Additional comments')"
-            />
+            <b-field
+              :label="$t('Additional comments')"
+              label-for="additonal-comments"
+            >
+              <b-input
+                v-model="content"
+                type="textarea"
+                id="additonal-comments"
+              />
+            </b-field>
           </div>
 
           <div class="control" v-if="outsideDomain">
@@ -73,7 +77,12 @@
       <button class="button" ref="cancelButton" @click="close">
         {{ translatedCancelText }}
       </button>
-      <button class="button is-primary" ref="confirmButton" @click="confirm">
+      <button
+        class="button is-primary"
+        ref="confirmButton"
+        @click="confirm"
+        @keyup.enter="confirm"
+      >
         {{ translatedConfirmText }}
       </button>
     </footer>