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

package/dist/index.cjs.js

@@ -19470,7 +19470,8 @@ var Dropdown = function Dropdown(_ref9) {
       _ref9$hasTitles = _ref9.hasTitles,
       hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles,
       _ref9$autoEraseTypeAh = _ref9.autoEraseTypeAhead,
-      autoEraseTypeAhead = _ref9$autoEraseTypeAh === void 0 ? true : _ref9$autoEraseTypeAh;
+      autoEraseTypeAhead = _ref9$autoEraseTypeAh === void 0 ? true : _ref9$autoEraseTypeAh,
+      ariaLabelledby = _ref9.ariaLabelledby;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19526,6 +19527,8 @@ var Dropdown = function Dropdown(_ref9) {
   };
 
   var onKeyDown = function onKeyDown(e) {
+    var _optionRefs$current$l, _optionRefs$current;
+
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
@@ -19579,10 +19582,18 @@ var Dropdown = function Dropdown(_ref9) {
 
       case "Backspace" :
         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$l = optionRefs === null || optionRefs === void 0 ? void 0 : (_optionRefs$current = optionRefs.current) === null || _optionRefs$current === void 0 ? void 0 : _optionRefs$current.length) !== null && _optionRefs$current$l !== void 0 ? _optionRefs$current$l : 0 - 1].current.focus();
+        break;
     }
 
     if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
@@ -19596,7 +19607,11 @@ var Dropdown = function Dropdown(_ref9) {
     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();
     }
 
@@ -19633,6 +19648,10 @@ var Dropdown = function Dropdown(_ref9) {
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen,
+    role: "combobox",
+    "aria-owns": "".concat(ariaLabelledby, "_listbox"),
+    "aria-haspopup": "listbox",
+    "aria-labelledby": ariaLabelledby,
     extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;",
     title: hasTitles ? getSelection() : null
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19644,28 +19663,34 @@ var Dropdown = function Dropdown(_ref9) {
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
-    tabIndex: 0,
     dataQa: placeholder,
     extraStyles: "height: 48px;\n          ".concat(disabled && "color: #6e727e;\n          background-color: #f7f7f7;\n          pointer-events: none;", "\n          ")
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     bottomItem: 2
-  }, isOpen ? /*#__PURE__*/React__default.createElement(SearchInput, {
-    "aria-label": inputValue || "Dropdown awaiting search value",
+  }, /*#__PURE__*/React__default.createElement(SearchInput, {
+    "aria-label": getSelection(),
+    placeholder: getSelection(),
     value: inputValue,
     onChange: noop,
-    themeValues: themeValues
-  }) : /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;"
-  }, getSelection()), /*#__PURE__*/React__default.createElement(IconWrapper, {
+    themeValues: themeValues,
+    role: "searchbox",
+    type: "text",
+    "aria-multiline": "false",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
+    "aria-activedescendant": "selected_option",
+    tabIndex: 0
+  }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
     widthFitOptions: widthFitOptions,
-    tabIndex: 0
+    tabIndex: 0,
+    role: "listbox",
+    id: "".concat(ariaLabelledby, "_listbox")
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, filteredOptions.map(function (choice, i) {
@@ -19674,6 +19699,7 @@ var Dropdown = function Dropdown(_ref9) {
     }
 
     return /*#__PURE__*/React__default.createElement(DropdownItemWrapper, {
+      id: choice.value === value ? "selected_option" : choice.value,
       key: choice.value,
       ref: optionRefs.current[i],
       as: "button",
@@ -19684,10 +19710,12 @@ var Dropdown = function Dropdown(_ref9) {
         return 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
+      title: hasTitles ? choice.text : null,
+      role: "option"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
@@ -19832,7 +19860,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    ariaLabelledby: labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",