mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Merge branch 'refactor-number-input' into 'dev'
Enhance NumberInput component with keyboard & touch accessibility See merge request turris/reforis/foris-js!259
This commit is contained in:
commit
dff5f87e91
|
@ -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 (
|
||||
<Input type="number" onChange={onChange} value={value} {...props}>
|
||||
{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.")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} />
|
||||
</button>
|
||||
|
@ -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.")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMinus} />
|
||||
</button>
|
||||
|
|
|
@ -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("<NumberInput/>", () => {
|
|||
});
|
||||
|
||||
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("<NumberInput/>", () => {
|
|||
});
|
||||
|
||||
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 } })
|
||||
|
|
|
@ -20,8 +20,9 @@ exports[`<NumberInput/> Render number input 1`] = `
|
|||
value="1"
|
||||
/>
|
||||
<button
|
||||
aria-label="Increase"
|
||||
aria-label="Increase value. Hint: Hold to increase faster."
|
||||
class="btn btn-outline-secondary"
|
||||
title="Increase value. Hint: Hold to increase faster."
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
@ -29,8 +30,9 @@ exports[`<NumberInput/> Render number input 1`] = `
|
|||
/>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Decrease"
|
||||
aria-label="Decrease value. Hint: Hold to decrease faster."
|
||||
class="btn btn-outline-secondary"
|
||||
title="Decrease value. Hint: Hold to decrease faster."
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
|
|
Loading…
Reference in New Issue
Block a user