@thecb/components 6.0.7 → 6.0.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.7",
+  "version": "6.0.8-beta.0",
   "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,11 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -205,7 +210,11 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             onChange={e => fieldActions.set(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
@@ -233,6 +242,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/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) {