fix(Notification): add roles for accessibility

[MuhammadM1998]

🔗 Linked issue

#688

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds a role = "alert" attribute to the Notification component to be read aloud by screen readers on rendering a new toast.
Resolves #688

Before.mp4

After.mp4

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Oct 18, 2023 3:51pm

[HigherOrderLogic]

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.

[Haythamasalama]

You can pass role=alert normally for UNotification or useToast because of v-bind="attrs"

<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>

[MuhammadM1998]

@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.

[benjamincanac]

Are you sure role="alert" is the way to go here? Maybe it would be better to use the role="region" on the UNotifications container and role="status" on each notification?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role

[MuhammadM1998]

After reading the docs, the alert role is a special type of the status role and is used to express important info.

From the alert role on MDN:

The alert role is for important, and usually time-sensitive, information. The alert is a type of status.

Toasts are not highly important nor time-sensitive info. So It may be better indeed to use status. I'll update the code

[MuhammadM1998]

@benjamincanac Sorry for the ping there's no 'request review' button to notify you

[benjamincanac]

@MuhammadM1998 No worries, you can use the draft system to do so. I'll be notified when marking a PR as Ready to review 😊

[benjamincanac]

Thanks 😊