diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx index bc5546d2c..043d4c62a 100644 --- a/src/Handles/Handle.tsx +++ b/src/Handles/Handle.tsx @@ -144,6 +144,11 @@ const Handle = React.forwardRef((props, ref) => { // ============================ Offset ============================ const positionStyle = getDirectionStyle(direction, value, min, max); + // ============================= Aria ============================= + function ignoreAriaProp(val: T) { + return valueIndex === null ? undefined : val; + } + // ============================ Render ============================ let handleNode = (
((props, 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((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 index a447d89f5..b5535279b 100644 --- a/src/Handles/index.tsx +++ b/src/Handles/index.tsx @@ -98,11 +98,11 @@ const Handles = React.forwardRef((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 index c3b628fd3..4cdbe6fcc 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -338,6 +338,7 @@ const Slider = React.forwardRef>((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 index 5c63c768f..49fb8fc80 100644 --- 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