From 0e01ca0a980f0a1bf5bbeac90972a53454711e84 Mon Sep 17 00:00:00 2001 From: Alexander Brown Date: Fri, 12 Sep 2025 23:34:39 -0700 Subject: [PATCH] a11y: Bigger click/touch target for Slider track (#5524) * a11y: Bigger click/touch target for Slider track * a11y: z-index fix and bigger thumb too. --- src/components/ui/slider/Slider.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue index 3ce2eb3d8..a7d27299e 100644 --- a/src/components/ui/slider/Slider.vue +++ b/src/components/ui/slider/Slider.vue @@ -49,7 +49,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) :class=" cn( 'bg-node-stroke relative grow overflow-hidden rounded-full', - 'cursor-pointer', + 'cursor-pointer overflow-visible', + `before:absolute before:-inset-2 before:block before:bg-transparent`, 'data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full', 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5' ) @@ -69,6 +70,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) cn( 'bg-node-component-surface-highlight ring-node-component-surface-selected block size-3.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow]', 'cursor-grab', + 'before:absolute before:-inset-1 before:block before:bg-transparent before:rounded-full', 'hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50', { 'cursor-grabbing': pressed } )