Add closeButtonAriaLabel to everymodal

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/App.vue

@@ -9,7 +9,7 @@
         type="is-danger"
         :title="$t('Warning').toLocaleUpperCase()"
         closable
-        aria-close-label="Close"
+        :aria-close-label="$t('Close')"
       >
         <p>
           {{ $t("This is a demonstration site to test Mobilizon.") }}

js/src/components/Comment/Comment.vue

@@ -299,6 +299,10 @@ export default class Comment extends Vue {
         onConfirm: this.reportComment,
         outsideDomain: this.comment.actor.domain,
       },
+      // https://github.com/buefy/buefy/pull/3589
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      closeButtonAriaLabel: this.$t("Close"),
     });
   }
 

js/src/components/Event/EventMetadataList.vue

@@ -62,7 +62,11 @@
         </b-button>
       </p>
     </b-field>
-    <b-modal has-modal-card v-model="showNewElementModal">
+    <b-modal
+      has-modal-card
+      v-model="showNewElementModal"
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <header class="modal-card-head">
           <button

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -46,7 +46,11 @@
       />
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal :active.sync="isComponentModalActive" has-modal-card>
+    <b-modal
+      :active.sync="isComponentModalActive"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <header class="modal-card-head">
           <p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p>

js/src/components/Participation/ParticipationSection.vue

@@ -65,6 +65,7 @@
     <b-modal
       :active.sync="isAnonymousParticipationModalOpen"
       has-modal-card
+      :close-button-aria-label="$t('Close')"
       ref="anonymous-participation-modal"
     >
       <div class="modal-card">

js/src/views/Account/IdentityPickerWrapper.vue

@@ -45,7 +45,11 @@
       </figure>
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal v-model="isComponentModalActive" has-modal-card>
+    <b-modal
+      v-model="isComponentModalActive"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <identity-picker v-model="currentIdentity" />
     </b-modal>
   </div>

js/src/views/Event/Edit.vue

@@ -339,7 +339,12 @@
         {{ $t("Only group moderators can create, edit and delete events.") }}
       </b-message>
     </div>
-    <b-modal v-model="dateSettingsIsOpen" has-modal-card trap-focus>
+    <b-modal
+      v-model="dateSettingsIsOpen"
+      has-modal-card
+      trap-focus
+      :close-button-aria-label="$t('Close')"
+    >
       <form action>
         <div class="modal-card" style="width: auto">
           <header class="modal-card-head">

js/src/views/Event/Event.vue

@@ -325,6 +325,7 @@
         :active.sync="isReportModalActive"
         has-modal-card
         ref="reportModal"
+        :close-button-aria-label="$t('Close')"
       >
         <report-modal
           :on-confirm="reportEvent"
@@ -334,6 +335,7 @@
         />
       </b-modal>
       <b-modal
+        :close-button-aria-label="$t('Close')"
         :active.sync="isShareModalActive"
         has-modal-card
         ref="shareModal"
@@ -344,6 +346,7 @@
         :active.sync="isJoinModalActive"
         has-modal-card
         ref="participationModal"
+        :close-button-aria-label="$t('Close')"
       >
         <identity-picker v-model="identity">
           <template v-slot:footer>
@@ -380,6 +383,7 @@
         :active.sync="isJoinConfirmationModalActive"
         has-modal-card
         ref="joinConfirmationModal"
+        :close-button-aria-label="$t('Close')"
       >
         <div class="modal-card">
           <header class="modal-card-head">
@@ -427,6 +431,7 @@
         </div>
       </b-modal>
       <b-modal
+        :close-button-aria-label="$t('Close')"
         class="map-modal"
         v-if="event.physicalAddress && event.physicalAddress.geom"
         :active.sync="showMap"

js/src/views/Group/Group.vue

@@ -647,6 +647,7 @@
       <b-modal
         v-if="physicalAddress && physicalAddress.geom"
         :active.sync="showMap"
+        :close-button-aria-label="$t('Close')"
       >
         <div class="map">
           <map-leaflet
@@ -660,6 +661,7 @@
       </b-modal>
     </div>
     <b-modal
+      :close-button-aria-label="$t('Close')"
       :active.sync="isReportModalActive"
       has-modal-card
       ref="reportModal"
@@ -673,6 +675,7 @@
       />
     </b-modal>
     <b-modal
+      :close-button-aria-label="$t('Close')"
       v-if="group"
       :active.sync="isShareModalActive"
       has-modal-card

js/src/views/Posts/Post.vue

@@ -176,6 +176,7 @@
       </router-link>
     </section>
     <b-modal
+      :close-button-aria-label="$t('Close')"
       :active.sync="isReportModalActive"
       has-modal-card
       ref="reportModal"
@@ -187,7 +188,12 @@
         @close="$refs.reportModal.close()"
       />
     </b-modal>
-    <b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
+    <b-modal
+      :active.sync="isShareModalActive"
+      has-modal-card
+      ref="shareModal"
+      :close-button-aria-label="$t('Close')"
+    >
       <share-post-modal :post="post" />
     </b-modal>
   </article>

js/src/views/Resources/ResourceFolder.vue

@@ -157,7 +157,11 @@
       :aria-current-label="$t('Current page')"
     >
     </b-pagination>
-    <b-modal :active.sync="renameModal" has-modal-card>
+    <b-modal
+      :active.sync="renameModal"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <section class="modal-card-body">
           <form @submit.prevent="renameResource">
@@ -172,7 +176,11 @@
         </section>
       </div>
     </b-modal>
-    <b-modal :active.sync="moveModal" has-modal-card>
+    <b-modal
+      :active.sync="moveModal"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <section class="modal-card-body">
           <resource-selector
@@ -184,7 +192,11 @@
         </section>
       </div>
     </b-modal>
-    <b-modal :active.sync="createResourceModal" has-modal-card>
+    <b-modal
+      :active.sync="createResourceModal"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <section class="modal-card-body">
           <form @submit.prevent="createResource">
@@ -208,6 +220,7 @@
       has-modal-card
       class="link-resource-modal"
       aria-modal
+      :close-button-aria-label="$t('Close')"
     >
       <div class="modal-card">
         <section class="modal-card-body">

js/src/views/Settings/AccountSettings.vue

@@ -149,6 +149,7 @@
       </b-button>
 
       <b-modal
+        :close-button-aria-label="$t('Close')"
         :active.sync="isDeleteAccountModalActive"
         has-modal-card
         full-screen