@procore/core-react 12.50.1 → 12.52.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 12.52.0
+
+### Minor Changes
+
+- b7b80bc: `Banner` defaults to landmark region using `Banner.Title`; Banner no Title defaults aria-label (only 1 title-less banner per variant can use the default label); support `Banner role="alert"`; `Banner.Title as="h3"` support.
+- 4bbe5c7: Add a `containFocus` prop to `Page.Aside` that keeps keyboard focus inside the open aside.
+
+### Patch Changes
+
+- 80b8c72: Fix `Page.Aside` panel overflowing over the footer when `fillHeight` is enabled
+- 601c3d9: Fix `Thumbnail` clipping text with zoom-in
+- 934f46c: `Tree`: add an accessible 2px keyboard focus outline to the highlighted node so focus is no longer indicated by background color alone (WCAG 2.2 SC 1.4.1 and 1.4.11). The outline only appears when the tree is navigated via the keyboard, not on mouse hover.
+- ad49b53: `DropdownFlyout`: constrain flyout height to available viewport space and enable scrolling when content overflows
+- 81b2fa5: `DropdownFlyout`: wrap long option labels instead of truncating when there is not enough viewport space
+- 4e4827e: fix Global Navigation `Tabs` selected and focus styles
+
+## 12.51.0
+
+### Minor Changes
+
+- 1785fc0: Add `enableShadowDOM` and `isShadowDOMEnabled` exports to opt core-react's React Aria focus behavior into shadow DOM traversal. This allows app bootstrap code to enable shadow-root-aware focus containment and tab order for components like Tearsheet, Modal, and overlays.
+- 103bc86: Upgrade cdn-translations package to latest version v1
+- 1d2c7fd: `Breadcrumbs` will chain a provided `aria-labelledby` to the existing label; multiple breacrumbs on a page need unique names. Test Breaking - Update existing navigation aria-label to _Breadcrumbs_ from _Breadcrumb_
+
+### Patch Changes
+
+- a8c02c4: Add keyboard focus border to menu items for WCAG 2.1 SC 1.4.11 compliance. When navigating menu options via keyboard, a 2px inset blue border (`colors.blue40`) now appears on the highlighted item. Mouse hover continues to show only the background color change. Affected components: MenuImperative (shared StyledItem covering Select, MultiSelect, Dropdown, TieredSelect, GroupSelect, PillSelect, DateSelect, Menu, Tabs), SuperSelect, and DropdownFlyout.
+- Internal- Primary Button CSS variables
+
 ## 12.50.1
 
 ### Patch Changes

package/README.md

@@ -63,6 +63,20 @@ export function ButtonCustom(props: ButtonProps) {
 }
 ```
 
+### Shadow DOM focus support
+
+If your app renders interactive content inside an open shadow root (for example, micro-frontend content in a custom element), enable React Aria shadow-DOM focus traversal for core-react at app bootstrap.
+
+This ensures focus containment and tab order can move through shadow-root content for components that use React Aria focus management, like Tearsheet, Modal, and overlays.
+
+```tsx
+import { enableShadowDOM } from '@procore/core-react'
+
+enableShadowDOM()
+```
+
+Call this once before mounting your app. The call is idempotent, and each application using its own core-react instance should invoke it during bootstrap.
+
 ## Developing
 
 To get started, type the following from the project root directory:

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,15 +5,15 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledAnchorNavigationLandmark",
-  componentId: "core-12_50_1__sc-aacdj4-0"
+  componentId: "core-12_52_0__sc-aacdj4-0"
 })([""]);
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_50_1__sc-aacdj4-1"
+  componentId: "core-12_52_0__sc-aacdj4-1"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_50_1__sc-aacdj4-2"
+  componentId: "core-12_52_0__sc-aacdj4-2"
 })(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -26,7 +26,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_50_1__sc-aacdj4-3"
+  componentId: "core-12_52_0__sc-aacdj4-3"
 })(["box-sizing:border-box;display:block;flex:1;min-width:0;width:100%;padding:6px ", "px;color:inherit;text-decoration:none;&:visited{color:inherit;}", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_50_1__sc-7q2ydl-0"
+  componentId: "core-12_52_0__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_50_1__sc-7q2ydl-1"
+  componentId: "core-12_52_0__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_50_1__sc-7q2ydl-2"
+  componentId: "core-12_52_0__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_50_1__sc-7q2ydl-3"
+  componentId: "core-12_52_0__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_50_1__sc-7q2ydl-4"
+  componentId: "core-12_52_0__sc-7q2ydl-4"
 })(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus('outside'), getGapOutlineFocus('outside'), function (_ref2) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;

package/dist/AvatarStack/AvatarStack.styles.js

@@ -8,36 +8,36 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_50_1__sc-ft72hu-0"
+  componentId: "core-12_52_0__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_50_1__sc-ft72hu-1"
+  componentId: "core-12_52_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledFoldedPopoverContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFoldedPopoverContent",
-  componentId: "core-12_50_1__sc-ft72hu-2"
+  componentId: "core-12_52_0__sc-ft72hu-2"
 })(["display:flex;flex-direction:column;max-height:var(", ",100vh);"], OVERLAY_AVAILABLE_HEIGHT_VAR);
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_50_1__sc-ft72hu-3"
+  componentId: "core-12_52_0__sc-ft72hu-3"
 })(["padding-top:", "px;padding-left:", "px;flex:1 1 auto;min-height:0;overflow-y:auto;"], spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_50_1__sc-ft72hu-4"
+  componentId: "core-12_52_0__sc-ft72hu-4"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_50_1__sc-ft72hu-5"
+  componentId: "core-12_52_0__sc-ft72hu-5"
 })(["display:flex;margin-left:", "px;margin-top:", "px;margin-bottom:", "px;"], spacing.md, spacing.md, spacing.md);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_50_1__sc-ft72hu-6"
+  componentId: "core-12_52_0__sc-ft72hu-6"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_50_1__sc-ft72hu-7"
+  componentId: "core-12_52_0__sc-ft72hu-7"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadge",
-  componentId: "core-12_50_1__sc-rpertu-0"
+  componentId: "core-12_52_0__sc-rpertu-0"
 })(["display:inline-block;position:relative;"]);
 export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledBadgeLabel",
-  componentId: "core-12_50_1__sc-rpertu-1"
+  componentId: "core-12_52_0__sc-rpertu-1"
 })(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
 //# sourceMappingURL=Badge.styles.js.map

package/dist/BadgePill/BadgePill.styles.js

@@ -3,11 +3,11 @@ import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContainer",
-  componentId: "core-12_50_1__sc-s2n9gd-0"
+  componentId: "core-12_52_0__sc-s2n9gd-0"
 })(["display:inline-flex;position:relative;"]);
 export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContent",
-  componentId: "core-12_50_1__sc-s2n9gd-1"
+  componentId: "core-12_52_0__sc-s2n9gd-1"
 })(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
   var $overlapping = _ref.$overlapping,
     _ref$$xOffset = _ref.$xOffset,
@@ -20,13 +20,13 @@ export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeDotIndicator",
-  componentId: "core-12_50_1__sc-s2n9gd-2"
+  componentId: "core-12_52_0__sc-s2n9gd-2"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
 var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
 var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
 export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeCounter",
-  componentId: "core-12_50_1__sc-s2n9gd-3"
+  componentId: "core-12_52_0__sc-s2n9gd-3"
 })(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
   return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
 });

package/dist/Banner/Banner.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import type { Props } from '../_utils/types';
 import type { BannerExpandableContentProps, BannerExpandActionButtonProps, BannerIconProps, BannerProps, BannerVariant } from './Banner.types';
-export declare const ErrorBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const InfoBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ErrorBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InfoBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * @since 11.26.0
  */
-export declare const AttentionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const AttentionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * @deprecated ActionBanner was renamed to AttentionBanner.
  * @deprecatedSince 11.26.0
  */
-export declare const ActionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ActionBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const UNSAFE_MiniBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     variant?: BannerVariant | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -38,7 +38,9 @@ export declare const Banner: React.ForwardRefExoticComponent<React.HTMLAttribute
     Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Props & React.RefAttributes<HTMLDivElement>>;
     ExpandableContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & BannerExpandableContentProps & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
     Action: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     ExpandActionButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & BannerExpandActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Actions: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/Banner/Banner.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "variant"],
+var _excluded = ["children", "role", "variant"],
   _excluded2 = ["children"],
   _excluded3 = ["children", "expanded", "expandableContentMaxHeight"],
   _excluded4 = ["children"],
@@ -23,6 +23,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { Clear, EllipsisVertical, Error, Info, Warning } from '@procore/core-icons/dist';
+import { useId } from '@react-aria/utils';
 import { partition } from 'ramda';
 import React from 'react';
 import { Button } from '../Button';
@@ -35,6 +36,7 @@ import { OverflowObserver } from '../_hooks/OverflowObserver';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { StyledAction, StyledActionsTrigger, StyledBannerContainer, StyledBody, StyledContent, StyledExpandableContent, StyledExpandableContentContainer, StyledIconContainer, StyledMiniBannerContainer, StyledTitle } from './Banner.styles';
+var BannerA11yContext = /*#__PURE__*/React.createContext(null);
 var defaultIcons = {
   error: /*#__PURE__*/React.createElement(Error, {
     size: "lg"
@@ -49,16 +51,57 @@ var defaultIcons = {
     size: "lg"
   })
 };
-var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _ref2 = partition(function (element) {
+function getBannerA11yProps(_ref) {
+  var hasLabelProvided = _ref.hasLabelProvided,
+    defaultAriaLabel = _ref.defaultAriaLabel,
+    role = _ref.role,
+    titleId = _ref.titleId;
+  if (role !== 'region') {
+    return {
+      landmarkProps: {
+        role: role
+      }
+    };
+  }
+  if (hasLabelProvided) {
+    return {
+      landmarkProps: {
+        role: 'region'
+      }
+    };
+  }
+  if (titleId) {
+    return {
+      landmarkProps: {
+        role: 'region',
+        'aria-labelledby': titleId
+      }
+    };
+  }
+  return {
+    landmarkProps: {
+      role: 'region',
+      'aria-label': defaultAriaLabel
+    }
+  };
+}
+var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref2, ref) {
+  var children = _ref2.children,
+    _ref2$role = _ref2.role,
+    role = _ref2$role === void 0 ? 'region' : _ref2$role,
+    variant = _ref2.variant,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var I18n = useI18nContext();
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    titleId = _React$useState2[0],
+    setTitleId = _React$useState2[1];
+  var _ref3 = partition(function (element) {
       return /*#__PURE__*/React.isValidElement(element) && element.type === ExpandableContent;
     }, React.Children.toArray(children)),
-    _ref3 = _slicedToArray(_ref2, 2),
-    expandableContentNodes = _ref3[0],
-    content = _ref3[1];
+    _ref4 = _slicedToArray(_ref3, 2),
+    expandableContentNodes = _ref4[0],
+    content = _ref4[1];
   var isExpandable = expandableContentNodes.length !== 0;
   var iconElement = React.useMemo(function () {
     return React.Children.toArray(children).find(function (child) {
@@ -66,11 +109,31 @@ var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     });
   }, [children]);
   var hasCustomIcon = iconElement && iconElement.props.icon;
-  return /*#__PURE__*/React.createElement(StyledBannerContainer, _extends({
+  var defaultAriaLabelByVariant = {
+    error: I18n.t('core.banner.defaultLabels.error'),
+    attention: I18n.t('core.banner.defaultLabels.attention'),
+    info: I18n.t('core.banner.defaultLabels.info'),
+    UNSAFE_attention_emphasized: I18n.t('core.banner.defaultLabels.unsafeAttentionEmphasized')
+  };
+  var _getBannerA11yProps = getBannerA11yProps({
+      hasLabelProvided: Boolean(props['aria-label'] || props['aria-labelledby']),
+      defaultAriaLabel: defaultAriaLabelByVariant[variant],
+      role: role,
+      titleId: titleId
+    }),
+    landmarkProps = _getBannerA11yProps.landmarkProps;
+  var a11yContextValue = React.useMemo(function () {
+    return {
+      setTitleId: setTitleId
+    };
+  }, [setTitleId]);
+  return /*#__PURE__*/React.createElement(BannerA11yContext.Provider, {
+    value: a11yContextValue
+  }, /*#__PURE__*/React.createElement(StyledBannerContainer, _extends({
     ref: ref,
     $isExpandable: isExpandable,
     $variant: variant
-  }, props), isExpandable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledExpandableContentContainer, {
+  }, landmarkProps, props), isExpandable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledExpandableContentContainer, {
     justifyContent: "space-between",
     alignItems: "center",
     gap: "lg"
@@ -83,26 +146,26 @@ var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     grow: "1"
   }, !hasCustomIcon && /*#__PURE__*/React.createElement(Icon, {
     icon: defaultIcons[variant]
-  }), content));
+  }), content)));
 });
-var Content = /*#__PURE__*/React.forwardRef(function Content(_ref4, ref) {
-  var children = _ref4.children,
-    props = _objectWithoutProperties(_ref4, _excluded2);
+var Content = /*#__PURE__*/React.forwardRef(function Content(_ref5, ref) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded2);
   return /*#__PURE__*/React.createElement(StyledContent, _extends({}, props, {
     ref: ref
   }), children);
 });
-var ExpandableContent = /*#__PURE__*/React.forwardRef(function ExpandableContent(_ref5, ref) {
-  var children = _ref5.children,
-    _ref5$expanded = _ref5.expanded,
-    expanded = _ref5$expanded === void 0 ? false : _ref5$expanded,
-    _ref5$expandableConte = _ref5.expandableContentMaxHeight,
-    expandableContentMaxHeight = _ref5$expandableConte === void 0 ? 120 : _ref5$expandableConte,
-    props = _objectWithoutProperties(_ref5, _excluded3);
+var ExpandableContent = /*#__PURE__*/React.forwardRef(function ExpandableContent(_ref6, ref) {
+  var children = _ref6.children,
+    _ref6$expanded = _ref6.expanded,
+    expanded = _ref6$expanded === void 0 ? false : _ref6$expanded,
+    _ref6$expandableConte = _ref6.expandableContentMaxHeight,
+    expandableContentMaxHeight = _ref6$expandableConte === void 0 ? 120 : _ref6$expandableConte,
+    props = _objectWithoutProperties(_ref6, _excluded3);
   var containerRef = React.useRef(null);
-  return expanded ? /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref6) {
-    var overflowRef = _ref6.ref,
-      isOverflowingY = _ref6.isOverflowingY;
+  return expanded ? /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref7) {
+    var overflowRef = _ref7.ref,
+      isOverflowingY = _ref7.isOverflowingY;
     return /*#__PURE__*/React.createElement(StyledExpandableContent, _extends({
       ref: mergeRefs(ref, containerRef),
       "data-qa": "core-banner-expandable-content",
@@ -116,32 +179,44 @@ var ExpandableContent = /*#__PURE__*/React.forwardRef(function ExpandableContent
     }), children);
   }) : null;
 });
-var Title = /*#__PURE__*/React.forwardRef(function Title(_ref7, ref) {
-  var children = _ref7.children,
-    props = _objectWithoutProperties(_ref7, _excluded4);
-  return /*#__PURE__*/React.createElement(StyledTitle, _extends({}, props, {
+var Title = /*#__PURE__*/React.forwardRef(function Title(_ref8, ref) {
+  var _props$id;
+  var children = _ref8.children,
+    props = _objectWithoutProperties(_ref8, _excluded4);
+  var generatedId = useId();
+  var titleId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
+  var a11yContext = React.useContext(BannerA11yContext);
+  React.useEffect(function () {
+    a11yContext === null || a11yContext === void 0 ? void 0 : a11yContext.setTitleId(titleId);
+    return function () {
+      return a11yContext === null || a11yContext === void 0 ? void 0 : a11yContext.setTitleId(undefined);
+    };
+  }, [a11yContext, titleId]);
+  return /*#__PURE__*/React.createElement(StyledTitle, _extends({
+    id: titleId
+  }, props, {
     ref: ref
   }), children);
 });
-var Body = /*#__PURE__*/React.forwardRef(function Body(_ref8, ref) {
-  var children = _ref8.children,
-    props = _objectWithoutProperties(_ref8, _excluded5);
+var Body = /*#__PURE__*/React.forwardRef(function Body(_ref9, ref) {
+  var children = _ref9.children,
+    props = _objectWithoutProperties(_ref9, _excluded5);
   return /*#__PURE__*/React.createElement(StyledBody, _extends({}, props, {
     ref: ref
   }), children);
 });
-var Action = /*#__PURE__*/React.forwardRef(function Action(_ref9, ref) {
-  var children = _ref9.children,
-    props = _objectWithoutProperties(_ref9, _excluded6);
+var Action = /*#__PURE__*/React.forwardRef(function Action(_ref0, ref) {
+  var children = _ref0.children,
+    props = _objectWithoutProperties(_ref0, _excluded6);
   return /*#__PURE__*/React.createElement(StyledAction, _extends({}, props, {
     ref: ref
   }), children);
 });
-var ExpandActionButton = /*#__PURE__*/React.forwardRef(function ExpandActionButton(_ref0, ref) {
-  var isExpanded = _ref0.isExpanded,
-    onExpandChange = _ref0.onExpandChange,
-    children = _ref0.children,
-    props = _objectWithoutProperties(_ref0, _excluded7);
+var ExpandActionButton = /*#__PURE__*/React.forwardRef(function ExpandActionButton(_ref1, ref) {
+  var isExpanded = _ref1.isExpanded,
+    onExpandChange = _ref1.onExpandChange,
+    children = _ref1.children,
+    props = _objectWithoutProperties(_ref1, _excluded7);
   var I18n = useI18nContext();
   var label = children !== null && children !== void 0 ? children : isExpanded ? I18n.t('core.banner.collapse') : I18n.t('core.banner.expand');
   return /*#__PURE__*/React.createElement(Button, _extends({
@@ -153,17 +228,17 @@ var ExpandActionButton = /*#__PURE__*/React.forwardRef(function ExpandActionButt
     }
   }, props), label);
 });
-var DropdownAction = /*#__PURE__*/React.forwardRef(function DropdownAction(_ref1, ref) {
-  var children = _ref1.children,
-    props = _objectWithoutProperties(_ref1, _excluded8);
+var DropdownAction = /*#__PURE__*/React.forwardRef(function DropdownAction(_ref10, ref) {
+  var children = _ref10.children,
+    props = _objectWithoutProperties(_ref10, _excluded8);
   return /*#__PURE__*/React.createElement(Menu.Item, _extends({
     ref: ref,
     item: null
   }, props), children);
 });
-var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref10, ref) {
-  var children = _ref10.children,
-    props = _objectWithoutProperties(_ref10, _excluded9);
+var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref11, ref) {
+  var children = _ref11.children,
+    props = _objectWithoutProperties(_ref11, _excluded9);
   var actionButtons = React.Children.toArray(children).filter(function (element) {
     return /*#__PURE__*/React.isValidElement(element) && element.type === Action;
   });
@@ -173,13 +248,13 @@ var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref10, ref) {
         return node === null || node === void 0 ? void 0 : node.focus();
       },
       usingHook: useMenu({
-        isSelectable: function isSelectable(_ref11) {
-          var type = _ref11.type;
+        isSelectable: function isSelectable(_ref12) {
+          var type = _ref12.type;
           return type === DropdownAction;
         }
       })
-    }, /*#__PURE__*/React.createElement(Menu.Options, null, actionButtons.map(function (_ref12, idx) {
-      var actionButtonProps = _ref12.props;
+    }, /*#__PURE__*/React.createElement(Menu.Options, null, actionButtons.map(function (_ref13, idx) {
+      var actionButtonProps = _ref13.props;
       return /*#__PURE__*/React.createElement(DropdownAction, _extends({
         key: idx
       }, actionButtonProps));
@@ -193,18 +268,18 @@ var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref10, ref) {
     icon: /*#__PURE__*/React.createElement(EllipsisVertical, null)
   }, props)));
 });
-var Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref13, ref) {
-  var children = _ref13.children,
-    icon = _ref13.icon,
-    props = _objectWithoutProperties(_ref13, _excluded0);
+var Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref14, ref) {
+  var children = _ref14.children,
+    icon = _ref14.icon,
+    props = _objectWithoutProperties(_ref14, _excluded0);
   return /*#__PURE__*/React.createElement(StyledIconContainer, _extends({
     ref: ref,
     "aria-hidden": "true"
   }, props), icon);
 });
-var Dismiss = /*#__PURE__*/React.forwardRef(function Dismiss(_ref14, ref) {
-  var children = _ref14.children,
-    props = _objectWithoutProperties(_ref14, _excluded1);
+var Dismiss = /*#__PURE__*/React.forwardRef(function Dismiss(_ref15, ref) {
+  var children = _ref15.children,
+    props = _objectWithoutProperties(_ref15, _excluded1);
   var I18n = useI18nContext();
   return /*#__PURE__*/React.createElement(Button, _extends({
     "aria-label": I18n.t('core.banner.dismissAlert'),
@@ -214,9 +289,9 @@ var Dismiss = /*#__PURE__*/React.forwardRef(function Dismiss(_ref14, ref) {
     variant: "tertiary"
   }));
 });
-export var ErrorBanner = /*#__PURE__*/React.forwardRef(function ErrorBanner(_ref15, ref) {
-  var children = _ref15.children,
-    props = _objectWithoutProperties(_ref15, _excluded10);
+export var ErrorBanner = /*#__PURE__*/React.forwardRef(function ErrorBanner(_ref16, ref) {
+  var children = _ref16.children,
+    props = _objectWithoutProperties(_ref16, _excluded10);
   return /*#__PURE__*/React.createElement(Banner, _extends({
     ref: ref,
     variant: "error"
@@ -226,9 +301,9 @@ export var ErrorBanner = /*#__PURE__*/React.forwardRef(function ErrorBanner(_ref
     })
   }), children);
 });
-export var InfoBanner = /*#__PURE__*/React.forwardRef(function InfoBanner(_ref16, ref) {
-  var children = _ref16.children,
-    props = _objectWithoutProperties(_ref16, _excluded11);
+export var InfoBanner = /*#__PURE__*/React.forwardRef(function InfoBanner(_ref17, ref) {
+  var children = _ref17.children,
+    props = _objectWithoutProperties(_ref17, _excluded11);
   return /*#__PURE__*/React.createElement(Banner, _extends({
     ref: ref,
     variant: "info"
@@ -242,9 +317,9 @@ export var InfoBanner = /*#__PURE__*/React.forwardRef(function InfoBanner(_ref16
 /**
  * @since 11.26.0
  */
-export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBanner(_ref17, ref) {
-  var children = _ref17.children,
-    props = _objectWithoutProperties(_ref17, _excluded12);
+export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBanner(_ref18, ref) {
+  var children = _ref18.children,
+    props = _objectWithoutProperties(_ref18, _excluded12);
   return /*#__PURE__*/React.createElement(Banner, _extends({
     ref: ref,
     variant: "attention"
@@ -259,11 +334,11 @@ export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBan
  * @deprecatedSince 11.26.0
  */
 export var ActionBanner = AttentionBanner;
-export var UNSAFE_MiniBanner = /*#__PURE__*/React.forwardRef(function MiniBanner(_ref18, ref) {
-  var children = _ref18.children,
-    _ref18$variant = _ref18.variant,
-    variant = _ref18$variant === void 0 ? 'info' : _ref18$variant,
-    props = _objectWithoutProperties(_ref18, _excluded13);
+export var UNSAFE_MiniBanner = /*#__PURE__*/React.forwardRef(function MiniBanner(_ref19, ref) {
+  var children = _ref19.children,
+    _ref19$variant = _ref19.variant,
+    variant = _ref19$variant === void 0 ? 'info' : _ref19$variant,
+    props = _objectWithoutProperties(_ref19, _excluded13);
   return /*#__PURE__*/React.createElement(StyledMiniBannerContainer, _extends({
     ref: ref,
     variant: variant