1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

Compare commits

...

4 Commits

Author SHA1 Message Date
Aleksandr Gumroian
dff5f87e91 Merge branch 'refactor-number-input' into 'dev'
Enhance NumberInput component with keyboard & touch accessibility

See merge request turris/reforis/foris-js!259
2024-12-12 16:49:51 +01:00
Aleksandr Gumroian
38de792390
Update Snapshots 2024-12-12 18:47:38 +03:00
Aleksandr Gumroian
c23616811a
Fix tests 2024-12-12 18:47:33 +03:00
Aleksandr Gumroian
f1132c6b22
Enhance NumberInput component with keyboard & touch accessibility 2024-12-12 18:44:21 +03:00
3 changed files with 39 additions and 7 deletions

View File

@ -50,6 +50,20 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
-1 -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 ( return (
<Input type="number" onChange={onChange} value={value} {...props}> <Input type="number" onChange={onChange} value={value} {...props}>
{inlineText && ( {inlineText && (
@ -60,7 +74,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
className="btn btn-outline-secondary" className="btn btn-outline-secondary"
onMouseDown={() => enableIncrease(true)} onMouseDown={() => enableIncrease(true)}
onMouseUp={() => enableIncrease(false)} 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} /> <FontAwesomeIcon icon={faPlus} />
</button> </button>
@ -69,7 +91,15 @@ function NumberInput({ onChange, inlineText, value, ...props }) {
className="btn btn-outline-secondary" className="btn btn-outline-secondary"
onMouseDown={() => enableDecrease(true)} onMouseDown={() => enableDecrease(true)}
onMouseUp={() => enableDecrease(false)} 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} /> <FontAwesomeIcon icon={faMinus} />
</button> </button>

View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -32,7 +32,7 @@ describe("<NumberInput/>", () => {
}); });
it("Increase number with button", async () => { it("Increase number with button", async () => {
const increaseButton = getByLabelText(componentContainer, "Increase"); const increaseButton = getByLabelText(componentContainer, /Increase/);
fireEvent.mouseDown(increaseButton); fireEvent.mouseDown(increaseButton);
await wait(() => await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } }) expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
@ -40,7 +40,7 @@ describe("<NumberInput/>", () => {
}); });
it("Decrease number with button", async () => { it("Decrease number with button", async () => {
const decreaseButton = getByLabelText(componentContainer, "Decrease"); const decreaseButton = getByLabelText(componentContainer, /Decrease/);
fireEvent.mouseDown(decreaseButton); fireEvent.mouseDown(decreaseButton);
await wait(() => await wait(() =>
expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } }) expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })

View File

@ -20,8 +20,9 @@ exports[`<NumberInput/> Render number input 1`] = `
value="1" value="1"
/> />
<button <button
aria-label="Increase" aria-label="Increase value. Hint: Hold to increase faster."
class="btn btn-outline-secondary" class="btn btn-outline-secondary"
title="Increase value. Hint: Hold to increase faster."
type="button" type="button"
> >
<i <i
@ -29,8 +30,9 @@ exports[`<NumberInput/> Render number input 1`] = `
/> />
</button> </button>
<button <button
aria-label="Decrease" aria-label="Decrease value. Hint: Hold to decrease faster."
class="btn btn-outline-secondary" class="btn btn-outline-secondary"
title="Decrease value. Hint: Hold to decrease faster."
type="button" type="button"
> >
<i <i