@thecb/components 6.0.9 → 6.1.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.9",
+  "version": "6.1.0-beta.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/form-layouts/FormInput.js

@@ -194,6 +194,10 @@ const FormInput = ({
               labelTextWhenNoError,
               "error message"
             )}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -215,6 +219,10 @@ const FormInput = ({
               labelTextWhenNoError,
               "error message"
             )}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
             onChange={e => fieldActions.set(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}

package/src/util/focusFirstInvalidInputHook.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+const useFocusInvalidInput = (showErrors = false) => {
+  // Only move focus when "showErrors" is true
+  // "showErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  useEffect(() => {
+    if (showErrors) {
+      const inputsWithErrors = document.querySelectorAll(
+        "input[aria-invalid=true]"
+      );
+      inputsWithErrors?.[0]?.focus();
+    }
+  }, [showErrors]);
+};
+
+export default useFocusInvalidInput;

package/src/util/index.js

@@ -1,5 +1,6 @@
 import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 
-export { formats, general, theme };
+export { formats, general, theme, useFocusInvalidInput };