Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add focusability on carousel element

Browse Source
This commit is contained in:
wasimTQ 2023-12-30 14:33:01 +05:30
parent 0ec5604b31
commit b39ba5127b
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
View File

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

16
apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
View File

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