carbon-react 104.10.0 → 104.12.0

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -109,7 +109,10 @@ const FlatTableBodyDraggable = ({
 };
 
 FlatTableBodyDraggable.propTypes = {
+  /** Callback fired when order is changed */
   getOrder: _propTypes.default.func,
+
+  /** Array of FlatTableRow. */
   children: _propTypes.default.node.isRequired
 };
 var _default = FlatTableBodyDraggable;

package/lib/components/icon/icon.component.js

@@ -121,7 +121,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
 
   if (tooltipMessage) {
     const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
-    const visible = disabled ? false : showTooltip;
+    const visible = disabled ? undefined : showTooltip;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -65,24 +65,25 @@ const StyledNavigationBar = _styledComponents.default.nav`
     z-index: ${theme.zIndex.nav};
 
     ${navigationType === "light" && (0, _styledComponents.css)`
-      background-color: ${theme.navigationBar.light.background};
-      border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
+      background-color: var(--colorsComponentsMenuSpringStandard500);
+      border-bottom: var(--borderWidth100) solid
+        var(--colorsComponentsMenuSpringChildAlt500);
     `}
 
     ${navigationType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.navigationBar.dark.background};
-      border-bottom: 1px solid ${theme.navigationBar.dark.borderBottom};
-      color: ${theme.colors.white};
+      background-color: var(--colorsComponentsMenuAutumnStandard500);
+      color: var(--colorsComponentsMenuYang100);
     `}
 
     ${navigationType === "black" && (0, _styledComponents.css)`
-      background-color: ${theme.navigationBar.black.background};
-      color: ${theme.colors.white};
+      background-color: var(--colorsComponentsMenuWinterStandard500);
+      color: var(--colorsComponentsMenuYang100);
     `}
 
     ${navigationType === "white" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.white};
-      border-bottom: 1px solid ${theme.navigationBar.white.borderBottom};
+      background-color: var(--colorsComponentsMenuSummerStandard500);
+      border-bottom: var(--borderWidth100) solid
+        var(--colorsComponentsMenuSummerChildAlt500);
     `}
   `}
 `;

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/search/search.style.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledButtonIcon = exports.StyledSearchButton = exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _styledSystem = require("styled-system");
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
@@ -40,7 +40,7 @@ const StyledSearch = _styledComponents.default.div`
   variant
 }) => {
   const darkVariant = variant === "dark";
-  const variantColor = darkVariant ? `${theme.search.darkVariantBorder}` : `${theme.search.passive}`;
+  const variantColor = darkVariant ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor300)";
   const iconColor = darkVariant && (searchHasValue && isFocused || !searchHasValue && isFocused || !isFocused && searchHasValue && showSearchButton);
   return (0, _styledComponents.css)`
       ${_styledSystem.margin}
@@ -52,52 +52,53 @@ const StyledSearch = _styledComponents.default.div`
       font-size: 14px;
       font-weight: 700;
       :hover {
-        border-bottom-color: ${theme.search.active};
+        border-bottom-color: ${darkVariant ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor400)"};
         cursor: pointer;
       }
       ${(isFocused || searchHasValue) && (0, _styledComponents.css)`
         border-color: transparent;
         transition: background 0.2s ease;
-        color: ${theme.icon.defaultHover};
         :hover {
           border-color: transparent;
         }
       `}
       ${isFocused && !searchIsActive && (0, _styledComponents.css)`
         border-color: transparent;
-        color: ${theme.icon.defaultHover};
       `}
       ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
         border-bottom: 2px solid ${variantColor};
         :hover {
-          border-bottom-color: ${theme.search.active};
+          border-bottom-color: var(--colorsUtilityMajor400);
           cursor: pointer;
         }
       `}
 
       ${_input.default} {
+        ::-moz-placeholder {
+          color: var(--colorsUtilityYin055);
+          opacity: 1;
+        }
+        ::placeholder {
+          color: var(--colorsUtilityYin055);
+        }
+
         ${darkVariant && !isFocused && (0, _styledComponents.css)`
           ::-moz-placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
             opacity: 1;
           }
           ::placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
           }
         `}
 
-        ${darkVariant && (0, _styledComponents.css)`
-          ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
-            color: ${theme.search.darkVariantText};
-          `}
-          ${!isFocused && !searchHasValue && (0, _styledComponents.css)`
-            color: ${theme.search.darkVariantPlaceholder};
-          `}
+        ${darkVariant && !isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
+          color: var(--colorsUtilityYang100);
         `}
       }
 
       ${_inputPresentation.default} {
-        background-color: ${searchHasValue || isFocused ? `${theme.colors.white}` : "transparent"};
+        background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
         flex: 1;
         font-size: 14px;
         font-weight: 700;
@@ -106,11 +107,10 @@ const StyledSearch = _styledComponents.default.div`
         cursor: pointer;
         ${!isFocused && !searchHasValue && (0, _styledComponents.css)`
           border: 1px solid transparent;
-          color: ${theme.icon.default};
         `}
         ${!isFocused && searchHasValue && !showSearchButton && (0, _styledComponents.css)`
           border: 1px solid transparent;
-          background-color: ${darkVariant ? "transparent" : `${theme.colors.white}`};
+          background-color: ${darkVariant ? "transparent" : "var(--colorsUtilityYang100)"};
         `}
       }
 
@@ -118,24 +118,19 @@ const StyledSearch = _styledComponents.default.div`
         flex: 1;
         z-index: ${theme.zIndex.smallOverlay};
       }
-      ${_button.default} {
-        background-color: ${theme.search.button};
-        cursor: pointer;
-        color: ${theme.colors.white};
-      }
       ${_icon.default} {
-        color: ${iconColor ? `${theme.search.icon}` : `${theme.search.iconDarkVariant}`};
+        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
         ${!darkVariant && (0, _styledComponents.css)`
-          color: ${theme.search.icon};
+          color: var(--colorsUtilityMajor400);
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
         :hover {
-          color: ${iconColor ? `${theme.search.iconHover}` : `${theme.search.iconDarkVariantHover}`};
+          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
           ${!darkVariant && (0, _styledComponents.css)`
-            color: ${theme.search.iconHover};
+            color: var(--colorsUtilityMajor500);
           `}
         }
       }
@@ -156,17 +151,13 @@ exports.default = _default;
 const StyledSearchButton = _styledComponents.default.div`
   display: inline-flex;
   border-bottom: none;
-  &&& ${_button.default} {
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-      background-color: ${theme.colors.primary};
-      border-color: ${theme.colors.primary};
-      :hover {
-        background: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
-      }
-    `}
+  & ${_button.default} {
+    background-color: var(--colorsActionMajor500);
+    border-color: var(--colorsActionMajorTransparent);
+    :hover {
+      background: var(--colorsActionMajor600);
+      border-color: var(--colorsActionMajorTransparent);
+    }
 
     width: 40px;
     margin: 0px 0px;
@@ -181,7 +172,7 @@ const StyledSearchButton = _styledComponents.default.div`
 exports.StyledSearchButton = StyledSearchButton;
 const StyledButtonIcon = _styledComponents.default.div`
   &&& ${_icon.default} {
-    color: white;
+    color: var(--colorsActionMajorYang100);
     margin-right: 0px;
   }
 `;

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
 };