reka-ui 2.9.0 → 2.9.1

package/src/Toast/ToastRootImpl.vue

@@ -182,7 +182,6 @@ provideToastRootContext({ onClose: handleClose })
     v-if="announceTextContent"
     role="alert"
     :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
-    aria-atomic="true"
   >
     {{ announceTextContent }}
   </ToastAnnounce>
@@ -194,9 +193,6 @@ provideToastRootContext({ onClose: handleClose })
     <CollectionItem>
       <Primitive
         :ref="forwardRef"
-        role="alert"
-        aria-live="off"
-        aria-atomic="true"
         tabindex="0"
         v-bind="$attrs"
         :as="as"

package/src/YearPicker/YearPickerGrid.vue

@@ -17,10 +17,15 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
 </script>
 
 <template>
+  <!--
+    role="application" is intentional: it ensures screen readers like NVDA pass
+    keyboard events (arrow keys) to the web app instead of intercepting them
+    for virtual cursor navigation. This is the same pattern used by React Aria.
+  -->
   <Primitive
     v-bind="props"
     tabindex="-1"
-    role="grid"
+    role="application"
     :aria-labelledby="rootContext.headingId"
     :aria-readonly="readonly"
     :aria-disabled="disabled"

package/src/YearRangePicker/YearRangePickerGrid.vue

@@ -17,10 +17,15 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
 </script>
 
 <template>
+  <!--
+    role="application" is intentional: it ensures screen readers like NVDA pass
+    keyboard events (arrow keys) to the web app instead of intercepting them
+    for virtual cursor navigation. This is the same pattern used by React Aria.
+  -->
   <Primitive
     v-bind="props"
     tabindex="-1"
-    role="grid"
+    role="application"
     :aria-labelledby="rootContext.headingId"
     :aria-readonly="readonly"
     :aria-disabled="disabled"

package/src/shared/date/useDateField.ts

@@ -874,9 +874,10 @@ export function useDateField(props: UseDateFieldProps) {
   function handleSegmentKeydown(e: KeyboardEvent) {
     const disabled = props.disabled.value
     const readonly = props.readonly.value
-
     if (disabled || readonly)
       return
+    if (e.key !== kbd.TAB)
+      e.preventDefault()
     const segmentKeydownHandlers = {
       day: handleDaySegmentKeydown,
       month: handleMonthSegmentKeydown,

package/src/shared/useBodyScrollLock.ts

@@ -80,6 +80,8 @@ const useBodyLockStackCount = createSharedComposable(() => {
 
     // let dismissibleLayer set previous pointerEvent first
     nextTick(() => {
+      if (!locked.value)
+        return
       document.body.style.pointerEvents = 'none'
       document.body.style.overflow = 'hidden'
     })

package/src/shared/useHideOthers.ts

@@ -16,7 +16,8 @@ export function useHideOthers(target: MaybeElementRef) {
     // disable hideOthers on test mode
     if (import.meta.env.MODE === 'test')
       return
-    if (el)
+    // Skip if inside a closed native popover
+    if (el && !el.closest('[popover]:not(:popover-open)'))
       undo = hideOthers(el)
     else if (undo)
       undo()