GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-11-03 23:00:31 +01:00
Code Issues Releases Activity

Enhance NumberInput component with keyboard & touch accessibility

Browse Source
This commit is contained in:
Aleksandr Gumroian
2024-12-12 18:44:21 +03:00
parent a63b5bfa4e
commit f1132c6b22
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/bootstrap/NumberInput.js
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>