fix(Notification): add roles for accessibility (#724)

nuxt · Oct 18, 2023 · 40f3b16 · 40f3b16 · vercel · Oct 18, 2023
1 parent a8279d1
commit 40f3b16
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
@@ -1,6 +1,12 @@
 <template>
   <Transition appear v-bind="ui.transition">
-    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <div
+      :class="wrapperClass"
+      role="status" 
+      v-bind="attrs"
+      @mouseover="onMouseover" 
+      @mouseleave="onMouseleave"
+    >
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
           <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">

diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="wrapperClass" role="region" v-bind="attrs">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification