@thecb/components 8.4.11-beta.10 → 8.4.11-beta.11

package/package.json

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

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

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

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

@@ -288,9 +288,9 @@ const Dropdown = ({
         as="input"
         aria-multiline="false"
         aria-autocomplete="list"
-        // aria-activedescendant="focused_option"
-        // aria-owns={`${ariaLabelledby}_listbox`}
-        // 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}
@@ -315,7 +315,7 @@ const Dropdown = ({
         minHeight="48px"
         minWidth="100%"
         name={autocompleteValue}
-        // aria-expanded={isOpen}
+        aria-expanded={isOpen}
         onChange={e => {
           // support autofill and copy/paste
           if (e.target.value !== inputValue) {
@@ -326,6 +326,7 @@ const Dropdown = ({
         padding="12px"
         placeholder={getSelection()}
         themeValues={themeValues}
+        role="combobox"
         title={hasTitles ? getSelection() : null}
         type="text"
         tabIndex={0}
@@ -390,14 +391,14 @@ const Dropdown = ({
                           : MINESHAFT_GREY
                       }
                       extraStyles={`padding-left: 16px; 
-                    cursor: ${
-                      disabledValues.includes(choice.value)
-                        ? "default"
-                        : "pointer"
-                    }; 
-                    white-space: nowrap; 
-                    overflow: hidden; 
-                    text-overflow: ellipsis;`}
+                        cursor: ${
+                          disabledValues.includes(choice.value)
+                            ? "default"
+                            : "pointer"
+                        }; 
+                        white-space: nowrap; 
+                        overflow: hidden; 
+                        text-overflow: ellipsis;`}
                     >
                       {choice.text}
                     </Text>