@thecb/components 6.0.0-beta.1 → 6.0.0-beta.4

package/package.json

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

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

@@ -93,12 +93,15 @@ const Dropdown = ({
   maxHeight,
   widthFitOptions = false,
   disabled,
-  hasTitles = false
+  hasTitles = false,
+  autoEraseTypeAhead = true, // legacy behavior as of 05/22
+  ariaLabelledby
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [optionsChanged, setOptionsChanged] = useState(true);
+  const [selectedRef, setSelectedRef] = useState(undefined);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -161,6 +164,16 @@ const Dropdown = ({
         e.preventDefault();
         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();
@@ -169,7 +182,17 @@ const Dropdown = ({
   };
 
   useEffect(() => {
-    if (isOpen && optionRefs.current[0].current) {
+    console.log(
+      "option refs in isopen useffect",
+      optionRefs.current[0].current
+    );
+    console.log("selected refs in isopen useffect", selectedRef);
+    console.log("value in isopen useffect", value);
+    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);
@@ -177,8 +200,10 @@ const Dropdown = ({
   }, [isOpen]);
 
   useEffect(() => {
-    clearTimeout(timer);
-    setTimer(setTimeout(() => setInputValue(""), 2000));
+    if (autoEraseTypeAhead) {
+      clearTimeout(timer);
+      setTimer(setTimeout(() => setInputValue(""), 2000));
+    }
     setFilteredOptions(
       options.filter(
         option =>
@@ -212,6 +237,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;
@@ -235,7 +264,6 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         borderRadius="2px"
-        tabIndex={0}
         dataQa={placeholder}
         extraStyles={`height: 48px;
           ${disabled &&
@@ -245,26 +273,20 @@ const Dropdown = ({
           `}
       >
         <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>
-          )}
+          <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"
+            tabIndex={0}
+          />
           <IconWrapper open={isOpen}>
             <DropdownIcon />
           </IconWrapper>
@@ -277,35 +299,44 @@ const Dropdown = ({
           ref={dropdownRef}
           widthFitOptions={widthFitOptions}
           tabIndex={0}
+          role="listbox"
+          id={`${ariaLabelledby}_listbox`}
         >
           <Stack childGap="0">
-            {filteredOptions.map((choice, i) => (
-              <DropdownItemWrapper
-                key={choice.value}
-                ref={optionRefs.current[i]}
-                as="button"
-                tabIndex={-1}
-                onClick={
-                  disabledValues.includes(choice.value)
-                    ? evt => evt.preventDefault()
-                    : () => onSelect(choice.value)
-                }
-                selected={choice.value === value}
-                disabled={disabledValues.includes(choice.value)}
-                data-qa={choice.text}
-                themeValues={themeValues}
-                title={hasTitles ? choice.text : null}
-              >
-                <Text
-                  variant="p"
-                  color={
-                    choice.value === value
-                      ? WHITE
-                      : disabledValues.includes(choice.value)
-                      ? STORM_GREY
-                      : MINESHAFT_GREY
+            {filteredOptions.map((choice, i) => {
+              if (selectedRef === undefined && choice.value === value) {
+                setSelectedRef(optionRefs.current[i]);
+              }
+              return (
+                <DropdownItemWrapper
+                  id={choice.value === value ? "selected_option" : choice.value}
+                  key={choice.value}
+                  ref={optionRefs.current[i]}
+                  as="button"
+                  tabIndex={-1}
+                  onClick={
+                    disabledValues.includes(choice.value)
+                      ? evt => evt.preventDefault()
+                      : () => onSelect(choice.value)
                   }
-                  extraStyles={`padding-left: 16px; 
+                  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"
+                    color={
+                      choice.value === value
+                        ? WHITE
+                        : disabledValues.includes(choice.value)
+                        ? STORM_GREY
+                        : MINESHAFT_GREY
+                    }
+                    extraStyles={`padding-left: 16px; 
                       cursor: ${
                         disabledValues.includes(choice.value)
                           ? "default"
@@ -314,11 +345,12 @@ const Dropdown = ({
                       white-space: nowrap; 
                       overflow: hidden; 
                       text-overflow: ellipsis;`}
-                >
-                  {choice.text}
-                </Text>
-              </DropdownItemWrapper>
-            ))}
+                  >
+                    {choice.text}
+                  </Text>
+                </DropdownItemWrapper>
+              );
+            })}
           </Stack>
         </DropdownContentWrapper>
       ) : (

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 : ""}