diff --git a/changes/changelog.d/1134.enhancement b/changes/changelog.d/1134.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..3e04439a19f7967cdfc95319916757ec83ca52b1
--- /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 6235e15f80f4487188fcea9c2b2d41f980a3d583..b65389de07e6d4316a37c3e3cdb8c9e54d40a304 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 5cc0ea41c85aab76d22f7bb405aa90c8d87be0d4..d94ec7a7cc8292be2a823b3ec76e61311e17961d 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 2511bc920180393ec07d1be53c02d4071ab9f7bc..06735a4a1eb34380bccca65444d64842d9903cfa 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 component-settings-group" @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 7b6f323aee2e6fd89ca25060737f9335e84de4cc..bc3da7b8e16e2db9020c860a37acc92e49acbf5d 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 0bce4a6b1a16764e59e3c1d3e2cc0af8e8dc20a0..96fecc200f8c0e2f8b166b4d3c66c16b7d957102 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 12988a5092608caff17e2d1a2abf4f6207c0891c..5bc62d208b2a2f13157e9be9d377ee4227a5a3de 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -1,6 +1,6 @@
<template>
- <form class="ui form component-form" @submit.prevent="submit()">
+ <form class="ui form component-form" role="alert" @submit.prevent="submit()">
<div v-if="errors.length > 0" class="ui negative message">
<div class="header"><translate translate-context="Content/*/Error message.Title">We cannot save your changes</translate></div>
<ul class="list">
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index 1ef8c97bc913735cf5eeb6153454569429bbd667..d3df3a80af26a97ca130e5e08dcec3a4d5bc7ded 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 ee0b2cccc1817247b77a5d9e43bca58fd8988ead..889430b2505d220f9de7ec5a29d5905bf3dbaf9f 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">
+ <form class="ui form" @submit.prevent="submit()">
+ <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 6a8aa5b727e4b8af4bb4bd410bcb56ead584f2b9..1326b2c4e114c331e6545d5ce9badadf2b3da3a8 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> <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 744666f69703aec83fb1e3accbcc23f981e1e7ee..d1a2261f986f9012a2bc8e9157a4e43438fc1411 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 b1e1e713b7c42a9f6d70d654419128cf54cfd229..8eeb63d1ef63b513eb5577aa00dce1db8a239b18 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 a904a546cfa8a353d2ddf265b7839e29211647da..b01361403fd17fc134e7eb0da6aea529b360864f 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 821c34c970f2912c902b962de7776e127977c74a..a27682bd7aa94bf811feef0e1431bbfb96b35248 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 component-file-upload']">
- <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 256db8c0b0ae3fd5e7d412162393ac8abe00e4ba..25205af4348bc59e91316d1ca30ff549beb85a6a 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 dccb4eaa16a90916331c711b41eb75cb097ec93c..cf891399d8f4a9e20f5ac09b628632658866b59f 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 e837faa4e3417438fe766fba69f6bf1c37e323c1..9bf713f9565b815856aa9bdabda11e875d5a6467 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 cf90aebdbc8a3a9d1e59816e5878bd24762386f0..d295a0931c2af7887be2165384c83870b9a9daa1 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 cde0959b43cf77ece186f5963d90b85b57e57830..94c265ebc61698f6a47dee878ae9043fb211e5c1 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 4e1bc3053bc730e249e2b33798d6fa62bcaabed6..c337e585d33e5062719cc626187e39d8bf0a0ed8 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 1750e2213602878a0565162caeeb62f8bc3adc6f..7a3741d80e24621bb1185c9c1eef9240c4074f73 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 5ba13b345bc850056d25b6edc7e372c795f87930..f88459c715e47dd932f3ec440e12ff926d80e606 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 d4cc3355fe0fc20ac22a5a7a8d29eaad1a0e51b4..5758d8acda653f3c72dba7f19aef720d0eb5c202 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 bf8932b18ca1f5ae3836b9d1763ab1c4ad01d8a8..26524b75595c02a6699140c3a1da52eef118d78c 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 bfea625338ef71f48c8494f3e9c698184fd2e2f0..73063638118382d0b3f36c25bd0e9e3bf4cb919b 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 60a159998d9b02bfd74b0f8fed6ba78dd6699669..997e3a835c7dff504b16b791ad7525a813db5388 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 349e7499219a4f84a77e55414b2dcfbb43d6c13b..a72bd3e7956bb1ffd33d4aecf683a640839eb014 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 e508784b711fb52c4742ac6021e3d44841329f46..39c64d2cd7973ae53d3ecb5395aa2c4076973f29 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="dangerclose 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 class="ui relaxed divided list duplicate-tracks-list">
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index c0ebbe65d23c06cb1db4e371d19969a3be2bd9a0..026a5b5dd4aa1fc9b912e8466e8e7a9f06aff957 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 19960287a94e35612c79b32440b139f27786572e..317b44a234b4f6ee3cce6a15cfd5776641daa582 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 5c6ca20de4b142f5e2b75a9f8af6b98d8d54ebf3..7d120dafca23afed4e0489768919d9c2f6153edc 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 325729230597dc4a75daeddd0a3a99e95613eb4b..a9288aeb7aff324e1dda54ad016ee92930cf72d0 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 c089570552fb64f6260104b878a42e92bcf4d4ef..1441df2e59f6be78ae4ef2292504c2e426a978a8 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 9f24346c34200f0bd3424bd79e987b62df0e468c..c551d61b18fb299530be6c8c9f25baca7ee38bb9 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 3fa33502068fb9d30cf8cbdd5881588c9ee2117a..2013934aeea46ee7c6807ae1f4ce193614c89cb7 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 ac445303fd70b9f99aae710f1320fbed9026b057..c43e6ca0363e0e1568e7f4697bbd41dee0bb7007 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 9a3ee9ae8db2f2dfdc9a066a719fb2de3c00a770..a3c87de71c08058d75b8e4acf7eddde7e2080fe0 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>