@thecb/components 8.4.11-beta.17 → 8.4.11-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.11-beta.17",
+  "version": "8.4.11-beta.19",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/alert/Alert.js

@@ -93,6 +93,7 @@ const Alert = ({
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
       role="alert"
+      aria-atomic={true}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

package/src/components/atoms/checkbox/Checkbox.js

@@ -125,8 +125,6 @@ const Checkbox = ({
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
-            aria-invalid={error}
-            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -26,7 +26,6 @@ const story = page({
 const CountryFormWrapper = ({ fields, actions }) => (
   <Box minHeight="300px">
     <CountryDropdown
-      aria-label="Country"
       labelTextWhenNoError="Country"
       errorMessages={errorMessages}
       options={options}

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

@@ -286,15 +286,15 @@ const Dropdown = ({
     >
       <Box
         as="input"
-        role="combobox"
         aria-multiline="false"
+        autoComplete={autocompleteValue}
+        aria-controls={`${ariaLabelledby}_listbox`}
         aria-activedescendant="focused_option"
         aria-owns={`${ariaLabelledby}_listbox`}
-        aria-controls={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        autoComplete={autocompleteValue}
+        aria-expanded={isOpen}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
         borderSize="1px"
@@ -315,7 +315,6 @@ const Dropdown = ({
         minHeight="48px"
         minWidth="100%"
         name={autocompleteValue}
-        aria-expanded={isOpen}
         onChange={e => {
           // support autofill and copy/paste
           if (e.target.value !== inputValue) {
@@ -325,6 +324,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
         type="text"

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

@@ -220,15 +220,16 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         ) : (
           <InputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={`${createIdFromString(
-              labelTextWhenNoError
-            )}-error-message`}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -240,7 +241,7 @@ const FormInput = ({
             inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
+            data-qa={createIdFromString(labelTextWhenNoError)}
             themeValues={themeValues}
             background={background}
             $customHeight={customHeight}

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

@@ -66,9 +66,10 @@ const FormSelect = ({
       </Box>
       <Dropdown
         ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedby={`${createIdFromString(
-          labelTextWhenNoError
-        )}-error-message`}
+        aria-describedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -91,8 +92,6 @@ const FormSelect = ({
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
         required={options.required}
-        aria-required={options.required}
-        id={`${createIdFromString(labelTextWhenNoError)}-input`}
       />
       <Stack direction="row" justify="space-between">
         <Text

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -50,6 +50,7 @@ const AccountAndRoutingModal = ({
     }}
   >
     <Text
+      role="button"
       variant="pS"
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -177,7 +177,7 @@ const PaymentFormCard = ({
               fieldActions={actions.fields.zipCode}
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-              autocomplete="billing postal-code"
+              autoComplete="billing postal-code"
             />
           </Box>
         )}