Unverified Commit cb3d12a3 authored by Agate's avatar Agate 💬
Browse files

Fix #1134: Use role=alert on forms/toast message to improve accessibility

parent ea8b08ec
Use role=alert on forms/toast message to improve accessibility (#1134)
<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>
......
......@@ -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>
......
......@@ -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>
......
<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>
......
<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>
......
<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>
......
......@@ -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">
......
<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">
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
<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>
......
<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>
......
......@@ -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>
......
<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>
......
......@@ -20,6 +20,8 @@ export default {
...this.message,
}
$("body").toast(params)
$(".ui.toast.visible").last().attr('role', 'alert')
}
}
</script>
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment