Merge branch 'refactor-number-input' into 'dev'

Enhance NumberInput component with keyboard & touch accessibility

See merge request turris/reforis/foris-js!259

src/bootstrap/Modal.js

@@ -88,18 +88,21 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
 ModalHeader.propTypes = {
     setShown: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,
+    showCloseButton: PropTypes.bool,
 };
 
-export function ModalHeader({ setShown, title }) {
+export function ModalHeader({ setShown, title, showCloseButton = true }) {
     return (
         <div className="modal-header">
             <h1 className="modal-title fs-5">{title}</h1>
+            {showCloseButton && (
                 <button
                     type="button"
                     className="btn-close"
                     onClick={() => setShown(false)}
                     aria-label={_("Close")}
                 />
+            )}
         </div>
     );
 }

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>

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

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

src/common/RichTable/RichTable.js

@@ -64,13 +64,15 @@ function RichTable({
         },
     });
 
+    const paginationIsNeeded = tableData.length > pageSize && withPagination;
+
     return (
         <div className="table-responsive">
             <table className="table table-hover text-nowrap">
                 <RichTableHeader table={table} flexRender={flexRender} />
                 <RichTableBody table={table} flexRender={flexRender} />
             </table>
-            {withPagination && (
+            {paginationIsNeeded && (
                 <RichTablePagination
                     table={table}
                     tablePageSize={pageSize}

src/common/WiFiSettings/WiFiGuestForm.js

@@ -9,9 +9,10 @@ import React from "react";
 
 import PropTypes from "prop-types";
 
-import { HELP_TEXTS } from "./constants";
+import { HELP_TEXTS, ENCRYPTIONMODES } from "./constants";
 import WiFiQRCode from "./WiFiQRCode";
 import PasswordInput from "../../bootstrap/PasswordInput";
+import Select from "../../bootstrap/Select";
 import Switch from "../../bootstrap/Switch";
 import TextInput from "../../bootstrap/TextInput";
 
@@ -21,6 +22,7 @@ WifiGuestForm.propTypes = {
         SSID: PropTypes.string.isRequired,
         password: PropTypes.string.isRequired,
         enabled: PropTypes.bool.isRequired,
+        encryption: PropTypes.string.isRequired,
     }),
     formErrors: PropTypes.shape({
         SSID: PropTypes.string,
@@ -89,6 +91,20 @@ export default function WifiGuestForm({
                         }))}
                         {...props}
                     />
+                    <Select
+                        label={_("Encryption")}
+                        choices={ENCRYPTIONMODES}
+                        helpText={HELP_TEXTS.wpa3}
+                        value={formData.encryption}
+                        onChange={setFormValue((value) => ({
+                            devices: {
+                                [formData.id]: {
+                                    guest_wifi: { encryption: { $set: value } },
+                                },
+                            },
+                        }))}
+                        {...props}
+                    />
                 </>
             ) : null}
         </>

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -339,7 +339,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 - First value
 + Second value
 
-@@ -524,10 +524,87 @@
+@@ -524,10 +524,124 @@
             <small>
               Enables Wi-Fi for guests, which is separated from LAN network. Devices connected to this network are allowed to access the internet, but aren't allowed to access other devices and the configuration interface of the router. Parameters of the guest network can be set in the Guest network tab.
             </small>
@@ -421,13 +421,50 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
 +             WPA2/3 pre-shared key, that is required to connect to the network.
 +           </small>
 +         </div>
++       </div>
++       <div
++         class="mb-3"
++       >
++         <label
++           class="form-label"
++           for="14"
++         >
++           Encryption
++         </label>
++         <select
++           class="form-select"
++           id="14"
++         >
++           <option
++             value="WPA3"
++           >
++             WPA3 only
++           </option>
++           <option
++             value="WPA2/3"
++           >
++             WPA3 with WPA2 as fallback (default)
++           </option>
++           <option
++             value="WPA2"
++           >
++             WPA2 only
++           </option>
++         </select>
++         <div
++           class="form-text"
++         >
++           <small>
++             The WPA3 standard is the new most secure encryption method that is suggested to be used with any device that supports it. The older devices without WPA3 support require older WPA2. If you experience issues with connecting older devices, try to enable WPA2.
++           </small>
++         </div>
 +       </div>
         <hr />
         <div
           class="form-check form-switch mb-3 d-flex align-items-center"
         >
           <input
-@@ -550,10 +627,11 @@
+@@ -550,10 +664,11 @@
         <div
           class="text-end"
         >