From fc3f0501488bbef4891ad9e2dd504c16e6372741 Mon Sep 17 00:00:00 2001 From: fseehawer <30494175+fseehawer@users.noreply.github.com> Date: Mon, 9 Mar 2026 09:21:09 +0000 Subject: [PATCH] improve: Fix accessibility: Add ARIA labels and improve keyboard navigation --- src/CircularSlider/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/CircularSlider/index.tsx b/src/CircularSlider/index.tsx index 6b86b896..e16a9a6d 100644 --- a/src/CircularSlider/index.tsx +++ b/src/CircularSlider/index.tsx @@ -450,10 +450,11 @@ const CircularSlider = forwardRef((pr return; } - if (newIndex !== dataIndex) { - const degrees = (newIndex / (state.data.length - 1)) * 360 * getSliderRotation(direction); + if (newIndex !== dataIndex && newIndex >= 0 && newIndex < state.data.length) { + const degrees = (newIndex / Math.max(state.data.length - 1, 1)) * 360 * getSliderRotation(direction); const radians = getRadians(degrees) - state.knobOffset; setKnobPosition(radians); + onChange(state.data[newIndex]); } }, [knobDraggable, trackDraggable, state.data.length, dataIndex, max, min, direction, state.knobOffset, setKnobPosition]); @@ -716,7 +717,8 @@ const CircularSlider = forwardRef((pr aria-valuemax={data.length > 0 ? data.length - 1 : max} aria-valuenow={data.length > 0 ? dataIndex : parseFloat(displayValue)} aria-valuetext={`${prependToValue}${displayValue}${appendToValue}`} - tabIndex={0} + aria-orientation="vertical" + tabIndex={knobDraggable || trackDraggable ? 0 : -1} >