chore(cauldron): Release 6.25.1

.github/workflows/update-browserslist-db.yml

@@ -5,6 +5,7 @@ on:
     # run on the 1st of every month
     - cron: '15 3 1 * *'
   workflow_call:
+  workflow_dispatch:
 
 jobs:
 

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [6.25.1](https://github.com/dequelabs/cauldron/compare/v6.25.0...v6.25.1) (2026-02-05)
+
+
+### Bug Fixes
+
+* prevent button text wrapping using max-content for button min-width ([#2214](https://github.com/dequelabs/cauldron/issues/2214)) ([f92cb92](https://github.com/dequelabs/cauldron/commit/f92cb92b40f72ecde361f3a9ef30e21a63e21f3c))
+* **react:** remove false ellipsis when text fits in Chrome ([#2206](https://github.com/dequelabs/cauldron/issues/2206)) ([fedc13a](https://github.com/dequelabs/cauldron/commit/fedc13a23354c4609da2ced2530d6fcc0855ca18))
+* **styles:** Fixed `Link` component with Icon to stretch inside flex container ([#2205](https://github.com/dequelabs/cauldron/issues/2205)) ([30b64b1](https://github.com/dequelabs/cauldron/commit/30b64b1d2a7faa4249e28784aaaac19805195ddc))
+* top bar with action menu incorrect div[role=presentation] ([#2204](https://github.com/dequelabs/cauldron/issues/2204)) ([bc36343](https://github.com/dequelabs/cauldron/commit/bc36343e5277ec42212d439f4a2d9ace46c3b6b5))
+
 ## [6.25.0](https://github.com/dequelabs/cauldron/compare/v6.24.0...v6.25.0) (2026-01-27)
 
 

docs/index.js

@@ -162,21 +162,19 @@ const App = () => {
             renderInTrigger={true}
             trigger={({ ref, children, ...props }) => {
               return (
-                <>
-                  <TopBarItem
-                    menuItemRef={ref}
-                    className="MenuItem--align-right MenuItem--separator MenuItem--arrow-down"
-                    tabIndex={0}
-                    autoClickLink={false}
-                    {...props}
-                  >
-                    <span className="TopBar__item--icon">
-                      <Icon type="gears" />
-                      <div>Settings</div>
-                    </span>
-                  </TopBarItem>
+                <TopBarItem
+                  menuItemRef={ref}
+                  className="MenuItem--align-right MenuItem--separator MenuItem--arrow-down"
+                  tabIndex={0}
+                  autoClickLink={false}
+                  {...props}
+                >
+                  <span className="TopBar__item--icon">
+                    <Icon type="gears" />
+                    <div>Settings</div>
+                  </span>
                   {children}
-                </>
+                </TopBarItem>
               );
             }}
             placement="bottom-end"

docs/pages/components/TopBar.mdx

@@ -62,12 +62,7 @@ import {
 
 ### With Menu
 
-In addition to navigational items, the `MenuBar` can also contain an action menu with items when composed with `ActionMenu` and `ActionList`.
-
-<Note title="Accessibility note">
-  The menu (children) must be rendered as a sibling of `TopBarItem` (the trigger/button), not as its child.
-  This ensures correct screen reader (VoiceOver) announcements, focus behavior and semantics. Do not move the menu inside the trigger.
-</Note>
+In addition to navigational items, the `MenuBar` can also contain an action menu with items when composed with `ActionMenu` and `ActionList`:
 
 ```jsx example
 function TopBarWithMenuExample() {
@@ -92,12 +87,10 @@ function TopBarWithMenuExample() {
           trigger={
             ({ ref, children, ...props }) => {
               return (
-                <>
-                  <TopBarItem menuItemRef={ref} tabIndex={0} autoClickLink={false} {...props}>
-                    Menu <Icon type="chevron-down" />
-                  </TopBarItem>
+                <TopBarItem menuItemRef={ref} tabIndex={0} autoClickLink={false} {...props}>
+                  Menu <Icon type="chevron-down" />
                   {children}
-                </>
+                </TopBarItem>
               )
             }
           }
@@ -140,12 +133,10 @@ function TopBarWithMenuLinksExample() {
           trigger={
             ({ ref, children, ...props }) => {
               return (
-                <>
-                  <TopBarItem menuItemRef={ref} tabIndex={0} autoClickLink={false} {...props}>
-                    Menu <Icon type="chevron-down" />
-                  </TopBarItem>
+                <TopBarItem menuItemRef={ref} tabIndex={0} autoClickLink={false} {...props}>
+                  Menu <Icon type="chevron-down" />
                   {children}
-                </>
+                </TopBarItem>
               )
             }
           }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.25.0",
+  "version": "6.25.1",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -95,11 +95,11 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prettier": "^3",
-    "puppeteer": "^24.34.0",
+    "puppeteer": "^24.36.0",
     "react": "^18",
     "react-dom": "^18",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^7.9.5",
+    "react-router-dom": "^7.13.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.2.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.25.0",
+  "version": "6.25.1",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",

packages/react/src/components/ActionMenu/ActionMenu.tsx

@@ -18,7 +18,12 @@ const [ArrowDown, ArrowUp] = ['ArrowDown', 'ArrowUp'];
 
 type ActionMenuTriggerProps = Pick<
   React.HTMLAttributes<HTMLButtonElement>,
-  'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'
+  | 'children'
+  | 'onClick'
+  | 'onKeyDown'
+  | 'aria-expanded'
+  | 'aria-haspopup'
+  | 'aria-controls'
 > & {
   ref: React.RefObject<HTMLButtonElement>;
 };
@@ -67,6 +72,7 @@ const ActionMenu = forwardRef<HTMLElement, ActionMenuProps>(
       actionMenuList.props.ref
     );
     const [triggerId] = useId(1, 'menu-trigger');
+    const [menuId] = useId(1, 'menu');
 
     const handleTriggerClick = useCallback(
       (
@@ -112,6 +118,10 @@ const ActionMenu = forwardRef<HTMLElement, ActionMenuProps>(
       }
     }, []);
 
+    const handleOverlayBlur = useCallback(() => {
+      setOpen(false);
+    }, []);
+
     const handleAction = useCallback(
       (key: string, event: onActionEvent) => {
         // istanbul ignore else
@@ -135,6 +145,8 @@ const ActionMenu = forwardRef<HTMLElement, ActionMenuProps>(
       }
     }, [open]);
 
+    const hidden = renderInTrigger && !open;
+
     const overlay = (
       <AnchoredOverlay
         ref={actionMenuRef}
@@ -147,15 +159,19 @@ const ActionMenu = forwardRef<HTMLElement, ActionMenuProps>(
         offset={4}
         portal={portal}
         style={{ display: !open ? 'none' : undefined, ...style }}
+        aria-hidden={hidden}
+        onBlur={handleOverlayBlur}
         {...props}
       >
         {React.cloneElement(actionMenuList, {
           ref: actionMenuListRef,
+          id: menuId,
           role: 'menu',
           onAction: handleAction,
           'aria-labelledby': triggerId,
           focusStrategy,
-          focusDisabledOptions: true
+          focusDisabledOptions: true,
+          hidden
         })}
       </AnchoredOverlay>
     );
@@ -167,9 +183,10 @@ const ActionMenu = forwardRef<HTMLElement, ActionMenuProps>(
         onClick: handleTriggerClick,
         onKeyDown: handleTriggerKeyDown,
         'aria-expanded': open,
-        'aria-haspopup': 'menu'
+        'aria-haspopup': 'menu',
+        'aria-controls': menuId
       };
-    }, [handleTriggerClick, open]);
+    }, [handleTriggerClick, open, menuId]);
 
     if (renderInTrigger) {
       // istanbul ignore next

packages/react/src/components/Button/screenshots.e2e.tsx

@@ -591,3 +591,28 @@ test('should have screenshot for Button[variant="badge"]', async ({
   await setTheme(page, 'dark');
   await expect(component).toHaveScreenshot('dark--button[variant=badge]');
 });
+test('should not wrap button contents by default', async ({ mount, page }) => {
+  await page.setViewportSize({ height: 600, width: 320 });
+  const internalText =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+
+  const component = await mount(
+    <div
+      className="Button-wrap"
+      style={{ display: 'flex', flexDirection: 'column', width: '320px' }}
+    >
+      <Button variant="primary">{internalText}</Button>
+      <Button variant="primary" style={{ minWidth: '10px' }}>
+        {internalText}
+      </Button>
+    </div>
+  );
+  await expect(component).toHaveScreenshot('button-wrap');
+  const buttons = component.getByRole('button');
+  const firstButton = buttons.first();
+  const firstButtonBoundingBox = await firstButton.boundingBox();
+  expect(firstButtonBoundingBox?.height).toBe(36);
+  const lastButton = buttons.last();
+  const lastButtonBoundingBox = await lastButton.boundingBox();
+  expect(lastButtonBoundingBox?.height).toBeGreaterThan(36);
+});

packages/react/yarn.lock

@@ -2484,9 +2484,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001580:
-  version "1.0.30001762"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz"
-  integrity sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==
+  version "1.0.30001768"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz"
+  integrity sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==
 
 chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"

packages/styles/button.css

@@ -48,13 +48,13 @@
   position: relative;
   text-align: center;
   min-height: var(--button-height);
-  min-width: 6.25rem;
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
   justify-items: center;
   justify-content: center;
   gap: var(--space-smallest);
+  min-width: max-content;
 }
 
 .Button--tag,
@@ -268,7 +268,7 @@ button.Link {
 
 .Button--thin {
   min-height: var(--button-thin-height);
-  min-width: 6.25rem;
+  min-width: max-content;
   font-size: var(--button-thin-text-size);
   padding: 0 var(--space-small);
 }

packages/styles/link.css

@@ -28,8 +28,10 @@
 }
 
 .Link:where(:has(.Icon)) {
+  width: max-content;
   display: inline-flex;
   align-items: center;
   gap: var(--space-half);
   flex-wrap: wrap;
+  align-self: flex-start;
 }

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.25.0",
+  "version": "6.25.1",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",

packages/styles/text-ellipsis.css

@@ -8,8 +8,9 @@
 /* Try and prevent Safari from showing a platform
  * tooltip when visible text is truncated
  * see: https://github.com/dequelabs/cauldron/issues/1926
+ * Only apply to single-line ellipsis to avoid Chrome false ellipsis bug
  */
-.TextEllipsis:after {
+.TextEllipsis:not(.TextEllipsis--multiline):after {
   content: '';
   display: block;
 }

packages/styles/top-bar.css

@@ -72,12 +72,12 @@
   border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
-.TopBar > ul > li:focus-within,
+.TopBar > ul > li:focus,
 .TopBar > ul > li:hover {
   outline: 0;
 }
 
-.TopBar > ul > li:focus-within:before,
+.TopBar > ul > li:focus:before,
 .TopBar > ul > li:hover:before {
   content: '';
   position: absolute;

packages/styles/yarn.lock

@@ -134,9 +134,9 @@ camelcase@^5.0.0:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001219:
-  version "1.0.30001762"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz"
-  integrity sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==
+  version "1.0.30001768"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz"
+  integrity sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==
 
 chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"