From cb3d12a34aa1fef2d5aa7fb716732953a22a4d3d Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Fri, 19 Jun 2020 21:13:42 +0200
Subject: [PATCH] Fix #1134: Use role=alert on forms/toast message to improve
 accessibility

---
 changes/changelog.d/1134.enhancement                   |  1 +
 front/src/components/RemoteSearchForm.vue              |  4 ++--
 front/src/components/SetInstanceModal.vue              |  2 +-
 front/src/components/admin/SettingsGroup.vue           |  2 +-
 front/src/components/audio/ChannelForm.vue             |  2 +-
 front/src/components/audio/EmbedWizard.vue             |  2 +-
 front/src/components/auth/ApplicationForm.vue          |  2 +-
 front/src/components/auth/Authorize.vue                |  2 +-
 front/src/components/auth/LoginForm.vue                |  2 +-
 front/src/components/auth/Settings.vue                 | 10 +++++-----
 front/src/components/auth/SignupForm.vue               |  2 +-
 front/src/components/auth/SubsonicTokenForm.vue        |  2 +-
 front/src/components/channels/AlbumForm.vue            |  2 +-
 front/src/components/channels/UploadForm.vue           |  4 ++--
 front/src/components/common/ActionTable.vue            |  2 +-
 front/src/components/common/AttachmentInput.vue        |  2 +-
 front/src/components/common/Message.vue                |  2 ++
 front/src/components/common/RenderedDescription.vue    |  2 +-
 front/src/components/federation/FetchButton.vue        |  4 ++--
 front/src/components/library/EditForm.vue              |  2 +-
 front/src/components/library/ImportStatusModal.vue     |  2 +-
 .../manage/moderation/InstancePolicyForm.vue           |  2 +-
 front/src/components/manage/moderation/NoteForm.vue    |  2 +-
 front/src/components/manage/moderation/ReportCard.vue  |  2 +-
 front/src/components/manage/users/InvitationForm.vue   |  2 +-
 front/src/components/moderation/FilterModal.vue        |  2 +-
 front/src/components/moderation/ReportModal.vue        |  4 ++--
 front/src/components/playlists/Editor.vue              |  4 ++--
 front/src/components/playlists/Form.vue                |  2 +-
 front/src/components/playlists/PlaylistModal.vue       |  4 ++--
 front/src/store/ui.js                                  |  2 +-
 front/src/views/admin/moderation/DomainsList.vue       |  2 +-
 front/src/views/auth/EmailConfirm.vue                  |  2 +-
 front/src/views/auth/PasswordReset.vue                 |  2 +-
 front/src/views/auth/PasswordResetConfirm.vue          |  2 +-
 front/src/views/content/libraries/Form.vue             |  2 +-
 front/src/views/content/remote/ScanForm.vue            |  2 +-
 37 files changed, 48 insertions(+), 45 deletions(-)
 create mode 100644 changes/changelog.d/1134.enhancement

diff --git a/changes/changelog.d/1134.enhancement b/changes/changelog.d/1134.enhancement
new file mode 100644
index 000000000..3e04439a1
--- /dev/null
+++ b/changes/changelog.d/1134.enhancement
@@ -0,0 +1 @@
+Use role=alert on forms/toast message to improve accessibility (#1134)
diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue
index 6235e15f8..b65389de0 100644
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form id="remote-search" :class="['ui', {loading: isLoading}, 'form']" @submit.stop.prevent="submit">
-      <div v-if="errors.length > 0" class="ui negative message">
+      <div v-if="errors.length > 0" role="alert" class="ui negative message">
         <div class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></div>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
@@ -23,7 +23,7 @@
         <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
       </button>
     </form>
-    <div v-if="!isLoading && fetch && fetch.status === 'finished' && !redirectRoute" class="ui warning message">
+    <div v-if="!isLoading && fetch && fetch.status === 'finished' && !redirectRoute" role="alert" class="ui warning message">
       <p><translate translate-context="Content/*/Error message.Title">This kind of object isn't supported yet</translate></p>
     </div>
   </div>
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index a5ff00f8a..da8079645 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -2,7 +2,7 @@
   <modal @update:show="$emit('update:show', $event); isError = false" :show="show">
     <div class="header"><translate translate-context="Popup/Instance/Title">Choose your instance</translate></div>
     <div class="scrolling content">
-      <div v-if="isError" class="ui negative message">
+      <div v-if="isError" role="alert" class="ui negative message">
         <div class="header"><translate translate-context="Popup/Instance/Error message.Title">It is not possible to connect to the given URL</translate></div>
         <ul class="list">
           <li><translate translate-context="Popup/Instance/Error message.List item">The server might be down</translate></li>
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index 2362d046e..5babfedad 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -2,7 +2,7 @@
   <form :id="group.id" class="ui form" @submit.prevent="save">
     <div class="ui divider" />
     <h3 class="ui header">{{ group.label }}</h3>
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 7b6f323ae..bc3da7b8e 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="ui form" @submit.prevent.stop="submit">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving channel</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index eb470b35a..29b4fe9bf 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="ui warning message" v-if="!anonymousCanListen">
+    <div role="alert" class="ui warning message" v-if="!anonymousCanListen">
       <p>
         <strong>
           <translate translate-context="Content/Embed/Message">Sharing will not work because this pod doesn't allow anonymous users to access content.</translate>
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index b8427357a..606828272 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -1,7 +1,7 @@
 <template>
 
   <form class="ui form" @submit.prevent="submit()">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">We cannot save your changes</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index dd9bf6eeb..75ba300eb 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -3,7 +3,7 @@
     <section class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2><i class="lock open icon"></i><translate translate-context="Content/Auth/Title/Verb">Authorize third-party app</translate></h2>
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <div v-if="application" class="header"><translate translate-context="Popup/Moderation/Error message">Error while authorizing application</translate></div>
           <div v-else class="header"><translate translate-context="Popup/Moderation/Error message">Error while fetching application data</translate></div>
           <ul class="list">
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index d14d893dc..b2ac9847c 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
-    <div v-if="error" class="ui negative message">
+    <div v-if="error" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Login/Error message.Title">We cannot log you in</translate></div>
       <ul class="list">
         <li v-if="error == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 588c1c4e1..12400c6d1 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -11,7 +11,7 @@
               <translate translate-context="Content/Settings/Message">Settings updated</translate>
             </div>
           </div>
-          <div v-if="settings.errors.length > 0" class="ui negative message">
+          <div v-if="settings.errors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Settings/Error message.Title">Your settings can't be updated</translate></div>
             <ul class="list">
               <li v-for="error in settings.errors">{{ error }}</li>
@@ -36,7 +36,7 @@
           <translate translate-context="Content/Settings/Title">Avatar</translate>
         </h2>
         <div class="ui form">
-          <div v-if="avatarErrors.length > 0" class="ui negative message">
+          <div v-if="avatarErrors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Settings/Error message.Title">Your avatar cannot be saved</translate></div>
             <ul class="list">
               <li v-for="error in avatarErrors">{{ error }}</li>
@@ -63,7 +63,7 @@
           <translate translate-context="Content/Settings/Paragraph'">Changing your password will also change your Subsonic API password if you have requested one.</translate>&nbsp;<translate translate-context="Content/Settings/Paragraph">You will have to update your password on your clients that use this password.</translate>
         </div>
         <form class="ui form" @submit.prevent="submitPassword()">
-          <div v-if="passwordError" class="ui negative message">
+          <div v-if="passwordError" role="alert" class="ui negative message">
             <div class="header">
               <translate translate-context="Content/Settings/Error message.Title">Your password cannot be changed</translate>
             </div>
@@ -268,11 +268,11 @@
         <p>
           <translate translate-context="Content/Settings/Paragraph'">You can permanently and irreversibly delete your account and all the associated data using the form below. You will be asked for confirmation.</translate>
         </p>
-        <div class="ui warning message">
+        <div role="alert" class="ui warning message">
           <translate translate-context="Content/Settings/Paragraph'">Your account will be deleted from our servers within a few minutes. We will also notify other servers who may have a copy of some of your data so they can proceed to deletion. Please note that some of these servers may be offline or unwilling to comply though.</translate>
         </div>
         <div class="ui form">
-          <div v-if="accountDeleteErrors.length > 0" class="ui negative message">
+          <div v-if="accountDeleteErrors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Settings/Error message.Title">We cannot delete your account</translate></div>
             <ul class="list">
               <li v-for="error in accountDeleteErrors">{{ error }}</li>
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index d78ac4351..8450e776c 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -25,7 +25,7 @@
       <rendered-description :content="formCustomization.help_text" :fetch-html="fetchDescriptionHtml" :permissive="true"></rendered-description>
       <div class="ui hidden divider"></div>
     </template>
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Signup/Form/Paragraph">Your account cannot be created.</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index 67621bf8d..a25d698ec 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -16,7 +16,7 @@
     <div v-if="success" class="ui positive message">
       <div class="header">{{ successMessage }}</div>
     </div>
-    <div v-if="subsonicEnabled && errors.length > 0" class="ui negative message">
+    <div v-if="subsonicEnabled && errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/channels/AlbumForm.vue b/front/src/components/channels/AlbumForm.vue
index a904a546c..b01361403 100644
--- a/front/src/components/channels/AlbumForm.vue
+++ b/front/src/components/channels/AlbumForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form @submit.stop.prevent :class="['ui', {loading: isLoading}, 'form']">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error while creating</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index 951054378..c389861fa 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form @submit.stop.prevent :class="['ui', {loading: isLoadingStep1}, 'form']">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error while publishing</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
@@ -26,7 +26,7 @@
       </div>
     </div>
     <template v-if="step >= 2 && step < 4">
-      <div class="ui warning message" v-if="remainingSpace === 0">
+      <div role="alert" class="ui warning message" v-if="remainingSpace === 0">
         <div class="content">
           <p>
             <i class="warning icon"></i>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 830331382..315576043 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -90,7 +90,7 @@
                   </template>
                 </div>
               </div>
-              <div v-if="actionErrors.length > 0" class="ui negative message">
+              <div v-if="actionErrors.length > 0" role="alert" class="ui negative message">
                 <div class="header"><translate translate-context="Content/*/Error message/Header">Error while applying action</translate></div>
                 <ul class="list">
                   <li v-for="error in actionErrors">{{ error }}</li>
diff --git a/front/src/components/common/AttachmentInput.vue b/front/src/components/common/AttachmentInput.vue
index dccb4eaa1..cf891399d 100644
--- a/front/src/components/common/AttachmentInput.vue
+++ b/front/src/components/common/AttachmentInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui form">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Your attachment cannot be saved</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/common/Message.vue b/front/src/components/common/Message.vue
index e837faa4e..9bf713f95 100644
--- a/front/src/components/common/Message.vue
+++ b/front/src/components/common/Message.vue
@@ -20,6 +20,8 @@ export default {
       ...this.message,
     }
     $("body").toast(params)
+
+    $(".ui.toast.visible").last().attr('role', 'alert')
   }
 }
 </script>
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index cf90aebdb..d295a0931 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -24,7 +24,7 @@
       </span>
     </template>
     <form v-if="isUpdating" class="ui form" @submit.prevent="submit()">
-      <div v-if="errors.length > 0" class="ui negative message">
+      <div v-if="errors.length > 0" role="alert" class="ui negative message">
         <div class="header"><translate translate-context="Content/Channels/Error message.Title">Error while updating description</translate></div>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index c31111ea4..846fcdbfb 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -70,13 +70,13 @@
             <translate translate-context="Popup/*/Loading.Title">Waiting for result…</translate>
           </div>
         </div>
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
-        <div v-else-if="fetch && fetch.status === 'pending' && pollsCount >= maxPolls" class="ui warning message">
+        <div v-else-if="fetch && fetch.status === 'pending' && pollsCount >= maxPolls" role="alert" class="ui warning message">
           <div class="header"><translate translate-context="Popup/*/Message.Title">Refresh pending</translate></div>
           <p><translate translate-context="Popup/*/Message.Content">Refresh request wasn't proceed in time by our server. It will be processed later.</translate></p>
         </div>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index d58de5051..8f2b74782 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -43,7 +43,7 @@
     </edit-list>
     <form class="ui form" @submit.prevent="submit()">
       <div class="ui hidden divider"></div>
-      <div v-if="errors.length > 0" class="ui negative message">
+      <div v-if="errors.length > 0" role="alert" class="ui negative message">
         <div class="header"><translate translate-context="Content/Library/Error message.Title">Error while submitting edit</translate></div>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index 1750e2213..7a3741d80 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -12,7 +12,7 @@
         <div class="ui success message" v-if="upload.import_status === 'finished'">
           <translate translate-context="Popup/Import/Message">Upload was successfully processed by the server.</translate>
         </div>
-        <div class="ui warning message" v-if="upload.import_status === 'skipped'">
+        <div role="alert" class="ui warning message" v-if="upload.import_status === 'skipped'">
           <translate translate-context="Popup/Import/Message">Upload was skipped because a similar one is already available in one of your libraries.</translate>
         </div>
         <div class="ui error message" v-if="upload.import_status === 'errored'">
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index f6b554d00..8bdebbedd 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -4,7 +4,7 @@
       <translate translate-context="Content/Moderation/Card.Title/Verb" v-if="object" key="1">Edit moderation rule</translate>
       <translate translate-context="Content/Moderation/Card.Button.Label/Verb" v-else key="2">Add a new moderation rule</translate>
     </h3>
-    <div v-if="errors && errors.length > 0" class="ui negative message">
+    <div v-if="errors && errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while creating rule</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/manage/moderation/NoteForm.vue b/front/src/components/manage/moderation/NoteForm.vue
index d4cc3355f..5758d8acd 100644
--- a/front/src/components/manage/moderation/NoteForm.vue
+++ b/front/src/components/manage/moderation/NoteForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while submitting note</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 5d167c9ac..d32d19a9c 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -117,7 +117,7 @@
           <h3>
             <translate translate-context="Content/*/*/Short">Reported object</translate>
           </h3>
-          <div v-if="!obj.target" class="ui warning message">
+          <div v-if="!obj.target" role="alert" class="ui warning message">
             <translate translate-context="Content/Moderation/Message">The object associated with this report was deleted.</translate>
           </div>
           <router-link class="ui basic button" v-if="target && configs[target.type].urls.getDetail" :to="configs[target.type].urls.getDetail(obj.target_state)">
diff --git a/front/src/components/manage/users/InvitationForm.vue b/front/src/components/manage/users/InvitationForm.vue
index 1d7023652..8c00e2cc5 100644
--- a/front/src/components/manage/users/InvitationForm.vue
+++ b/front/src/components/manage/users/InvitationForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form class="ui form" @submit.prevent="submit">
-      <div v-if="errors.length > 0" class="ui negative message">
+      <div v-if="errors.length > 0" role="alert" class="ui negative message">
         <div class="header"><translate translate-context="Content/Admin/Error message.Title">Error while creating invitation</translate></div>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index bad0b2a23..b6d3c297a 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -10,7 +10,7 @@
     <div class="scrolling content">
       <div class="description">
 
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <div class="header"><translate translate-context="Popup/Moderation/Error message">Error while creating filter</translate></div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index 103cb203d..745b0dcb7 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -8,7 +8,7 @@
     </h2>
     <div class="scrolling content">
       <div class="description">
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <div class="header"><translate translate-context="Popup/Moderation/Error message">Error while submitting report</translate></div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
@@ -64,7 +64,7 @@
       <div v-else-if="isLoadingReportTypes" class="ui inline active loader">
 
       </div>
-      <div v-else class="ui warning message">
+      <div v-else role="alert" class="ui warning message">
         <div class="header">
           <translate translate-context="Popup/Moderation/Error message">Anonymous reports are disabled, please sign-in to submit a report.</translate>
         </div>
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index bb732301f..26056fecf 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -12,13 +12,13 @@
       <template v-else-if="status === 'errored'">
         <i class="red close icon"></i>
         <translate translate-context="Content/Playlist/Error message.Title">An error occurred while saving your changes</translate>
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
       </template>
-      <div v-else-if="status === 'confirmDuplicateAdd'" class="ui warning message">
+      <div v-else-if="status === 'confirmDuplicateAdd'" role="alert" class="ui warning message">
         <p translate-context="Content/Playlist/Paragraph"
             v-translate="{playlist: playlist.name}">Some tracks in your queue are already in this playlist:</p>
         <ul id="duplicateTrackList" class="ui relaxed divided list">
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 4fc905fc6..9e4fec2e7 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -11,7 +11,7 @@
         </template>
       </div>
     </div>
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Playlist/Error message.Title">The playlist could not be created</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 567ee572c..2870c94ed 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -19,7 +19,7 @@
       <playlist-form :key="formKey"></playlist-form>
       <div class="ui divider"></div>
       <div v-if="playlists.length > 0">
-        <div v-if="showDuplicateTrackAddConfirmation" class="ui warning message">
+        <div v-if="showDuplicateTrackAddConfirmation" role="alert" class="ui warning message">
           <p translate-context="Popup/Playlist/Paragraph"
             v-translate="{track: track.title, playlist: duplicateTrackAddInfo.playlist_name}"
             :translate-params="{track: track.title, playlist: duplicateTrackAddInfo.playlist_name}"><strong>%{ track }</strong> is already in <strong>%{ playlist }</strong>.</p>
@@ -32,7 +32,7 @@
             @click="addToPlaylist(lastSelectedPlaylist, true)">
               <translate translate-context="*/Playlist/Button.Label/Verb">Add anyways</translate></button>
         </div>
-        <div v-if="errors.length > 0" class="ui negative message">
+        <div v-if="errors.length > 0" role="alert" class="ui negative message">
           <div class="header"><translate translate-context="Popup/Playlist/Error message.Title">The track can't be added to a playlist</translate></div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/store/ui.js b/front/src/store/ui.js
index 5c6ca20de..7d120dafc 100644
--- a/front/src/store/ui.js
+++ b/front/src/store/ui.js
@@ -10,7 +10,7 @@ export default {
     momentLocale: 'en',
     lastDate: new Date(),
     maxMessages: 100,
-    messageDisplayDuration: 5 * 1000,
+    messageDisplayDuration: 5 * 10000,
     supportedExtensions: ["flac", "ogg", "mp3", "opus", "aac", "m4a"],
     messages: [],
     theme: 'light',
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index b42d4b228..ea876f93b 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/front/src/views/admin/moderation/DomainsList.vue
@@ -3,7 +3,7 @@
     <section class="ui vertical stripe segment">
       <h2 class="ui left floated header"><translate translate-context="*/Moderation/*/Noun">Domains</translate></h2>
       <form class="ui right floated form" @submit.prevent="createDomain">
-        <div v-if="errors && errors.length > 0" class="ui negative message">
+        <div v-if="errors && errors.length > 0" role="alert" class="ui negative message">
           <div class="header"><translate translate-context="Content/Moderation/Message.Title">Error while creating domain</translate></div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/views/auth/EmailConfirm.vue b/front/src/views/auth/EmailConfirm.vue
index 466a13c9f..ddb965c44 100644
--- a/front/src/views/auth/EmailConfirm.vue
+++ b/front/src/views/auth/EmailConfirm.vue
@@ -4,7 +4,7 @@
       <div class="ui small text container">
         <h2>{{ labels.confirm }}</h2>
         <form v-if="!success" class="ui form" @submit.prevent="submit()">
-          <div v-if="errors.length > 0" class="ui negative message">
+          <div v-if="errors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Signup/Paragraph">Could not confirm your e-mail address</translate></div>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index b60a41146..0df7c4a5e 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -4,7 +4,7 @@
       <div class="ui small text container">
         <h2><translate translate-context="*/Login/*/Verb">Reset your password</translate></h2>
         <form class="ui form" @submit.prevent="submit()">
-          <div v-if="errors.length > 0" class="ui negative message">
+          <div v-if="errors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Signup/Card.Title">Error while asking for a password reset</translate></div>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index 025458ba1..95af41075 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -4,7 +4,7 @@
       <div class="ui small text container">
         <h2>{{ labels.changePassword }}</h2>
         <form v-if="!success" class="ui form" @submit.prevent="submit()">
-          <div v-if="errors.length > 0" class="ui negative message">
+          <div v-if="errors.length > 0" role="alert" class="ui negative message">
             <div class="header"><translate translate-context="Content/Signup/Card.Title">Error while changing your password</translate></div>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index 9918eb42d..6b100a513 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -1,7 +1,7 @@
 <template>
   <form class="ui form" @submit.prevent="submit">
     <p v-if="!library"><translate translate-context="Content/Library/Paragraph">Libraries help you organize and share your music collections. You can upload your own music collection to Funkwhale and share it with your friends and family.</translate></p>
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
diff --git a/front/src/views/content/remote/ScanForm.vue b/front/src/views/content/remote/ScanForm.vue
index 9a3ee9ae8..a3c87de71 100644
--- a/front/src/views/content/remote/ScanForm.vue
+++ b/front/src/views/content/remote/ScanForm.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="ui form" @submit.prevent="scan">
-    <div v-if="errors.length > 0" class="ui negative message">
+    <div v-if="errors.length > 0" role="alert" class="ui negative message">
       <div class="header"><translate translate-context="Content/Library/Error message.Title">Could not fetch remote library</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>