@thecb/components 6.0.8 → 6.1.0-beta.2

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -103,6 +103,7 @@ const Dropdown = ({
   hasTitles = false,
   autoEraseTypeAhead = true,
   ariaLabelledby,
+  ariaDescribedby,
   autocompleteValue = "", // browser autofill value, like country-name or address-level1 for state
   smoothScroll = true
 }) => {
@@ -292,6 +293,7 @@ const Dropdown = ({
         aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
         autocomplete={autocompleteValue}
         background={isOpen ? themeValues.hoverColor : WHITE}

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

@@ -3,6 +3,7 @@ import styled, { ThemeContext, css } from "styled-components";
 import { FormattedInput } from "formatted-input";
 import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
+import { createIdFromString } from "../../../util/general.js";
 import Text from "../text";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
@@ -132,7 +133,7 @@ const FormInput = ({
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
-              id={labelTextWhenNoError.replace(/\s+/g, "-")}
+              id={createIdFromString(labelTextWhenNoError)}
             >
               {labelTextWhenNoError}
             </Text>
@@ -157,7 +158,7 @@ const FormInput = ({
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={labelTextWhenNoError.replace(/\s+/g, "-")}
+                id={createIdFromString(labelTextWhenNoError)}
               >
                 {labelTextWhenNoError}
               </Text>
@@ -188,7 +189,15 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -205,7 +214,15 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              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}
@@ -233,6 +250,7 @@ const FormInput = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
+            id={createIdFromString(labelTextWhenNoError, "error message")}
           >
             {errorMessages[field.errors[0]]}
           </Text>

package/src/components/atoms/form-select/FormSelect.js

@@ -6,6 +6,7 @@ import { SelectContainer } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box, Cluster, Stack } from "../layouts";
+import { createIdFromString } from "../../../util/general";
 
 const FormSelect = ({
   fieldActions,
@@ -53,14 +54,18 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={labelTextWhenNoError.replace(/\s+/g, "-")}
+            id={createIdFromString(labelTextWhenNoError)}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -90,6 +95,7 @@ const FormSelect = ({
                 &::first-letter {
                   text-transform: uppercase;
                 }`}
+            id={createIdFromString(labelTextWhenNoError, "error message")}
           >
             {errorMessages[field.errors[0]]}
           </Text>

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js

@@ -50,6 +50,7 @@ const PeriscopeDashboardIframe = ({
     time.timer = setTimeout(() => {
       periscopeDataRequestFailure();
     }, 10000);
+    return () => clearTimeout(time.timer);
   }, []);
 
   const Dashboard = height => url => (
@@ -68,8 +69,10 @@ const PeriscopeDashboardIframe = ({
   const validatePeriscope = message => {
     if (isValidMessage(message)) {
       setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
     }
   };
 

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]"
+      );
+      console.log("inputs with errors...", inputsWithErrors);
+    }
+  }, [showErrors]);
+};
+
+export default useFocusInvalidInput;

package/src/util/general.js

@@ -19,6 +19,19 @@ const createUniqueId = () =>
     .toString(36)
     .substr(2, 9);
 
+export const createIdFromString = (text, postscript, unique = false) => {
+  if (text === undefined) {
+    return createUniqueId();
+  } else {
+    // "first name", undefined, false -> "first-name"
+    // "email address", "error message", false -> "email-address-error-message"
+    // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+    return `${text?.replace(/\s+/g, "-")}${
+      postscript ? `-${postscript?.replace(/\s+/g, "-")}` : ``
+    }${unique ? createUniqueId() : ``}`;
+  }
+};
+
 export const safeChildren = (children, replacement = []) => {
   const unsafeValues = [false, undefined, NaN, null];
   if (children && children instanceof Array) {

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