mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Enhance NumberInput component with keyboard & touch accessibility
This commit is contained in:
parent
a63b5bfa4e
commit
f1132c6b22
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user