chore: opt drag

react-component · Apr 19, 2024 · f6d411f · f6d411f
1 parent 45d54a3
commit f6d411f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
@@ -144,14 +144,19 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   // ============================ Offset ============================
   const positionStyle = getDirectionStyle(direction, value, min, max);
 
+  // ============================= Aria =============================
+  function ignoreAriaProp<T>(val: T) {
+    return valueIndex === null ? undefined : val;
+  }
+
   // ============================ Render ============================
   let handleNode = (
     <div
       ref={ref}
       className={cls(
         handlePrefixCls,
         {
-          [`${handlePrefixCls}-${valueIndex + 1}`]: range,
+          [`${handlePrefixCls}-${valueIndex + 1}`]: ignoreAriaProp(range),
           [`${handlePrefixCls}-dragging`]: dragging,
         },
         classNames.handle,
@@ -167,15 +172,17 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
       onMouseEnter={onInternalMouseEnter}
       onKeyDown={onKeyDown}
       onKeyUp={handleKeyUp}
-      tabIndex={disabled ? null : getIndex(tabIndex, valueIndex)}
+      tabIndex={disabled ? null : ignoreAriaProp(getIndex(tabIndex, valueIndex))}
       role="slider"
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}
       aria-disabled={disabled}
-      aria-label={getIndex(ariaLabelForHandle, valueIndex)}
-      aria-labelledby={getIndex(ariaLabelledByForHandle, valueIndex)}
-      aria-valuetext={getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value)}
+      aria-label={ignoreAriaProp(getIndex(ariaLabelForHandle, valueIndex))}
+      aria-labelledby={ignoreAriaProp(getIndex(ariaLabelledByForHandle, valueIndex))}
+      aria-valuetext={ignoreAriaProp(
+        getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
+      )}
       aria-orientation={direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical'}
       {...restProps}
     />

diff --git a/src/Handles/index.tsx b/src/Handles/index.tsx
@@ -98,11 +98,11 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
           key="a11y"
           {...handleProps}
           value={values[activeIndex]}
-          valueIndex={0}
+          valueIndex={null}
           dragging={draggingIndex !== -1}
           render={activeHandleRender}
           style={{ pointerEvents: 'none' }}
-          tabIndex={-1}
+          tabIndex={null}
           aria-hidden
         />
       )}

diff --git a/src/Slider.tsx b/src/Slider.tsx
@@ -338,6 +338,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       onBeforeChange?.(getTriggerValue(cloneNextValues));
       triggerChange(cloneNextValues);
       if (e) {
+        handlesRef.current.focus(valueIndex);
         onStartDrag(e, valueIndex, cloneNextValues);
       }
     }

diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -1,3 +1,4 @@
+import { useEvent } from 'rc-util';
 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
@@ -60,7 +61,7 @@ function useDrag(
     }
   };
 
-  const updateCacheValue = (valueIndex: number, offsetPercent: number) => {
+  const updateCacheValue = useEvent((valueIndex: number, offsetPercent: number) => {
     // Basic point offset
 
     if (valueIndex === -1) {
@@ -92,11 +93,7 @@ function useDrag(
 
       flushValues(next.values, next.value);
     }
-  };
-
-  // Resolve closure
-  const updateCacheValueRef = React.useRef(updateCacheValue);
-  updateCacheValueRef.current = updateCacheValue;
+  });
 
   const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
     e.stopPropagation();
@@ -138,7 +135,7 @@ function useDrag(
         default:
           offSetPercent = offsetX / width;
       }
-      updateCacheValueRef.current(valueIndex, offSetPercent);
+      updateCacheValue(valueIndex, offSetPercent);
     };
 
     // End