From b39ba5127b374a61773c1ea4e05d71696fbb3c51 Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Sat, 30 Dec 2023 14:33:01 +0530
Subject: [PATCH] feat: add focusability on carousel element

---
 .../registry/default/ui/carousel/Carousel.vue    | 16 +++++++++-------
 .../registry/new-york/ui/carousel/Carousel.vue   | 16 +++++++++-------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index f83cc530..492a007a 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -10,20 +9,23 @@ const props = withDefaults(defineProps<CarouselProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const forwarded = useForwardPropsEmits(props)
 const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
-  event.preventDefault()
-
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
-  if (event.key === prevKey)
+  if (event.key === prevKey) {
+    event.preventDefault()
     carouselArgs.scrollPrev()
 
-  else if (event.key === nextKey)
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
     carouselArgs.scrollNext()
+  }
 }
 </script>
 
@@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
     :class="cn('relative', $attrs.class ?? '')"
     role="region"
     aria-roledescription="carousel"
-    v-bind="forwarded"
+    tabindex="0"
     @keydown="onKeyDown"
   >
     <slot v-bind="carouselArgs" />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index f83cc530..492a007a 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -10,20 +9,23 @@ const props = withDefaults(defineProps<CarouselProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const forwarded = useForwardPropsEmits(props)
 const carouselArgs = useProvideCarousel(props, emits)
 
 function onKeyDown(event: KeyboardEvent) {
-  event.preventDefault()
-
   const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
   const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
 
-  if (event.key === prevKey)
+  if (event.key === prevKey) {
+    event.preventDefault()
     carouselArgs.scrollPrev()
 
-  else if (event.key === nextKey)
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
     carouselArgs.scrollNext()
+  }
 }
 </script>
 
@@ -32,7 +34,7 @@ function onKeyDown(event: KeyboardEvent) {
     :class="cn('relative', $attrs.class ?? '')"
     role="region"
     aria-roledescription="carousel"
-    v-bind="forwarded"
+    tabindex="0"
     @keydown="onKeyDown"
   >
     <slot v-bind="carouselArgs" />