@thecb/components 6.0.0-beta.3 → 6.0.0-beta.6

package/package.json

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

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

@@ -74,10 +74,10 @@ const DropdownItemWrapper = styled.div`
 
 const SearchInput = styled.input`
   border: none;
-  background-color: ${({ themeValues }) =>
-    themeValues.hoverColor && themeValues.hoverColor};
+  background-color: transparent;
   font-size: 16px;
   height: 24px;
+  min-width: 80%;
 `;
 
 const Dropdown = ({
@@ -94,7 +94,9 @@ const Dropdown = ({
   widthFitOptions = false,
   disabled,
   hasTitles = false,
-  autoEraseTypeAhead = true // legacy behavior as of 05/22
+  autoEraseTypeAhead = true, // legacy behavior as of 05/22
+  ariaLabelledby,
+  autocompleteValue = "" // autofill item for browsers, like country-name or address-level1 for state
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -161,10 +163,18 @@ const Dropdown = ({
         break;
       case "Backspace" || "Delete":
         e.preventDefault();
-        console.log("input value is", inputValue);
-        console.log("new input value will be", inputValue.slice(0, -1));
         setInputValue(inputValue.slice(0, -1));
         break;
+      case "Home":
+        e.preventDefault();
+        optionRefs.current[0].current.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        optionRefs.current[
+          optionRefs?.current?.length ?? 0 - 1
+        ].current.focus();
+        break;
     }
     if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
@@ -179,7 +189,11 @@ const Dropdown = ({
     );
     console.log("selected refs in isopen useffect", selectedRef);
     console.log("value in isopen useffect", value);
-    if (isOpen && optionRefs.current[0].current) {
+    if (isOpen && selectedRef !== undefined) {
+      // WAI-ARIA requires the selected option to receive focus
+      selectedRef.current.focus();
+    } else if (isOpen && optionRefs.current[0].current) {
+      // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
     }
     clearTimeout(timer);
@@ -207,6 +221,8 @@ const Dropdown = ({
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
+      console.log("filtered options are", filteredOptions);
+      console.log("option refs are", optionRefs);
       onSelect(filteredOptions[0].value);
     }
     if (optionRefs.current[0].current) {
@@ -224,6 +240,10 @@ const Dropdown = ({
       width="100%"
       hoverStyles={`background-color: ${themeValues.hoverColor};`}
       aria-expanded={isOpen}
+      role="combobox"
+      aria-owns={`${ariaLabelledby}_listbox`}
+      aria-haspopup="listbox"
+      aria-labelledby={ariaLabelledby}
       extraStyles={
         disabled &&
         `color: #6e727e;
@@ -256,27 +276,28 @@ const Dropdown = ({
           pointer-events: none;`}
           `}
       >
-        <Stack direction="row" bottomItem={2}>
-          {isOpen ? (
-            <SearchInput
-              aria-label={inputValue || "Dropdown awaiting search value"}
-              value={inputValue}
-              onChange={noop}
-              themeValues={themeValues}
-            />
-          ) : (
-            <Text
-              variant="p"
-              extraStyles={
-                disabled &&
-                `color: #6e727e;
-            background-color: #f7f7f7;
-            pointer-events: none;`
-              }
-            >
-              {getSelection()}
-            </Text>
-          )}
+        <Stack
+          direction="row"
+          bottomItem={2}
+          extraStyles={`position: relative;`}
+        >
+          <SearchInput
+            aria-label={getSelection()}
+            placeholder={getSelection()}
+            value={inputValue}
+            onChange={noop}
+            themeValues={themeValues}
+            role="searchbox"
+            type="text"
+            aria-multiline="false"
+            aria-autocomplete="list"
+            aria-controls={`${ariaLabelledby}_listbox`}
+            aria-activedescendant="selected_option"
+            isOpen={isOpen}
+            tabIndex={-1}
+            name={autocompleteValue}
+            autocomplete={autocompleteValue}
+          />
           <IconWrapper open={isOpen}>
             <DropdownIcon />
           </IconWrapper>
@@ -289,14 +310,20 @@ const Dropdown = ({
           ref={dropdownRef}
           widthFitOptions={widthFitOptions}
           tabIndex={0}
+          role="listbox"
+          id={`${ariaLabelledby}_listbox`}
         >
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => {
-              if (selectedRef === undefined && choice.value === value) {
+              if (
+                choice.value === value &&
+                selectedRef !== optionRefs.current[i]
+              ) {
                 setSelectedRef(optionRefs.current[i]);
               }
               return (
                 <DropdownItemWrapper
+                  id={choice.value === value ? "selected_option" : choice.value}
                   key={choice.value}
                   ref={optionRefs.current[i]}
                   as="button"
@@ -304,13 +331,18 @@ const Dropdown = ({
                   onClick={
                     disabledValues.includes(choice.value)
                       ? evt => evt.preventDefault()
-                      : () => onSelect(choice.value)
+                      : () => {
+                          setSelectedRef(optionRefs.current[i]);
+                          onSelect(choice.value);
+                        }
                   }
                   selected={choice.value === value}
+                  aria-selected={choice.value === value}
                   disabled={disabledValues.includes(choice.value)}
                   data-qa={choice.text}
                   themeValues={themeValues}
                   title={hasTitles ? choice.text : null}
+                  role="option"
                 >
                   <Text
                     variant="p"

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

@@ -58,7 +58,7 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+        ariaLabelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}