-
Notifications
You must be signed in to change notification settings - Fork 462
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(Notification): add roles for accessibility #724
Conversation
The latest updates on your projects. Learn more about Vercel for Git βοΈ
|
Maybe it's better to make this optional? I don't think everybody will want to have the notifications read out loud for the viewers. |
You can pass <template>
<UNotification role="alert" />
</tempalte> Or <script setup>
const toast = useToast()
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!', role: 'alert'})" />
</tempalte> |
@HigherOrderLogic @Haythamasalama Just to be clear. The notification is read aloud only when using a screen reader which is used by people visually impaired to know that there's something happened. For the normal user there's no change. If you open the deployment link and check the toast example you should not hear anything. Only if you used a screen reader like NVDA. |
Are you sure https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role |
After reading the docs, the From the alert role on MDN:
Toasts are not highly important nor time-sensitive info. So It may be better indeed to use |
@benjamincanac Sorry for the ping there's no 'request review' button to notify you |
@MuhammadM1998 No worries, you can use the draft system to do so. I'll be notified when marking a PR as |
Thanks π |
π Linked issue
#688
β Type of change
π Description
Adds a
role = "alert"
attribute to theNotification
component to be read aloud by screen readers on rendering a new toast.Resolves #688
Before.mp4
After.mp4
π Checklist