carbon-react 104.10.1 → 104.10.2

package/lib/components/pager/pager.style.js

@@ -15,6 +15,8 @@ var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -108,7 +110,7 @@ const StyledPagerSizeOptions = _styledComponents.default.div`
     min-width: 10px;
     margin: 0px 4px;
 
-    ${_input.default} {
+    ${_selectText.default} {
       font-size: 14px;
       padding-right: 0px;
       padding-left: 8px;

package/lib/components/select/__internal__/select-list-context.d.ts

@@ -0,0 +1,3 @@
+export default SelectListContext;
+declare const SelectListContext: React.Context<{}>;
+import React from "react";

package/lib/components/select/__internal__/select-list-context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SelectListContext = /*#__PURE__*/_react.default.createContext({});
+
+var _default = SelectListContext;
+exports.default = _default;

package/lib/components/select/__internal__/select-text/select-text.component.d.ts

@@ -0,0 +1,30 @@
+export default SelectText;
+declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
+    disabled: any;
+    formattedValue: any;
+    onClick: any;
+    onKeyDown: any;
+    onFocus: any;
+    onBlur: any;
+    onMouseDown: any;
+    placeholder: any;
+    readOnly: any;
+    textId: any;
+    transparent: any;
+}): JSX.Element;
+declare namespace SelectText {
+    namespace propTypes {
+        const disabled: PropTypes.Requireable<boolean>;
+        const formattedValue: PropTypes.Requireable<string>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
+        const placeholder: PropTypes.Requireable<string>;
+        const readOnly: PropTypes.Requireable<boolean>;
+        const transparent: PropTypes.Requireable<boolean>;
+        const textId: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/select/__internal__/select-text/select-text.component.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _selectText = _interopRequireDefault(require("./select-text.style"));
+
+var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
+
+var _inputBehaviour = require("../../../../__internal__/input-behaviour");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const SelectText = ({
+  disabled,
+  formattedValue,
+  onClick,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  onMouseDown,
+  placeholder,
+  readOnly,
+  textId,
+  transparent
+}) => {
+  const l = (0, _useLocale.default)();
+  const inputContext = (0, _react.useContext)(_inputBehaviour.InputContext);
+  const hasPlaceholder = !disabled && !readOnly && !formattedValue;
+  const placeholderText = hasPlaceholder ? placeholder || l.select.placeholder() : "";
+
+  function handleFocus(event) {
+    inputContext.onFocus(event);
+
+    if (onFocus) {
+      onFocus(event);
+    }
+  }
+
+  function handleBlur(event) {
+    inputContext.onBlur(event);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_selectText.default, {
+    "aria-hidden": true,
+    "data-element": "select-text",
+    disabled: disabled,
+    hasPlaceholder: hasPlaceholder,
+    id: textId,
+    onBlur: handleBlur,
+    onClick: onClick,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    readOnly: readOnly,
+    role: "button",
+    tabIndex: "-1",
+    transparent: transparent
+  }, formattedValue || placeholderText);
+};
+
+SelectText.propTypes = {
+  /** If true the Component will be disabled */
+  disabled: _propTypes.default.bool,
+
+  /** Value to be displayed */
+  formattedValue: _propTypes.default.string,
+
+  /** Callback function for when the Select Textbox loses it's focus. */
+  onBlur: _propTypes.default.func,
+
+  /** Callback function for when the component is clicked. */
+  onClick: _propTypes.default.func,
+
+  /** Callback function for when the Select Textbox is focused. */
+  onFocus: _propTypes.default.func,
+
+  /** Callback function for when the key is pressed when focused on Select Text. */
+  onKeyDown: _propTypes.default.func,
+
+  /** Callback function for when the left mouse key is pressed when focused on Select Text. */
+  onMouseDown: _propTypes.default.func,
+
+  /** Placeholder string to be displayed when formattedValue is empty */
+  placeholder: _propTypes.default.string,
+
+  /** If true the Component will be read-only */
+  readOnly: _propTypes.default.bool,
+
+  /** If true the component has no border and a transparent background */
+  transparent: _propTypes.default.bool,
+
+  /** Id of the Select Text element */
+  textId: _propTypes.default.string
+};
+var _default = SelectText;
+exports.default = _default;

package/lib/components/select/__internal__/select-text/select-text.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+export interface SelectTextProps {
+  /** If true the Component will be disabled */
+  disabled?: boolean;
+  /** Value to be displayed */
+  formattedValue?: string;
+  /** Label id passed from Select component  */
+  labelId?: string;
+  /** If true, the list is displayed */
+  isOpen?: boolean;
+  /** Callback function for when the Select Textbox loses it's focus. */
+  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** Callback function for when the component is clicked. */
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Callback function for when the Select Textbox is focused. */
+  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+  /** Callback function for when the key is pressed when focused on Select Text. */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+  /** Callback function for when the left mouse key is pressed when focused on Select Text. */
+  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** Placeholder string to be displayed when formattedValue is empty */
+  placeholder?: string;
+  /** If true the Component will be read-only */
+  readOnly?: boolean;
+  /** If true the component has no border and a transparent background */
+  transparent?: boolean;
+  /** Id of the Select Text element */
+  textId?: string;
+}
+
+declare function SelectText(props: SelectTextProps): JSX.Element;
+
+export default SelectText;

package/lib/components/select/__internal__/select-text/select-text.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSelectText;
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/select/__internal__/select-text/select-text.style.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _themes = require("../../../../style/themes");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledSelectText = _styledComponents.default.span`
+  ${({
+  disabled,
+  hasPlaceholder,
+  readOnly,
+  theme,
+  transparent
+}) => (0, _styledComponents.css)`
+    align-items: center;
+    display: inline-flex;
+    flex-grow: 1;
+    font-size: 14px;
+    height: auto;
+    overflow: hidden;
+    outline: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 30px;
+    z-index: 1;
+
+    ${transparent && (0, _styledComponents.css)`
+      font-weight: 900;
+      text-align: right;
+      flex-direction: row-reverse;
+    `}
+
+    ${hasPlaceholder && (0, _styledComponents.css)`
+      color: ${theme.text.placeholder};
+      font-weight: normal;
+      user-select: none;
+    `}
+
+    ${disabled && (0, _styledComponents.css)`
+      cursor: not-allowed;
+      color: var(--colorsUtilityYin030);
+      text-shadow: none;
+    `}
+
+    ${readOnly && (0, _styledComponents.css)`
+      cursor: default;
+      color: var(--colorsYin065);
+      text-shadow: none;
+    `}
+  `}
+`;
+StyledSelectText.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = StyledSelectText;
+exports.default = _default;

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -67,6 +67,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   ...textboxProps
 }, inputRef) => {
+  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)();
@@ -255,6 +256,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = (0, _react.useCallback)(optionData => {
     const {
+      id: selectedOptionId,
       text,
       value: newValue,
       selectionType
@@ -273,6 +275,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     setTextValue(text);
     triggerChange(newValue);
+    setActiveDescendantId(selectedOptionId);
 
     if (selectionType !== "navigationKey") {
       setOpen(false);
@@ -434,8 +437,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
@@ -444,8 +445,10 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : "",
-    type: "text",
+    activeDescendantId: activeDescendantId,
+    "aria-controls": isOpen ? selectListId.current : undefined,
+    isOpen: isOpen,
+    hasTextCursor: true,
     labelId: labelId.current,
     positionedChildren: disablePortal && isOpen && selectList
   }, getTextboxProps())), !disablePortal && isOpen && selectList);

package/lib/components/select/multi-select/multi-select.component.js

@@ -70,7 +70,9 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   flipEnabled = true,
   ...textboxProps
 }, inputRef) => {
+  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
+  const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
   const labelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)();
   const listboxRef = (0, _react.useRef)();
@@ -163,6 +165,13 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
+  const accessibilityLabel = (0, _react.useMemo)(() => {
+    return selectedValue && selectedValue.length ? _react.default.Children.map(children, child => {
+      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    }).filter(child => child).reduce((acc, item) => {
+      return acc ? `${acc}, ${item}` : item;
+    }, "") : null;
+  }, [children, selectedValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
 
@@ -340,11 +349,13 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const onSelectOption = (0, _react.useCallback)(optionData => {
     const {
       value: newValue,
-      selectionType
+      selectionType,
+      id: selectedOptionId
     } = optionData;
 
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
+      setActiveDescendantId(selectedOptionId);
       return;
     }
 
@@ -440,12 +451,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     multiColumn: multiColumn,
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
-    loaderDataRole: "multi-select-list-loader"
+    loaderDataRole: "multi-select-list-loader",
+    multiselectValues: selectedValue
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     disabled: disabled,
     readOnly: readOnly,
@@ -454,9 +464,15 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : "",
-    type: "text",
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
+    "data-element": "accessibility-label",
+    id: accessibilityLabelId.current
+  }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    accessibilityLabelId: accessibilityLabelId.current,
+    activeDescendantId: activeDescendantId,
+    "aria-controls": isOpen ? selectListId.current : undefined,
+    hasTextCursor: true,
+    isOpen: isOpen,
     labelId: labelId.current,
     positionedChildren: disablePortal && isOpen && selectList
   }, getTextboxProps())), !disablePortal && isOpen && selectList);

package/lib/components/select/multi-select/multi-select.style.d.ts

@@ -1,2 +1,3 @@
 export const StyledSelectPillContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectMultiSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledAccessibilityLabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/select/multi-select/multi-select.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectMultiSelect = exports.StyledSelectPillContainer = void 0;
+exports.StyledAccessibilityLabelContainer = exports.StyledSelectMultiSelect = exports.StyledSelectPillContainer = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -47,6 +47,10 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
   }
 `;
 exports.StyledSelectMultiSelect = StyledSelectMultiSelect;
+const StyledAccessibilityLabelContainer = _styledComponents.default.div`
+  display: none;
+`;
+exports.StyledAccessibilityLabelContainer = StyledAccessibilityLabelContainer;
 StyledSelectPillContainer.defaultProps = {
   theme: _themes.baseTheme
 };

package/lib/components/select/option/option.component.js

@@ -5,46 +5,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _option = _interopRequireDefault(require("./option.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Option = /*#__PURE__*/_react.default.forwardRef(({
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  id,
+  index,
   hidden,
   onClick
 }, ref) => {
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
+  let isSelected = selectListContext.currentOptionsListIndex === index;
+
+  if (selectListContext.multiselectValues) {
+    isSelected = selectListContext.multiselectValues.includes(value);
+  }
+
   function handleClick() {
     if (!onClick) {
       onSelect({
         text,
-        value
+        value,
+        id
       });
     } else {
       onSelect();
       onClick({
         target: {
           text,
-          value
+          value,
+          id
         }
       });
     }
   }
 
   return /*#__PURE__*/_react.default.createElement(_option.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": isSelected,
     "data-component": "option",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children || text);
@@ -60,6 +77,13 @@ Option.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string,
+
   /**
    * @private
    * @ignore
@@ -75,8 +99,8 @@ Option.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

package/lib/components/select/option-row/option-row.component.js

@@ -5,35 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _optionRow = _interopRequireDefault(require("./option-row.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
+  id,
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  index,
   hidden
 }, ref) => {
   const handleClick = () => {
     onSelect({
+      id,
       text,
       value
     });
   };
 
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
   return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": selectListContext.currentOptionsListIndex === index,
     "data-component": "option-row",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children);
@@ -49,6 +59,13 @@ OptionRow.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string.isRequired,
+
   /**
    * @private
    * @ignore
@@ -58,8 +75,8 @@ OptionRow.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

package/lib/components/select/select-list/select-list.component.js

@@ -29,6 +29,10 @@ var _loader = _interopRequireDefault(require("../../loader"));
 
 var _option = _interopRequireDefault(require("../option/option.component"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -84,7 +88,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const anchorRef = (0, _react.useMemo)(() => ({
     current: anchorElement
   }), [anchorElement]);
-  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const optionRefList = (0, _react.useMemo)(() => _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _option.default || (child === null || child === void 0 ? void 0 : child.type) === _optionRow.default) {
       return /*#__PURE__*/_react.default.createRef();
@@ -92,6 +95,26 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     return null;
   }).filter(child => child), [children]);
+  const handleSelect = (0, _react.useCallback)(optionData => {
+    onSelect({ ...optionData,
+      selectionType: "click"
+    });
+  }, [onSelect]);
+  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
+    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
+      return child;
+    }
+
+    const newProps = {
+      index,
+      id: (0, _guid.default)(),
+      onSelect: handleSelect,
+      hidden: isLoading && _react.default.Children.count(children) === 1,
+      ref: optionRefList[index]
+    };
+    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
+  }), [children, handleSelect, isLoading, optionRefList]);
+  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = (0, _react.useMemo)(() => {
     let lastIndex = 0;
     childrenList.forEach((element, index) => {
@@ -131,12 +154,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const {
       text,
-      value
+      value,
+      id: itemId
     } = childrenList[nextIndex].props;
     onSelect({
       text,
       value,
-      selectionType: "navigationKey"
+      selectionType: "navigationKey",
+      id: itemId
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
@@ -174,10 +199,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       const {
+        id: itemId,
         text,
         value
       } = currentOption.props;
       onSelect({
+        id: itemId,
         text,
         value,
         selectionType: "enterKey"
@@ -194,24 +221,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       onListScrollBottom();
     }
   }, [onListScrollBottom]);
-  const handleSelect = (0, _react.useCallback)(optionData => {
-    onSelect({ ...optionData,
-      selectionType: "click"
-    });
-  }, [onSelect]);
-  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
-    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
-      return child;
-    }
-
-    const newProps = {
-      onSelect: handleSelect,
-      isHighlighted: currentOptionsListIndex === index,
-      hidden: isLoading && _react.default.Children.count(children) === 1,
-      ref: optionRefList[index]
-    };
-    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, currentOptionsListIndex, handleSelect, isLoading, optionRefList]);
   const assignListWidth = (0, _react.useCallback)(() => {
     if (!disablePortal && anchorElement) {
       const inputBoundingRect = anchorElement.getBoundingClientRect();
@@ -313,6 +322,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     height: listHeight,
     width: listWidth,
     ref: listContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
+    value: {
+      currentOptionsListIndex
+    }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper",
     height: listHeight,
@@ -324,14 +337,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "select-list",
     role: "listbox",
     ref: listRef,
-    tabIndex: "0",
+    tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn
   }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
-  }))));
+  })))));
 });
 
 SelectList.propTypes = {

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,8 +1,11 @@
 export default SelectTextbox;
-declare function SelectTextbox({ value, disabled, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, selectedValue, required, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
+    accessibilityLabelId?: string | undefined;
+    "aria-controls": any;
     value: any;
     disabled: any;
+    isOpen: any;
     readOnly: any;
     placeholder: any;
     labelId: any;
@@ -10,34 +13,118 @@ declare function SelectTextbox({ value, disabled, readOnly, placeholder, labelId
     onClick: any;
     onFocus: any;
     onBlur: any;
+    onChange: any;
     selectedValue: any;
     required: any;
+    hasTextCursor: any;
+    transparent: any;
+    activeDescendantId: any;
 }): JSX.Element;
 declare namespace SelectTextbox {
-    namespace propTypes {
-        const formattedValue: PropTypes.Requireable<string>;
-        const selectedValue: PropTypes.Requireable<string | object>;
-        const id: PropTypes.Requireable<string>;
-        const name: PropTypes.Requireable<string>;
-        const readOnly: PropTypes.Requireable<boolean>;
-        const disabled: PropTypes.Requireable<boolean>;
-        const autoFocus: PropTypes.Requireable<boolean>;
-        const labelId: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<string>;
-        const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const labelInline: PropTypes.Requireable<boolean>;
-        const labelWidth: PropTypes.Requireable<number>;
-        const inputWidth: PropTypes.Requireable<number>;
-        const size: PropTypes.Requireable<string>;
-        const placeholder: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
-        const required: PropTypes.Requireable<boolean>;
-    }
+    const propTypes: {
+        /**
+         * @ignore
+         * @private
+         * Id attribute of the select list
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * Value to be displayed in the Textbox */
+        formattedValue: PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * If true, the input will be displayed */
+        hasTextCursor: PropTypes.Requireable<boolean>;
+        /**
+         * @private
+         * @ignore
+         * Value of the Select Input */
+        selectedValue: PropTypes.Requireable<string | object>;
+        /**
+         * Id of the element containing the currently displayed value
+         * to be read by voice readers
+         * @private
+         * @ignore
+         */
+        accessibilityLabelId: PropTypes.Requireable<string>;
+        /** Id attribute of the input element */
+        id: PropTypes.Requireable<string>;
+        /** Name attribute of the input element */
+        name: PropTypes.Requireable<string>;
+        /** If true the Component will be read-only */
+        readOnly: PropTypes.Requireable<boolean>;
+        /** If true the Component will be disabled */
+        disabled: PropTypes.Requireable<boolean>;
+        /** If true the Component will be focused when rendered */
+        autoFocus: PropTypes.Requireable<boolean>;
+        /**
+         * Label id passed from Select component
+         * @private
+         * @ignore
+         *
+         */
+        labelId: PropTypes.Requireable<string>;
+        /** Label */
+        label: PropTypes.Requireable<string>;
+        /** Text applied to label help tooltip */
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** When true, label is placed in line with an input */
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Width of a label in percentage. Works only when labelInline is true */
+        labelWidth: PropTypes.Requireable<number>;
+        /** Width of an input in percentage. Works only when labelInline is true */
+        inputWidth: PropTypes.Requireable<number>;
+        /**
+         * @ignore
+         * @private
+         * If true, the select is open
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /** Size of an input */
+        size: PropTypes.Requireable<string>;
+        /** Placeholder string to be displayed in input */
+        placeholder: PropTypes.Requireable<string>;
+        /** A custom callback for when changes occur */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is clicked. */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is focused. */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox loses it's focus. */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the key is pressed when focused on Select Textbox. */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+    };
+}
+export namespace formInputPropTypes {
+    const accessibilityLabelId: PropTypes.Requireable<string>;
+    const id: PropTypes.Requireable<string>;
+    const name: PropTypes.Requireable<string>;
+    const readOnly: PropTypes.Requireable<boolean>;
+    const disabled: PropTypes.Requireable<boolean>;
+    const autoFocus: PropTypes.Requireable<boolean>;
+    const labelId: PropTypes.Requireable<string>;
+    const label: PropTypes.Requireable<string>;
+    const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    const labelInline: PropTypes.Requireable<boolean>;
+    const labelWidth: PropTypes.Requireable<number>;
+    const inputWidth: PropTypes.Requireable<number>;
+    const isOpen: PropTypes.Requireable<boolean>;
+    const size: PropTypes.Requireable<string>;
+    const placeholder: PropTypes.Requireable<string>;
+    const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+    const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+    const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    const adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+    const required: PropTypes.Requireable<boolean>;
 }
-export namespace formInputPropTypes { }
 import PropTypes from "prop-types";

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formInputPropTypes = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,13 +13,24 @@ var _textbox = _interopRequireDefault(require("../../textbox"));
 
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 
+var _selectText = _interopRequireDefault(require("../__internal__/select-text/select-text.component"));
+
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const SelectTextbox = ({
+  accessibilityLabelId = "",
+  "aria-controls": ariaControls,
   value,
   disabled,
+  isOpen,
   readOnly,
   placeholder,
   labelId,
@@ -27,11 +38,16 @@ const SelectTextbox = ({
   onClick,
   onFocus,
   onBlur,
+  onChange,
   selectedValue,
   required,
+  hasTextCursor,
+  transparent,
+  activeDescendantId,
   ...restProps
 }) => {
   const l = (0, _useLocale.default)();
+  const textId = (0, _react.useRef)((0, _guid.default)());
 
   function handleTextboxClick(event) {
     if (disabled || readOnly) {
@@ -59,7 +75,7 @@ const SelectTextbox = ({
 
   function getTextboxProps() {
     return {
-      placeholder: placeholder || l.select.placeholder(),
+      placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined,
       disabled,
       readOnly,
       required,
@@ -67,20 +83,63 @@ const SelectTextbox = ({
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
       labelId,
+      type: "text",
       ...restProps
     };
   }
 
+  function getInputAriaAttributes() {
+    return {
+      "aria-expanded": isOpen,
+      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-activedescendant": activeDescendantId,
+      "aria-controls": ariaControls,
+      "aria-autocomplete": hasTextCursor ? "both" : undefined,
+      role: readOnly ? undefined : "combobox"
+    };
+  }
+
+  function renderSelectText() {
+    if (hasTextCursor) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_selectText.default, _extends({
+      textId: textId.current,
+      transparent: transparent,
+      onKeyDown: handleSelectTextKeydown
+    }, getTextboxProps()));
+  }
+
+  function handleSelectTextKeydown(event) {
+    if (event.key.length === 1) {
+      onChange({
+        target: {
+          value: event.key
+        }
+      });
+    }
+  }
+
   return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     "data-element": "select-input",
     inputIcon: "dropdown",
     autoComplete: "off",
     size: size,
+    onChange: onChange,
     value: selectedValue
-  }, getTextboxProps()));
+  }, getInputAriaAttributes(), getTextboxProps()), renderSelectText());
 };
 
 const formInputPropTypes = {
+  /**
+   * Id of the element containing the currently displayed value
+   * to be read by voice readers
+   * @private
+   * @ignore
+   */
+  accessibilityLabelId: _propTypes.default.string,
+
   /** Id attribute of the input element */
   id: _propTypes.default.string,
 
@@ -119,6 +178,13 @@ const formInputPropTypes = {
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: _propTypes.default.number,
 
+  /**
+   * @ignore
+   * @private
+   * If true, the select is open
+   */
+  isOpen: _propTypes.default.bool,
+
   /** Size of an input */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
@@ -149,12 +215,25 @@ const formInputPropTypes = {
 exports.formInputPropTypes = formInputPropTypes;
 SelectTextbox.propTypes = { ...formInputPropTypes,
 
+  /**
+   * @ignore
+   * @private
+   * Id attribute of the select list
+   */
+  "aria-controls": _propTypes.default.string,
+
   /**
    * @private
    * @ignore
    * Value to be displayed in the Textbox */
   formattedValue: _propTypes.default.string,
 
+  /**
+   * @private
+   * @ignore
+   * If true, the input will be displayed */
+  hasTextCursor: _propTypes.default.bool,
+
   /**
    * @private
    * @ignore

package/lib/components/select/select-textbox/select-textbox.d.ts

@@ -47,10 +47,16 @@ export interface FormInputPropTypes
 }
 
 export interface SelectTextboxProps extends FormInputPropTypes {
+  /** Id attribute of the select list */
+  "aria-controls"?: string;
   /** Value to be displayed in the Textbox */
-  formattedValue: string;
+  formattedValue?: string;
+  /** If true, the input will be displayed */
+  hasTextCursor?: boolean;
+  /** If true, the list is displayed */
+  isOpen?: boolean;
   /** Value of the Select Input */
-  selectedValue:
+  selectedValue?:
     | string
     | Record<string, unknown>
     | string[]

package/lib/components/select/select.style.js

@@ -35,7 +35,7 @@ const StyledSelect = _styledComponents.default.div`
     position: relative;
 
     ${_input.default} {
-      cursor: ${hasTextCursor ? "text" : "pointer"};
+      cursor: "text";
 
       ${disabled && (0, _styledComponents.css)`
         cursor: not-allowed;
@@ -44,7 +44,7 @@ const StyledSelect = _styledComponents.default.div`
       `}
 
       ${readOnly && (0, _styledComponents.css)`
-        cursor: ${hasTextCursor ? "text" : "default"};
+        cursor: "text";
         color: var(--colorsYin065);
         text-shadow: none;
       `}
@@ -73,15 +73,18 @@ const StyledSelect = _styledComponents.default.div`
         border: none;
       }
 
-      ${_input.default} {
-        font-weight: 900;
-        text-align: right;
-      }
-
       ${_inputIconToggle.default} {
         margin-left: 0;
       }
     `}
+
+    ${!hasTextCursor && (0, _styledComponents.css)`
+      ${_input.default} {
+        position: absolute;
+        width: auto;
+        opacity: 0;
+      }
+    `}
   `}
 `;
 StyledSelect.defaultProps = {

package/lib/components/select/simple-select/simple-select.component.js

@@ -76,6 +76,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const filterText = (0, _react.useRef)();
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
+  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
@@ -113,15 +114,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       return match.props.value;
     });
   }, [childOptions, createCustomEvent, onChange]);
-  const handleTextboxChange = (0, _react.useCallback)(event => {
-    const newValue = event.target.value;
-    const newCharacter = newValue.slice(-1);
-    const isDeleteEvent = event.nativeEvent.inputType === "deleteContentBackward" || event.nativeEvent.inputType === "deleteContentForward" || event.nativeEvent.inputType === "delete";
-
-    if (isDeleteEvent) {
-      return;
-    }
-
+  const triggerFilterChange = (0, _react.useCallback)(newCharacter => {
     if (isTimerCounting.current) {
       const newVal = filterText.current + newCharacter;
       filterText.current = newVal;
@@ -161,8 +154,10 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
 
         return true;
       });
+    } else if (key.length === 1) {
+      triggerFilterChange(key);
     }
-  }, [onKeyDown, onOpen, readOnly]);
+  }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
@@ -170,7 +165,6 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setOpenState(false);
-      filterText.current = "";
     }
 
     isClickTriggeredBySelect.current = false;
@@ -283,14 +277,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     const {
       text,
       value: newValue,
-      selectionType
+      selectionType,
+      id: selectedOptionId
     } = optionData;
     const isClickTriggered = selectionType === "click";
     updateValue(newValue, text);
+    setActiveDescendantId(selectedOptionId);
 
     if (selectionType !== "navigationKey") {
       setOpenState(false);
-      filterText.current = text;
     }
 
     if (isClickTriggered) {
@@ -312,7 +307,6 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
 
   function onSelectListClose() {
     setOpenState(false);
-    filterText.current = "";
   }
 
   function isNavigationKey(key) {
@@ -341,9 +335,9 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onKeyDown: handleTextboxKeydown,
-      onChange: handleTextboxChange,
       onBlur: handleTextboxBlur,
       tooltipPosition,
+      transparent,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(props)
     };
   }
@@ -371,16 +365,15 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : "",
-    type: "select",
-    labelId: labelId.current
+    isOpen: isOpen,
+    labelId: labelId.current,
+    activeDescendantId: activeDescendantId,
+    "aria-controls": isOpen ? selectListId.current : undefined
   }, getTextboxProps(), {
     positionedChildren: disablePortal && isOpen && selectList
   })), !disablePortal && isOpen && selectList);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.10.1",
+  "version": "104.10.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {