diff --git a/src/bootstrap/NumberInput.js b/src/bootstrap/NumberInput.js index 1a825a5..beaa22d 100644 --- a/src/bootstrap/NumberInput.js +++ b/src/bootstrap/NumberInput.js @@ -50,6 +50,20 @@ function NumberInput({ onChange, inlineText, value, ...props }) { -1 ); + function handleKeyDown(event, enableFunction) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + enableFunction(true); + } + } + + function handleKeyUp(event, enableFunction) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + enableFunction(false); + } + } + return ( {inlineText && ( @@ -60,7 +74,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) { className="btn btn-outline-secondary" onMouseDown={() => enableIncrease(true)} onMouseUp={() => enableIncrease(false)} - aria-label="Increase" + onMouseLeave={() => enableIncrease(false)} + onTouchStart={() => enableIncrease(true)} + onTouchEnd={() => enableIncrease(false)} + onTouchCancel={() => enableIncrease(false)} + onKeyDown={(event) => handleKeyDown(event, enableIncrease)} + onKeyUp={(event) => handleKeyUp(event, enableIncrease)} + onBlur={() => enableIncrease(false)} + title={_("Increase value. Hint: Hold to increase faster.")} + aria-label={_("Increase value. Hint: Hold to increase faster.")} > @@ -69,7 +91,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) { className="btn btn-outline-secondary" onMouseDown={() => enableDecrease(true)} onMouseUp={() => enableDecrease(false)} - aria-label="Decrease" + onMouseLeave={() => enableDecrease(false)} + onTouchStart={() => enableDecrease(true)} + onTouchEnd={() => enableDecrease(false)} + onTouchCancel={() => enableDecrease(false)} + onKeyDown={(event) => handleKeyDown(event, enableDecrease)} + onKeyUp={(event) => handleKeyUp(event, enableDecrease)} + onBlur={() => enableDecrease(false)} + title={_("Decrease value. Hint: Hold to decrease faster.")} + aria-label={_("Decrease value. Hint: Hold to decrease faster.")} > diff --git a/src/bootstrap/__tests__/NumberInput.test.js b/src/bootstrap/__tests__/NumberInput.test.js index 6df7200..c0d89df 100644 --- a/src/bootstrap/__tests__/NumberInput.test.js +++ b/src/bootstrap/__tests__/NumberInput.test.js @@ -1,5 +1,5 @@ /* - * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) + * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/) * * This is free software, licensed under the GNU General Public License v3. * See /LICENSE for more information. @@ -32,7 +32,7 @@ describe("", () => { }); it("Increase number with button", async () => { - const increaseButton = getByLabelText(componentContainer, "Increase"); + const increaseButton = getByLabelText(componentContainer, /Increase/); fireEvent.mouseDown(increaseButton); await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } }) @@ -40,7 +40,7 @@ describe("", () => { }); it("Decrease number with button", async () => { - const decreaseButton = getByLabelText(componentContainer, "Decrease"); + const decreaseButton = getByLabelText(componentContainer, /Decrease/); fireEvent.mouseDown(decreaseButton); await wait(() => expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } }) diff --git a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap index 306ab26..874e03f 100644 --- a/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap +++ b/src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap @@ -20,8 +20,9 @@ exports[` Render number input 1`] = ` value="1" />