add ariaLiveOnly push option and listAriaLabel Notivue prop

smastrom · Aug 12, 2023 · 4af00f4 · 4af00f4
1 parent 63b56a1
commit 4af00f4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 87 deletions.
diff --git a/demo/components/App.vue b/demo/components/App.vue
diff --git a/packages/notivue/Notivue/AriaLive.vue b/packages/notivue/Notivue/AriaLive.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { getAriaLabel as getAriaLiveContent } from './utils'
+import { NotivueSlot } from 'notivue'
+
+const props = defineProps<{
+   item: NotivueSlot
+}>()
+</script>
+
+<template>
+   <div
+      aria-atomic="true"
+      :role="props.item.ariaRole"
+      :aria-live="props.item.ariaLive"
+      :key="`${item.id}_${item.type}`"
+   >
+      {{ getAriaLiveContent(props.item) }}
+   </div>
+</template>
diff --git a/packages/notivue/Notivue/Notivue.vue b/packages/notivue/Notivue/Notivue.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Teleport, onBeforeUnmount, type Component } from 'vue'
 
+import AriaLive from './AriaLive.vue'
+
 import { useNotivue, useItems, useElements } from '@/core/useStore'
 
 import { useMouseEvents } from './composables/useMouseEvents'
@@ -21,9 +23,17 @@ interface NotivueProps {
     * Notification containers tabIndex map. Only needed if using NotivueKeyboard.
     */
    containersTabIndex?: ContainerTabIndexMap
+   /**
+    * Aria label for the list container. Only effective if using NotivueKeyboard.
+    *
+    * @default 'Notifications List'
+    */
+   listAriaLabel?: string
 }
 
-const props = defineProps<NotivueProps>()
+const props = withDefaults(defineProps<NotivueProps>(), {
+   listAriaLabel: 'Notifications List',
+})
 
 defineSlots<{
    default(item: NotivueSlot & { key?: string }): Component
@@ -55,7 +65,7 @@ onBeforeUnmount(() => {
    <Teleport :to="config.teleportTo.value">
       <!-- List Container -->
       <ol
-         aria-label="Notifications List"
+         :aria-label="props.listAriaLabel"
          v-if="items.entries.value.length > 0"
          v-bind="{ ...mouseEvents, ...touchEvents }"
          :data-notivue-align="config.isTopAlign.value ? 'top' : 'bottom'"
@@ -77,8 +87,12 @@ onBeforeUnmount(() => {
                ...item.positionStyles,
             }"
          >
+            <!-- ariaLiveOnly Push Option -->
+            <AriaLive v-if="item.ariaLiveOnly" :item="item" />
+
             <!-- Notification Container -->
             <div
+               v-else
                :aria-label="getAriaLabel(item)"
                :tabindex="containersTabIndex?.[item.id] ?? -1"
                :data-notivue-container="item.id"

diff --git a/packages/notivue/types.ts b/packages/notivue/types.ts
@@ -96,6 +96,7 @@ export interface PushProps<T extends Obj = Obj> {
 
 export interface PushSpecificOptions {
    skipQueue?: boolean
+   ariaLiveOnly?: boolean
 }
 
 /** Defined by the user when calling push() */