carbon-react 104.54.1 → 104.54.4

package/esm/__spec_helper__/test-utils.d.ts

@@ -29,6 +29,6 @@ export function testStyledSystemWidth(component: any, styleContainer: any): void
 export function testStyledSystemLayout(component: any, styleContainer: any): void;
 export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
 export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectError(errorMessage: any): () => void;
+export function expectConsoleOutput(message: any, type?: string): () => void;
 declare const keydown: {};
 export { mockMatchMedia };

package/esm/__spec_helper__/test-utils.js

@@ -317,38 +317,37 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper));
     });
   });
-};
+}; // this util will catch that a console output occurred without polluting the output when running the unit tests
+
 
-const expectError = errorMessage => {
-  if (!errorMessage) {
-    throw new Error("no error message provided");
+const expectConsoleOutput = (message, type = "error") => {
+  if (!message) {
+    throw new Error(`no ${type} message provided`);
   }
 
   expect.assertions(1);
-  const {
-    error
-  } = global.console;
-  let errorArgs;
-  jest.spyOn(global.console, "error").mockImplementation((...args) => {
+  const consoleType = global.console[type];
+  let consoleArgs;
+  jest.spyOn(global.console, type).mockImplementation((...args) => {
     if (!args.length) return;
     const msg = args.join(" ");
     const params = args.slice(1, args.length);
 
-    if (sprintf(msg, ...params).includes(errorMessage)) {
-      errorArgs = args;
+    if (sprintf(msg, ...params).includes(message)) {
+      consoleArgs = args;
       return;
     }
 
-    error(...args);
+    consoleType(...args);
   });
   return () => {
-    if (errorArgs) {
+    if (consoleArgs) {
       // eslint-disable-next-line no-console
-      expect(console.error).toHaveBeenCalledWith(...errorArgs);
+      expect(console[type]).toHaveBeenCalledWith(...consoleArgs);
     }
 
-    global.console.error = error;
+    global.console[type] = consoleType;
   };
 };
 
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectError };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput };

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -79,12 +79,12 @@ const MenuItem = ({
     e.stopPropagation();
 
     if (!disabled) {
+      setOpenPopover(false);
+      focusButton();
+
       if (onClickProp) {
         onClickProp();
       }
-
-      setOpenPopover(false);
-      focusButton();
     } else {
       ref.current.focus();
       e.preventDefault();
@@ -128,7 +128,11 @@ const MenuItem = ({
 
         e.preventDefault();
       } else if (Events.isEnterKey(e)) {
-        if (isHref && download) ref.current.click();
+        if (isHref && download) {
+          ref.current.click();
+        }
+
+        e.preventDefault();
         onClick(e);
       }
     } else if (Events.isEnterKey(e)) {

package/esm/components/action-popover/action-popover.style.d.ts

@@ -9,5 +9,5 @@ export const MenuItemDivider: import("styled-components").StyledComponent<"div",
 }, "data-element">;
 export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMenuItem: import("styled-components").StyledComponent<"button", any, {}, never>;
 import Icon from "../icon";

package/esm/components/action-popover/action-popover.style.js

@@ -17,8 +17,9 @@ const Menu = styled.div`
   theme
 }) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
-const StyledMenuItem = styled.div`
+const StyledMenuItem = styled.button`
   text-decoration: none;
+  background-color: var(--colorsActionMajorYang100);
 `;
 
 const MenuItemFactory = button => styled(button)`

package/esm/components/button/button.component.d.ts

@@ -24,7 +24,7 @@ declare function Button({ size, subtext, as, children, forwardRef, "aria-label":
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {
-        const as: string;
+        const buttonType: string;
         const size: string;
         const fullWidth: boolean;
         const disabled: boolean;

package/esm/components/button/button.component.js

@@ -7,6 +7,7 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -51,6 +52,8 @@ function renderChildren({
   }))), iconType && iconPosition === "after" && children && /*#__PURE__*/React.createElement(Icon, iconProps));
 }
 
+let deprecatedWarnTriggered = false;
+
 const Button = ({
   size,
   subtext,
@@ -72,8 +75,14 @@ const Button = ({
   iconTooltipPosition,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const [internalRef, setInternalRef] = useState(null);
-  const buttonType = buttonTypeProp || as;
+  const buttonType = as || buttonTypeProp;
 
   if (subtext.length > 0 && size !== "large") {
     throw new Error("subtext prop has no effect unless the button is large");
@@ -237,7 +246,7 @@ Button.propTypes = {
   rel: PropTypes.string
 };
 Button.defaultProps = {
-  as: "secondary",
+  buttonType: "secondary",
   size: "medium",
   fullWidth: false,
   disabled: false,

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -8,7 +8,10 @@ import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+let deprecatedWarnTriggered = false;
 
 const MultiActionButton = ({
   align = "left",
@@ -21,7 +24,14 @@ const MultiActionButton = ({
   subtext,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const ref = useRef();
+  const buttonRef = useRef();
   const buttonContainer = useRef();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
   const buttonChildren = React.Children.toArray(children);
@@ -74,7 +84,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -182,6 +197,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

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

@@ -414,8 +414,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     flipEnabled: flipEnabled
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,

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

@@ -427,8 +427,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     multiselectValues: selectedValue
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,

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

@@ -137,7 +137,7 @@ const SelectTextbox = ({
 
     const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
-      "aria-expanded": isOpen,
+      "aria-expanded": readOnly ? undefined : isOpen,
       "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,

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

@@ -340,8 +340,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,

package/esm/components/split-button/split-button.component.d.ts

@@ -2,8 +2,8 @@ export default SplitButton;
 declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
-    as?: string | undefined;
-    buttonType: any;
+    as: any;
+    buttonType?: string | undefined;
     children: any;
     disabled?: boolean | undefined;
     iconPosition?: string | undefined;

package/esm/components/split-button/split-button.component.js

@@ -14,13 +14,16 @@ import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const CONTENT_WIDTH_RATIO = 0.75;
+let deprecatedWarnTriggered = false;
 
 const SplitButton = ({
   align = "left",
-  as = "secondary",
-  buttonType,
+  as,
+  buttonType = "secondary",
   children,
   disabled = false,
   iconPosition = "before",
@@ -31,11 +34,18 @@ const SplitButton = ({
   text,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const theme = useContext(ThemeContext) || baseTheme;
   const isToggleButtonFocused = useRef(false);
   const buttonLabelId = useRef(guid());
   const additionalButtons = useRef([]);
   const splitButtonNode = useRef();
+  const toggleButton = useRef();
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
@@ -69,7 +79,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -113,7 +128,7 @@ const SplitButton = ({
         isToggleButtonFocused.current = false;
       },
       onKeyDown: handleToggleButtonKeyDown,
-      buttonType: buttonType || as,
+      buttonType: as || buttonType,
       size
     };
 
@@ -142,7 +157,7 @@ const SplitButton = ({
       primary: theme.colors.white,
       secondary: theme.colors.primary
     };
-    return colorsMap[buttonType || as];
+    return colorsMap[as || buttonType];
   }
 
   function renderMainButton() {
@@ -156,7 +171,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/React.createElement(Icon, {
       type: "dropdown",
       bgSize: "extra-small",

package/lib/__spec_helper__/test-utils.d.ts

@@ -29,6 +29,6 @@ export function testStyledSystemWidth(component: any, styleContainer: any): void
 export function testStyledSystemLayout(component: any, styleContainer: any): void;
 export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
 export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectError(errorMessage: any): () => void;
+export function expectConsoleOutput(message: any, type?: string): () => void;
 declare const keydown: {};
 export { mockMatchMedia };

package/lib/__spec_helper__/test-utils.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
+exports.expectConsoleOutput = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
 
 var _enzyme = require("enzyme");
 
@@ -373,40 +373,39 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper));
     });
   });
-};
+}; // this util will catch that a console output occurred without polluting the output when running the unit tests
+
 
 exports.testStyledSystemBackground = testStyledSystemBackground;
 
-const expectError = errorMessage => {
-  if (!errorMessage) {
-    throw new Error("no error message provided");
+const expectConsoleOutput = (message, type = "error") => {
+  if (!message) {
+    throw new Error(`no ${type} message provided`);
   }
 
   expect.assertions(1);
-  const {
-    error
-  } = global.console;
-  let errorArgs;
-  jest.spyOn(global.console, "error").mockImplementation((...args) => {
+  const consoleType = global.console[type];
+  let consoleArgs;
+  jest.spyOn(global.console, type).mockImplementation((...args) => {
     if (!args.length) return;
     const msg = args.join(" ");
     const params = args.slice(1, args.length);
 
-    if ((0, _sprintfJs.sprintf)(msg, ...params).includes(errorMessage)) {
-      errorArgs = args;
+    if ((0, _sprintfJs.sprintf)(msg, ...params).includes(message)) {
+      consoleArgs = args;
       return;
     }
 
-    error(...args);
+    consoleType(...args);
   });
   return () => {
-    if (errorArgs) {
+    if (consoleArgs) {
       // eslint-disable-next-line no-console
-      expect(console.error).toHaveBeenCalledWith(...errorArgs);
+      expect(console[type]).toHaveBeenCalledWith(...consoleArgs);
     }
 
-    global.console.error = error;
+    global.console[type] = consoleType;
   };
 };
 
-exports.expectError = expectError;
+exports.expectConsoleOutput = expectConsoleOutput;

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -100,12 +100,12 @@ const MenuItem = ({
     e.stopPropagation();
 
     if (!disabled) {
+      setOpenPopover(false);
+      focusButton();
+
       if (onClickProp) {
         onClickProp();
       }
-
-      setOpenPopover(false);
-      focusButton();
     } else {
       ref.current.focus();
       e.preventDefault();
@@ -149,7 +149,11 @@ const MenuItem = ({
 
         e.preventDefault();
       } else if (_events.default.isEnterKey(e)) {
-        if (isHref && download) ref.current.click();
+        if (isHref && download) {
+          ref.current.click();
+        }
+
+        e.preventDefault();
         onClick(e);
       }
     } else if (_events.default.isEnterKey(e)) {

package/lib/components/action-popover/action-popover.style.d.ts

@@ -9,5 +9,5 @@ export const MenuItemDivider: import("styled-components").StyledComponent<"div",
 }, "data-element">;
 export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMenuItem: import("styled-components").StyledComponent<"button", any, {}, never>;
 import Icon from "../icon";

package/lib/components/action-popover/action-popover.style.js

@@ -37,8 +37,9 @@ const Menu = _styledComponents.default.div`
 }) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
-const StyledMenuItem = _styledComponents.default.div`
+const StyledMenuItem = _styledComponents.default.button`
   text-decoration: none;
+  background-color: var(--colorsActionMajorYang100);
 `;
 exports.StyledMenuItem = StyledMenuItem;
 

package/lib/components/button/button.component.d.ts

@@ -24,7 +24,7 @@ declare function Button({ size, subtext, as, children, forwardRef, "aria-label":
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {
-        const as: string;
+        const buttonType: string;
         const size: string;
         const fullWidth: boolean;
         const disabled: boolean;

package/lib/components/button/button.component.js

@@ -19,6 +19,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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; }
@@ -70,6 +72,8 @@ function renderChildren({
   }))), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
 }
 
+let deprecatedWarnTriggered = false;
+
 const Button = ({
   size,
   subtext,
@@ -91,8 +95,15 @@ const Button = ({
   iconTooltipPosition,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const [internalRef, setInternalRef] = (0, _react.useState)(null);
-  const buttonType = buttonTypeProp || as;
+  const buttonType = as || buttonTypeProp;
 
   if (subtext.length > 0 && size !== "large") {
     throw new Error("subtext prop has no effect unless the button is large");
@@ -256,7 +267,7 @@ Button.propTypes = {
   rel: _propTypes.default.string
 };
 Button.defaultProps = {
-  as: "secondary",
+  buttonType: "secondary",
   size: "medium",
   fullWidth: false,
   disabled: false,

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -21,6 +21,10 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _utils = require("../../style/utils");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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; }
@@ -30,6 +34,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+let deprecatedWarnTriggered = false;
 
 const MultiActionButton = ({
   align = "left",
@@ -42,7 +47,15 @@ const MultiActionButton = ({
   subtext,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const ref = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
 
@@ -97,7 +110,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -205,6 +223,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

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

@@ -439,8 +439,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,

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

@@ -455,8 +455,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,

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

@@ -158,7 +158,7 @@ const SelectTextbox = ({
 
     const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
-      "aria-expanded": isOpen,
+      "aria-expanded": readOnly ? undefined : isOpen,
       "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,

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

@@ -365,8 +365,6 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,

package/lib/components/split-button/split-button.component.d.ts

@@ -2,8 +2,8 @@ export default SplitButton;
 declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
-    as?: string | undefined;
-    buttonType: any;
+    as: any;
+    buttonType?: string | undefined;
     children: any;
     disabled?: boolean | undefined;
     iconPosition?: string | undefined;

package/lib/components/split-button/split-button.component.js

@@ -33,6 +33,10 @@ var _utils = require("../../style/utils");
 
 var _themes = require("../../style/themes");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 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; }
@@ -43,11 +47,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 const CONTENT_WIDTH_RATIO = 0.75;
+let deprecatedWarnTriggered = false;
 
 const SplitButton = ({
   align = "left",
-  as = "secondary",
-  buttonType,
+  as,
+  buttonType = "secondary",
   children,
   disabled = false,
   iconPosition = "before",
@@ -58,12 +63,20 @@ const SplitButton = ({
   text,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
   const isToggleButtonFocused = (0, _react.useRef)(false);
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
   const additionalButtons = (0, _react.useRef)([]);
   const splitButtonNode = (0, _react.useRef)();
+  const toggleButton = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
@@ -97,7 +110,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -141,7 +159,7 @@ const SplitButton = ({
         isToggleButtonFocused.current = false;
       },
       onKeyDown: handleToggleButtonKeyDown,
-      buttonType: buttonType || as,
+      buttonType: as || buttonType,
       size
     };
 
@@ -170,7 +188,7 @@ const SplitButton = ({
       primary: theme.colors.white,
       secondary: theme.colors.primary
     };
-    return colorsMap[buttonType || as];
+    return colorsMap[as || buttonType];
   }
 
   function renderMainButton() {
@@ -184,7 +202,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
       bgSize: "extra-small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.54.1",
+  "version": "104.54.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -104,12 +104,12 @@
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
-    "cypress": "^9.2.0",
-    "cypress-axe": "^0.13.0",
+    "cypress": "^9.5.2",
+    "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
-    "cypress-each": "^1.10.0",
+    "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",
-    "cypress-real-events": "^1.6.0",
+    "cypress-real-events": "^1.7.0",
     "cypress-storybook": "^0.5.1",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns-tz": "^1.2.2",