carbon-react 127.0.4 → 127.1.1

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

@@ -6,7 +6,6 @@ import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText,
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
-import useLocale from "../../../hooks/__internal__/useLocale";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
 function checkRef(ref) {
@@ -49,7 +48,6 @@ export const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const l = useLocale();
   const context = useContext(ActionPopoverContext);
   !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem must be used within an ActionPopover component") : invariant(false) : void 0;
   !( /*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true) ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : invariant(false) : void 0;
@@ -198,11 +196,10 @@ export const ActionPopoverItem = ({
       }
     }),
     "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-  const wrapperDivProps = {
+  const wrapperProps = {
     ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
@@ -234,14 +231,13 @@ export const ActionPopoverItem = ({
       isASubmenu: isASubmenu
     });
   };
-  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperProps, /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown,
     role: "presentation"
   }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
     type: "button",
-    role: "menuitem",
     tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment,

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -33,7 +33,7 @@ export interface ActionPopoverMenuBaseProps {
         right: string | number;
     };
 }
-export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {
+export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLUListElement> {
 }
-declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLUListElement>>;
 export default ActionPopoverMenu;

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

@@ -163,8 +163,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
     onKeyDown: onKeyDown,
     id: menuID,
     "aria-labelledby": parentID,
-    role: "menu",
-    ref: ref
+    ref: ref,
+    role: "list"
   }, rest), clonedChildren);
 });
 if (process.env.NODE_ENV !== "production") {

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

@@ -30,6 +30,8 @@ export interface ActionPopoverProps extends MarginProps {
     renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
     /** Boolean to control whether menu should align to right */
     rightAlignMenu?: boolean;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

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

@@ -24,6 +24,7 @@ export const ActionPopover = ({
   placement = "bottom",
   horizontalAlignment = "left",
   submenuPosition = "left",
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const l = useLocale();
@@ -141,7 +142,7 @@ export const ActionPopover = ({
         "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
-          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -150,7 +151,7 @@ export const ActionPopover = ({
     return /*#__PURE__*/React.createElement(StyledButtonIcon, {
       role: "button",
       "aria-haspopup": "true",
-      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,
@@ -192,7 +193,6 @@ export const ActionPopover = ({
     reference: buttonRef
   }, /*#__PURE__*/React.createElement(ActionPopoverMenu, _extends({
     "data-component": "action-popover",
-    role: "menu",
     ref: menu
   }, menuProps), children))));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const Menu: import("styled-components").StyledComponent<"div", any, {
+declare const Menu: import("styled-components").StyledComponent<"ul", any, {
     isOpen?: boolean | undefined;
 }, never>;
 declare type StyledMenuItemProps = {
@@ -15,8 +15,8 @@ declare type StyledMenuItemProps = {
 declare const StyledMenuItemInnerText: import("styled-components").StyledComponent<"div", any, Omit<StyledMenuItemProps, "isDisabled">, never>;
 declare const StyledMenuItemOuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, Omit<StyledMenuItemProps, "variant">, never>;
-declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare const MenuItemDivider: import("styled-components").StyledComponent<"li", any, {
     "data-element": string;
 }, "data-element">;
 declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -9,11 +9,12 @@ import baseTheme from "../../style/themes/base";
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
-const Menu = styled.div`
+const Menu = styled.ul`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
+  list-style: none;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
@@ -156,10 +157,10 @@ const StyledMenuItem = styled.button`
 StyledMenuItem.defaultProps = {
   theme: baseTheme
 };
-const StyledMenuItemWrapper = styled.div`
+const StyledMenuItemWrapper = styled.li`
   position: relative;
 `;
-const MenuItemDivider = styled.div.attrs({
+const MenuItemDivider = styled.li.attrs({
   "data-element": "action-popover-divider"
 })`
   background-color: var(--colorsUtilityMajor050);

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

@@ -148,7 +148,6 @@ const Button = /*#__PURE__*/React.forwardRef(({
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: inSplitButton ? "menuitem" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -59,11 +59,10 @@ export const MultiActionButton = ({
     placement: "bottom-end",
     reference: buttonNode
   }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, _extends({}, wrapperProps, {
-    "aria-label": text,
     align: align
   }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
     value: contextValue
-  }, children)));
+  }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,

package/esm/components/multi-action-button/multi-action-button.style.d.ts

@@ -6,5 +6,5 @@ declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledButtonChildrenContainerProps, never>;
+declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledButtonChildrenContainerProps, never>;
 export { StyledButtonChildrenContainer, StyledMultiActionButton };

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

@@ -69,7 +69,7 @@ theme.focusRedesignOptOut && css`
       `}
   }
 `;
-const StyledButtonChildrenContainer = styled.div`
+const StyledButtonChildrenContainer = styled.ul`
   ${({
   theme,
   align,
@@ -81,6 +81,9 @@ const StyledButtonChildrenContainer = styled.div`
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

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

@@ -119,19 +119,22 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }
   const updateValues = useCallback((newFilterText, isDeleteEvent) => {
     setSelectedValue(previousValue => {
-      const match = findElementWithMatchingText(newFilterText, children);
-      const isFilterCleared = isDeleteEvent && newFilterText === "";
+      const trimmed = newFilterText.trimStart();
+      const match = findElementWithMatchingText(trimmed, children);
+      const isFilterCleared = isDeleteEvent && !newFilterText.length;
       if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
       }
-      triggerChange(match.props.value, false);
+      if (trimmed.length) {
+        triggerChange(match.props.value, false);
+      }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -147,7 +150,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -255,10 +258,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     };
   }, [handleGlobalClick]);
   useEffect(() => {
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
+    const trimmed = filterText?.trimStart();
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
-      textboxRef.selectionStart = filterText.length;
+    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
+      textboxRef.selectionStart = trimmed.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = useCallback(optionData => {
@@ -405,7 +409,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText,
+    filterText: filterText.trim(),
     highlightedValue,
     noResultsMessage,
     disablePortal,
@@ -423,9 +427,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     enableVirtualScroll,
     virtualScrollOverscan
   };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, _extends({}, selectListProps, {
-    filterText: filterText
-  }), children);
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,

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

@@ -417,7 +417,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     disablePortal: disablePortal,

package/esm/components/split-button/split-button-children.style.d.ts

@@ -1,9 +1,9 @@
 import { ThemeObject } from "../../style/themes/base";
-export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledSplitButtonChildrenContainerProps, never>;
 export default StyledSplitButtonChildrenContainer;

package/esm/components/split-button/split-button-children.style.js

@@ -3,22 +3,22 @@ import BaseTheme from "../../style/themes/base";
 import StyledButton from "../button/button.style";
 export const borderRadiusStyling = `
   > {
-    &:first-child:last-child {
+    &:first-child:last-child > * {
       border-radius: var(--borderRadius100);
     }
 
-    &:first-child:not(:last-child) {
+    &:first-child:not(:last-child) > * {
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius000);
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child):not(:last-child) > * {
       border-radius: var(--borderRadius000);
     }
 
-    &:last-child:not(:first-child) {
+    &:last-child:not(:first-child) > * {
       border-top-right-radius: var(--borderRadius000);
       border-top-left-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius100);
@@ -26,7 +26,7 @@ export const borderRadiusStyling = `
     }
   }
 `;
-const StyledSplitButtonChildrenContainer = styled.div`
+const StyledSplitButtonChildrenContainer = styled.ul`
   border-radius: var(--borderRadius100);
   ${({
   theme,
@@ -38,6 +38,9 @@ const StyledSplitButtonChildrenContainer = styled.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

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

@@ -111,11 +111,10 @@ export const SplitButton = ({
       placement: "bottom-end",
       reference: buttonNode
     }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
-      "aria-label": text,
       align: align
     }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: contextValue
-    }, children)));
+    }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
   }
   const handleClick = useClickAwayListener(hideButtons);
   const marginProps = filterStyledSystemMarginProps(rest);

package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -7,11 +7,11 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
-        role: string;
         "data-element": string;
+        role: string;
         onKeyDown: (ev: any) => void;
         minWidth: number;
-        ref: import("react").RefObject<HTMLDivElement>;
+        ref: import("react").RefObject<HTMLUListElement>;
     };
     contextValue: {
         inSplitButton: boolean;

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -46,8 +46,8 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     setShowAdditionalButtons(false);
   }, [toggleButtonRef]);
   const wrapperProps = {
-    role: "menu",
     "data-element": "additional-buttons",
+    role: "list",
     onKeyDown: handleKeyDown,
     minWidth,
     ref: childrenContainer

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

@@ -11,7 +11,6 @@ var _actionPopover = require("../action-popover.style");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _actionPopoverContext = _interopRequireDefault(require("../action-popover-context"));
-var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _actionPopoverMenu = _interopRequireDefault(require("../action-popover-menu/action-popover-menu.component"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -58,7 +57,6 @@ const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const l = (0, _useLocale.default)();
   const context = (0, _react.useContext)(_actionPopoverContext.default);
   !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   !( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : (0, _invariant.default)(false) : void 0;
@@ -207,11 +205,10 @@ const ActionPopoverItem = ({
       }
     }),
     "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-  const wrapperDivProps = {
+  const wrapperProps = {
     ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
@@ -243,14 +240,13 @@ const ActionPopoverItem = ({
       isASubmenu: isASubmenu
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperProps, /*#__PURE__*/_react.default.createElement("div", {
     onKeyDown: onKeyDown,
     role: "presentation"
   }, /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
     type: "button",
-    role: "menuitem",
     tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment,

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -33,7 +33,7 @@ export interface ActionPopoverMenuBaseProps {
         right: string | number;
     };
 }
-export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {
+export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLUListElement> {
 }
-declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLUListElement>>;
 export default ActionPopoverMenu;

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

@@ -172,8 +172,8 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
     onKeyDown: onKeyDown,
     id: menuID,
     "aria-labelledby": parentID,
-    role: "menu",
-    ref: ref
+    ref: ref,
+    role: "list"
   }, rest), clonedChildren);
 });
 if (process.env.NODE_ENV !== "production") {

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

@@ -30,6 +30,8 @@ export interface ActionPopoverProps extends MarginProps {
     renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
     /** Boolean to control whether menu should align to right */
     rightAlignMenu?: boolean;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

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

@@ -33,6 +33,7 @@ const ActionPopover = ({
   placement = "bottom",
   horizontalAlignment = "left",
   submenuPosition = "left",
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -150,7 +151,7 @@ const ActionPopover = ({
         "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
-          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -159,7 +160,7 @@ const ActionPopover = ({
     return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
       role: "button",
       "aria-haspopup": "true",
-      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,
@@ -201,7 +202,6 @@ const ActionPopover = ({
     reference: buttonRef
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
-    role: "menu",
     ref: menu
   }, menuProps), children))));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const Menu: import("styled-components").StyledComponent<"div", any, {
+declare const Menu: import("styled-components").StyledComponent<"ul", any, {
     isOpen?: boolean | undefined;
 }, never>;
 declare type StyledMenuItemProps = {
@@ -15,8 +15,8 @@ declare type StyledMenuItemProps = {
 declare const StyledMenuItemInnerText: import("styled-components").StyledComponent<"div", any, Omit<StyledMenuItemProps, "isDisabled">, never>;
 declare const StyledMenuItemOuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, Omit<StyledMenuItemProps, "variant">, never>;
-declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare const MenuItemDivider: import("styled-components").StyledComponent<"li", any, {
     "data-element": string;
 }, "data-element">;
 declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -18,11 +18,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
-const Menu = exports.Menu = _styledComponents.default.div`
+const Menu = exports.Menu = _styledComponents.default.ul`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
+  list-style: none;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
@@ -165,10 +166,10 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.button
 StyledMenuItem.defaultProps = {
   theme: _base.default
 };
-const StyledMenuItemWrapper = exports.StyledMenuItemWrapper = _styledComponents.default.div`
+const StyledMenuItemWrapper = exports.StyledMenuItemWrapper = _styledComponents.default.li`
   position: relative;
 `;
-const MenuItemDivider = exports.MenuItemDivider = _styledComponents.default.div.attrs({
+const MenuItemDivider = exports.MenuItemDivider = _styledComponents.default.li.attrs({
   "data-element": "action-popover-divider"
 })`
   background-color: var(--colorsUtilityMajor050);

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

@@ -157,7 +157,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: inSplitButton ? "menuitem" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -68,11 +68,10 @@ const MultiActionButton = ({
     placement: "bottom-end",
     reference: buttonNode
   }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, _extends({}, wrapperProps, {
-    "aria-label": text,
     align: align
   }), /*#__PURE__*/_react.default.createElement(_splitButton.default.Provider, {
     value: contextValue
-  }, children)));
+  }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,

package/lib/components/multi-action-button/multi-action-button.style.d.ts

@@ -6,5 +6,5 @@ declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledButtonChildrenContainerProps, never>;
+declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledButtonChildrenContainerProps, never>;
 export { StyledButtonChildrenContainer, StyledMultiActionButton };

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

@@ -78,7 +78,7 @@ theme.focusRedesignOptOut && (0, _styledComponents.css)`
       `}
   }
 `;
-const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _styledComponents.default.div`
+const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _styledComponents.default.ul`
   ${({
   theme,
   align,
@@ -90,6 +90,9 @@ const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _s
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${_splitButtonChildren.borderRadiusStyling}
 

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

@@ -128,19 +128,22 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   }
   const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
     setSelectedValue(previousValue => {
-      const match = findElementWithMatchingText(newFilterText, children);
-      const isFilterCleared = isDeleteEvent && newFilterText === "";
+      const trimmed = newFilterText.trimStart();
+      const match = findElementWithMatchingText(trimmed, children);
+      const isFilterCleared = isDeleteEvent && !newFilterText.length;
       if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
       }
-      triggerChange(match.props.value, false);
+      if (trimmed.length) {
+        triggerChange(match.props.value, false);
+      }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -156,7 +159,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -264,10 +267,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     };
   }, [handleGlobalClick]);
   (0, _react.useEffect)(() => {
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
+    const trimmed = filterText?.trimStart();
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
-      textboxRef.selectionStart = filterText.length;
+    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
+      textboxRef.selectionStart = trimmed.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = (0, _react.useCallback)(optionData => {
@@ -414,7 +418,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     onSelect: onSelectOption,
     onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText,
+    filterText: filterText.trim(),
     highlightedValue,
     noResultsMessage,
     disablePortal,
@@ -432,9 +436,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     enableVirtualScroll,
     virtualScrollOverscan
   };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, _extends({}, selectListProps, {
-    filterText: filterText
-  }), children);
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,

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

@@ -426,7 +426,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     disablePortal: disablePortal,

package/lib/components/split-button/split-button-children.style.d.ts

@@ -1,9 +1,9 @@
 import { ThemeObject } from "../../style/themes/base";
-export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledSplitButtonChildrenContainerProps, never>;
 export default StyledSplitButtonChildrenContainer;

package/lib/components/split-button/split-button-children.style.js

@@ -12,22 +12,22 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const borderRadiusStyling = exports.borderRadiusStyling = `
   > {
-    &:first-child:last-child {
+    &:first-child:last-child > * {
       border-radius: var(--borderRadius100);
     }
 
-    &:first-child:not(:last-child) {
+    &:first-child:not(:last-child) > * {
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius000);
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child):not(:last-child) > * {
       border-radius: var(--borderRadius000);
     }
 
-    &:last-child:not(:first-child) {
+    &:last-child:not(:first-child) > * {
       border-top-right-radius: var(--borderRadius000);
       border-top-left-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius100);
@@ -35,7 +35,7 @@ const borderRadiusStyling = exports.borderRadiusStyling = `
     }
   }
 `;
-const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
+const StyledSplitButtonChildrenContainer = _styledComponents.default.ul`
   border-radius: var(--borderRadius100);
   ${({
   theme,
@@ -47,6 +47,9 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

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

@@ -120,11 +120,10 @@ const SplitButton = ({
       placement: "bottom-end",
       reference: buttonNode
     }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, _extends({}, wrapperProps, {
-      "aria-label": text,
       align: align
     }), /*#__PURE__*/_react.default.createElement(_splitButton2.default.Provider, {
       value: contextValue
-    }, children)));
+    }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
   }
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);

package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -7,11 +7,11 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
-        role: string;
         "data-element": string;
+        role: string;
         onKeyDown: (ev: any) => void;
         minWidth: number;
-        ref: import("react").RefObject<HTMLDivElement>;
+        ref: import("react").RefObject<HTMLUListElement>;
     };
     contextValue: {
         inSplitButton: boolean;

package/lib/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -53,8 +53,8 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     setShowAdditionalButtons(false);
   }, [toggleButtonRef]);
   const wrapperProps = {
-    role: "menu",
     "data-element": "additional-buttons",
+    role: "list",
     onKeyDown: handleKeyDown,
     minWidth,
     ref: childrenContainer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "127.0.4",
+  "version": "127.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",