diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 7544ec35..529ee23c 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -128,6 +128,8 @@ export interface InputNumberProps // Customize handler node upHandler?: React.ReactNode; downHandler?: React.ReactNode; + upAriaLabel?: string; + downAriaLabel?: string; keyboard?: boolean; changeOnWheel?: boolean; @@ -174,6 +176,8 @@ const InputNumber = React.forwardRef((props, r readOnly, upHandler, downHandler, + upAriaLabel, + downAriaLabel, keyboard, changeOnWheel = false, controls = true, @@ -715,13 +719,23 @@ const InputNumber = React.forwardRef((props, r }; const upNode = ( - + {upHandler} ); const downNode = ( - + {downHandler} ); diff --git a/src/StepHandler.tsx b/src/StepHandler.tsx index 53cdb0f0..0edf72f6 100644 --- a/src/StepHandler.tsx +++ b/src/StepHandler.tsx @@ -21,6 +21,7 @@ export interface StepHandlerProps { className?: string; style?: React.CSSProperties; onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void; + 'aria-label'?: string; } export default function StepHandler({ @@ -31,6 +32,7 @@ export default function StepHandler({ className, style, onStep, + 'aria-label': ariaLabel, }: StepHandlerProps) { // ======================== MISC ======================== const isUpAction = action === 'up'; @@ -99,7 +101,7 @@ export default function StepHandler({ onMouseDown={(e) => { onStepMouseDown(e); }} - aria-label={isUpAction ? 'Increase Value' : 'Decrease Value'} + aria-label={ariaLabel ?? (isUpAction ? 'Increase Value' : 'Decrease Value')} aria-disabled={disabled} className={mergedClassName} style={style} diff --git a/tests/renderability.test.tsx b/tests/renderability.test.tsx index fb6cad4c..b8a9bc4e 100644 --- a/tests/renderability.test.tsx +++ b/tests/renderability.test.tsx @@ -18,3 +18,14 @@ it('renders zero step handlers and keeps them interactive', () => { fireEvent.mouseUp(down); expect(onChange).toHaveBeenLastCalledWith(2); }); + +it('supports custom accessible names for step handlers via upAriaLabel and downAriaLabel', () => { + const { getByRole } = render( + , + ); + expect(getByRole('button', { name: 'Augmenter la valeur' })).toBeTruthy(); + expect(getByRole('button', { name: 'Diminuer la valeur' })).toBeTruthy(); +});