From f1132c6b2254701901e268b8469fc025d9d25126 Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Thu, 12 Dec 2024 18:44:21 +0300
Subject: [PATCH 1/3] Enhance NumberInput component with keyboard & touch
 accessibility

---
 src/bootstrap/NumberInput.js | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

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 (
         <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>

From c23616811a068a44d03266356312ad7fdd4990bd Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Thu, 12 Dec 2024 18:47:33 +0300
Subject: [PATCH 2/3] Fix tests

---
 .../__tests__/__snapshots__/NumberInput.test.js.snap        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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[`<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

From 38de7923905dfe0c4b902d13b6b73c6a2c65b74d Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Thu, 12 Dec 2024 18:47:38 +0300
Subject: [PATCH 3/3] Update Snapshots

---
 src/bootstrap/__tests__/NumberInput.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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("<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 } })