@kaizen/components 2.3.3 → 2.3.4

package/dist/cjs/src/TitleBlock/TitleBlock.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var Avatar = require('../Avatar/Avatar.cjs');
 require('../ButtonV1/Button/Button.cjs');
@@ -212,6 +213,7 @@ var TitleBlock = function (_a) {
     isSmall = _o.isSmall,
     isMedium = _o.isMedium;
   var isSmallOrMediumViewport = isMedium || isSmall;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
     id: id,
     className: classnames__default.default(TitleBlock_module.titleBlock, TitleBlock_module["".concat(variant, "Variant")], Boolean(subtitle) && TitleBlock_module.hasSubtitle, Boolean(pageSwitcherSelect) && TitleBlock_module.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && TitleBlock_module.collapseNavigationArea, title && title.length >= 30 && TitleBlock_module.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && TitleBlock_module.hasLongSubtitle, hasNavigationTabs && TitleBlock_module.hasNavigationTabs)
@@ -238,7 +240,11 @@ var TitleBlock = function (_a) {
       name: "menu",
       isPresentational: true
     }),
-    label: "Open menu",
+    label: formatMessage({
+      id: 'kzTitleBlock.hamburgerMenuLabel',
+      defaultMessage: 'Open menu',
+      description: 'Label for the dropdown menu which displays navigation items'
+    }),
     reversed: utils.isReversed(variant)
   })), avatar && renderAvatar(avatar, avatarAutomationId), React__default.default.createElement("div", {
     className: TitleBlock_module.titleAndSubtitle

package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../ButtonV1/Button/Button.cjs');
 var IconButton = require('../../ButtonV1/IconButton/IconButton.cjs');
 var Icon = require('../../Icon/Icon.cjs');
@@ -19,12 +20,12 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryAndOverflowMenu = function (secondaryAndOverflowMenuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems) return undefined;
   return React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: 'Open secondary and overflow menu',
+      label: secondaryAndOverflowMenuLabel,
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
@@ -47,6 +48,12 @@ var MainActions = function (_a) {
     secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
     _e = _a.reversed,
     reversed = _e === void 0 ? false : _e;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var secondaryAndOverflowMenuLabel = formatMessage({
+    id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+    defaultMessage: 'Open secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional actions'
+  });
   var items;
   // Build combined secondary + overflow menu items once, to be spread into the toolbar items
   var secondaryAndOverflowMenu = [];
@@ -77,7 +84,7 @@ var MainActions = function (_a) {
   if (allMenuItems.length > 0) {
     secondaryAndOverflowMenu.push({
       key: 'overflowMenu',
-      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+      node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)
     });
   }
   var defaultActionItem = defaultAction ? [{
@@ -97,7 +104,11 @@ var MainActions = function (_a) {
     }, React__default.default.createElement(index.Menu, {
       align: "right",
       button: React__default.default.createElement(IconButton.IconButton, {
-        label: 'Open default action overflow menu',
+        label: formatMessage({
+          id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+          defaultMessage: 'Open default action overflow menu',
+          description: 'Label for the dropdown menu which displays the default action item'
+        }),
         reversed: reversed,
         icon: React__default.default.createElement(Icon.Icon, {
           name: "more_horiz",

package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../ButtonV1/Button/Button.cjs');
 var IconButton = require('../../ButtonV1/IconButton/IconButton.cjs');
 var Icon = require('../../Icon/Icon.cjs');
@@ -17,7 +18,7 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryOverflowMenu = function (menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
   return React__default.default.createElement("div", {
     className: TitleBlock_module.secondaryOverflowMenu
@@ -26,7 +27,8 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: React__default.default.createElement(Button.Button, {
       secondary: true,
       reversed: reversed,
-      label: "Menu",
+      label: menuLabel,
+      "aria-label": menuAriaLabel,
       "data-automation-id": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       "data-testid": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       icon: React__default.default.createElement(Icon.Icon, {
@@ -42,7 +44,7 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
   }))));
 };
 // New: combined overflow menu (secondary actions converted + overflow menu items)
-var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+var renderCombinedSecondaryOverflowMenu = function (combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed) {
   var secondaryConverted = secondaryActions ? utils.convertSecondaryActionsToMenuItems(secondaryActions) : [];
   var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
   if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
@@ -52,7 +54,7 @@ var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryO
   }, React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: combinedMenuLabel,
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
@@ -74,7 +76,23 @@ var SecondaryActions = function (_a) {
     secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
     _b = _a.reversed,
     reversed = _b === void 0 ? false : _b;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   if (!secondaryActions && !secondaryOverflowMenuItems) return null;
+  var menuLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuLabel',
+    defaultMessage: 'Menu',
+    description: 'Label for the dropdown menu which displays additional action items'
+  });
+  var menuAriaLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuAriaLabel',
+    defaultMessage: 'Opens overflow menu',
+    description: 'Aria Label for the dropdown menu which displays additional action items'
+  });
+  var combinedMenuLabel = formatMessage({
+    id: 'kzTitleBlock.combinedOverflowMenuLabel',
+    defaultMessage: 'Open combined secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional action items and secondary actions'
+  });
   var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
     if ('menuItems' in action) {
       return {
@@ -118,8 +136,8 @@ var SecondaryActions = function (_a) {
       };
     }
   }) : [];
-  var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-  var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+  var overflowMenu = renderSecondaryOverflowMenu(menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed);
+  var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed);
   var toolbarItems = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
     key: 'overflowMenu',
     node: overflowMenu

package/dist/esm/src/TitleBlock/TitleBlock.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import '../ButtonV1/Button/Button.mjs';
@@ -204,6 +205,7 @@ const TitleBlock = /*#__PURE__*/function () {
       isSmall = _o.isSmall,
       isMedium = _o.isMedium;
     var isSmallOrMediumViewport = isMedium || isSmall;
+    var formatMessage = useIntl().formatMessage;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       id: id,
       className: classnames(styles.titleBlock, styles["".concat(variant, "Variant")], Boolean(subtitle) && styles.hasSubtitle, Boolean(pageSwitcherSelect) && styles.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && styles.collapseNavigationArea, title && title.length >= 30 && styles.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && styles.hasLongSubtitle, hasNavigationTabs && styles.hasNavigationTabs)
@@ -230,7 +232,11 @@ const TitleBlock = /*#__PURE__*/function () {
         name: "menu",
         isPresentational: true
       }),
-      label: "Open menu",
+      label: formatMessage({
+        id: 'kzTitleBlock.hamburgerMenuLabel',
+        defaultMessage: 'Open menu',
+        description: 'Label for the dropdown menu which displays navigation items'
+      }),
       reversed: isReversed(variant)
     }))), avatar && renderAvatar(avatar, avatarAutomationId), /*#__PURE__*/React.createElement("div", {
       className: styles.titleAndSubtitle

package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs

@@ -1,5 +1,6 @@
 import { __spreadArray, __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Icon } from '../../Icon/Icon.mjs';
@@ -11,12 +12,12 @@ import { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils.mj
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
 import styles from './MainActions.module.scss.mjs';
-var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryAndOverflowMenu = function (secondaryAndOverflowMenuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems) return undefined;
   return /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: 'Open secondary and overflow menu',
+      label: secondaryAndOverflowMenuLabel,
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
@@ -40,6 +41,12 @@ const MainActions = /*#__PURE__*/function () {
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       _e = _a.reversed,
       reversed = _e === void 0 ? false : _e;
+    var formatMessage = useIntl().formatMessage;
+    var secondaryAndOverflowMenuLabel = formatMessage({
+      id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+      defaultMessage: 'Open secondary and overflow menu',
+      description: 'Label for the dropdown menu which displays additional actions'
+    });
     var items;
     // Build combined secondary + overflow menu items once, to be spread into the toolbar items
     var secondaryAndOverflowMenu = [];
@@ -70,7 +77,7 @@ const MainActions = /*#__PURE__*/function () {
     if (allMenuItems.length > 0) {
       secondaryAndOverflowMenu.push({
         key: 'overflowMenu',
-        node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+        node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)
       });
     }
     var defaultActionItem = defaultAction ? [{
@@ -90,7 +97,11 @@ const MainActions = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(Menu, {
         align: "right",
         button: /*#__PURE__*/React.createElement(IconButton, {
-          label: 'Open default action overflow menu',
+          label: formatMessage({
+            id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+            defaultMessage: 'Open default action overflow menu',
+            description: 'Label for the dropdown menu which displays the default action item'
+          }),
           reversed: reversed,
           icon: /*#__PURE__*/React.createElement(Icon, {
             name: "more_horiz",

package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs

@@ -1,5 +1,6 @@
 import { __assign, __spreadArray } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Icon } from '../../Icon/Icon.mjs';
@@ -9,7 +10,7 @@ import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
 import { convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
-var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+var renderSecondaryOverflowMenu = function (menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed) {
   if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.secondaryOverflowMenu
@@ -18,7 +19,8 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: /*#__PURE__*/React.createElement(Button, {
       secondary: true,
       reversed: reversed,
-      label: "Menu",
+      label: menuLabel,
+      "aria-label": menuAriaLabel,
       "data-automation-id": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       "data-testid": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
       icon: /*#__PURE__*/React.createElement(Icon, {
@@ -34,7 +36,7 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
   }))));
 };
 // New: combined overflow menu (secondary actions converted + overflow menu items)
-var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+var renderCombinedSecondaryOverflowMenu = function (combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed) {
   var secondaryConverted = secondaryActions ? convertSecondaryActionsToMenuItems(secondaryActions) : [];
   var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
   if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
@@ -44,7 +46,7 @@ var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryO
   }, /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: combinedMenuLabel,
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
@@ -67,7 +69,23 @@ const SecondaryActions = /*#__PURE__*/function () {
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       _b = _a.reversed,
       reversed = _b === void 0 ? false : _b;
+    var formatMessage = useIntl().formatMessage;
     if (!secondaryActions && !secondaryOverflowMenuItems) return null;
+    var menuLabel = formatMessage({
+      id: 'kzTitleBlock.overflowMenuLabel',
+      defaultMessage: 'Menu',
+      description: 'Label for the dropdown menu which displays additional action items'
+    });
+    var menuAriaLabel = formatMessage({
+      id: 'kzTitleBlock.overflowMenuAriaLabel',
+      defaultMessage: 'Opens overflow menu',
+      description: 'Aria Label for the dropdown menu which displays additional action items'
+    });
+    var combinedMenuLabel = formatMessage({
+      id: 'kzTitleBlock.combinedOverflowMenuLabel',
+      defaultMessage: 'Open combined secondary and overflow menu',
+      description: 'Label for the dropdown menu which displays additional action items and secondary actions'
+    });
     var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
       if ('menuItems' in action) {
         return {
@@ -111,8 +129,8 @@ const SecondaryActions = /*#__PURE__*/function () {
         };
       }
     }) : [];
-    var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+    var overflowMenu = renderSecondaryOverflowMenu(menuAriaLabel, menuLabel, secondaryOverflowMenuItems, reversed);
+    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(combinedMenuLabel, secondaryActions, secondaryOverflowMenuItems, reversed);
     var toolbarItems = __spreadArray(__spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
       key: 'overflowMenu',
       node: overflowMenu

package/dist/styles.css

@@ -10248,7 +10248,6 @@
     display: none;
     align-self: self-start;
     box-sizing: border-box;
-    overflow: hidden;
     height: 3rem;
     width: 3rem;
     margin-inline-end: calc(1.5rem / 2);
@@ -10258,6 +10257,7 @@
     max-width: 100%;
   }
   .TitleBlock-module_avatar__mEjJ8.TitleBlock-module_withBorder__D8Mz2 {
+    overflow: hidden;
     border: 3px solid var(--color-white, #ffffff);
     border-radius: 50%;
   }

package/locales/en.json

@@ -221,6 +221,30 @@
     "description": "Prompts user to interact with button to hide information",
     "message": "Hide information:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message": "Open combined secondary and overflow menu"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays the default action item",
+    "message": "Open default action overflow menu"
+  },
+  "kzTitleBlock.hamburgerMenuLabel": {
+    "description": "Label for the dropdown menu which displays navigation items",
+    "message": "Open menu"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel": {
+    "description": "Aria Label for the dropdown menu which displays additional action items",
+    "message": "Opens overflow menu"
+  },
+  "kzTitleBlock.overflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional action items",
+    "message": "Menu"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel": {
+    "description": "Label for the dropdown menu which displays additional actions",
+    "message": "Open secondary and overflow menu"
+  },
   "singleSelect.chevronButton": {
     "description": "Aria label text for the SingleSelect button to open and close suggestions list",
     "message": "Show suggestions for {field}"
@@ -228,9 +252,5 @@
   "singleSelect.clearButtonAlt_v2": {
     "description": "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
     "message": "Clear selection: {field}"
-  },
-  "splitButton.dropdownButton.label": {
-    "description": "Label for a dropdown menu holding additional actions",
-    "message": "Additional actions"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TitleBlock/TitleBlock.module.scss

@@ -277,7 +277,6 @@
     display: none;
     align-self: self-start;
     box-sizing: border-box;
-    overflow: hidden;
     height: $ca-grid * 2;
     width: $ca-grid * 2;
 
@@ -288,6 +287,7 @@
     }
 
     &.withBorder {
+      overflow: hidden;
       border: 3px solid $color-white;
       border-radius: 50%;
     }

package/src/TitleBlock/TitleBlock.tsx

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Avatar } from '~components/Avatar'
 import { IconButton } from '~components/ButtonV1'
@@ -266,6 +267,7 @@ export const TitleBlock = ({
     queries: { isSmall, isMedium },
   } = useMediaQueries()
   const isSmallOrMediumViewport = isMedium || isSmall
+  const { formatMessage } = useIntl()
   return (
     <>
       <div
@@ -305,7 +307,12 @@ export const TitleBlock = ({
                         <IconButton
                           onClick={handleHamburgerClick}
                           icon={<Icon name="menu" isPresentational />}
-                          label="Open menu"
+                          label={formatMessage({
+                            id: 'kzTitleBlock.hamburgerMenuLabel',
+                            defaultMessage: 'Open menu',
+                            description:
+                              'Label for the dropdown menu which displays navigation items',
+                          })}
                           reversed={isReversed(variant)}
                         />
                       </div>

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -302,6 +302,29 @@ export const StickerSheetVariants: Story = {
     </StickerSheet>
   ),
 }
+export const StickerSheetWithDefaultAvatar: Story = {
+  name: 'Sticker Sheet (DefaultAvatar)',
+  render: () => (
+    <StickerSheet title="TitleBlock Variants With Default Avatar">
+      <StickerSheet.Row header="Default (Purple background)">
+        <TitleBlock title="Default Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Education (Blue background)">
+        <TitleBlock
+          variant="education"
+          title="Education Variant"
+          avatar={{ fullName: 'Blanca Wheeler' }}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Admin (White background)">
+        <TitleBlock variant="admin" title="Admin Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Light (White background)">
+        <TitleBlock variant="light" title="Light Variant" avatar={{ fullName: 'Blanca Wheeler' }} />
+      </StickerSheet.Row>
+    </StickerSheet>
+  ),
+}
 export const StickerSheetVariantsWithSection: Story = {
   name: 'Sticker Sheet (Variants With Section)',
   render: () => (
@@ -651,6 +674,7 @@ export const WithTitleCollapseNavigationAreaWhenPossible: Story = {
     collapseNavigationAreaWhenPossible: true,
   },
 }
+
 export const WithOnlySecondaryActions: Story = {
   parameters: {
     viewport: viewports,

package/src/TitleBlock/subcomponents/MainActions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
@@ -24,6 +25,7 @@ type MainActionsProps = {
 }
 
 const renderSecondaryAndOverflowMenu = (
+  secondaryAndOverflowMenuLabel: string,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
@@ -33,7 +35,7 @@ const renderSecondaryAndOverflowMenu = (
       align="right"
       button={
         <IconButton
-          label={'Open secondary and overflow menu'}
+          label={secondaryAndOverflowMenuLabel}
           reversed={reversed}
           icon={<Icon name="more_horiz" isPresentational />}
           id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
@@ -57,6 +59,13 @@ export const MainActions = ({
   secondaryOverflowMenuItems,
   reversed = false,
 }: MainActionsProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+
+  const secondaryAndOverflowMenuLabel = formatMessage({
+    id: 'kzTitleBlock.secondaryAndOverflowMenuLabel',
+    defaultMessage: 'Open secondary and overflow menu',
+    description: 'Label for the dropdown menu which displays additional actions',
+  })
   let items
 
   // Build combined secondary + overflow menu items once, to be spread into the toolbar items
@@ -97,7 +106,7 @@ export const MainActions = ({
   if (allMenuItems.length > 0) {
     secondaryAndOverflowMenu.push({
       key: 'overflowMenu',
-      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)!,
+      node: renderSecondaryAndOverflowMenu(secondaryAndOverflowMenuLabel, allMenuItems, reversed)!,
     })
   }
 
@@ -130,7 +139,12 @@ export const MainActions = ({
                 align="right"
                 button={
                   <IconButton
-                    label={'Open default action overflow menu'}
+                    label={formatMessage({
+                      id: 'kzTitleBlock.defaultActionMinimizedOverflowMenuLabel',
+                      defaultMessage: 'Open default action overflow menu',
+                      description:
+                        'Label for the dropdown menu which displays the default action item',
+                    })}
                     reversed={reversed}
                     icon={<Icon name="more_horiz" isPresentational />}
                     id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}

package/src/TitleBlock/subcomponents/SecondaryActions.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button, IconButton } from '~components/ButtonV1'
 import { Icon } from '~components/Icon'
 import { Menu, MenuList } from '~components/MenuV1'
@@ -16,6 +17,8 @@ type Props = {
 }
 
 const renderSecondaryOverflowMenu = (
+  menuAriaLabel: string,
+  menuLabel: string,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
@@ -28,7 +31,8 @@ const renderSecondaryOverflowMenu = (
           <Button
             secondary
             reversed={reversed}
-            label="Menu"
+            label={menuLabel}
+            aria-label={menuAriaLabel}
             data-automation-id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
             data-testid={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
             icon={<Icon name="keyboard_arrow_down" isPresentational />}
@@ -48,6 +52,7 @@ const renderSecondaryOverflowMenu = (
 
 // New: combined overflow menu (secondary actions converted + overflow menu items)
 const renderCombinedSecondaryOverflowMenu = (
+  combinedMenuLabel: string,
   secondaryActions?: SecondaryActionsProps,
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
@@ -66,7 +71,7 @@ const renderCombinedSecondaryOverflowMenu = (
         align="right"
         button={
           <IconButton
-            label="Open combined secondary + overflow menu"
+            label={combinedMenuLabel}
             reversed={reversed}
             icon={<Icon name="more_horiz" isPresentational />}
             id={`${TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}__combined`}
@@ -92,8 +97,29 @@ export const SecondaryActions = ({
   secondaryOverflowMenuItems,
   reversed = false,
 }: Props): JSX.Element | null => {
+  const { formatMessage } = useIntl()
+
   if (!secondaryActions && !secondaryOverflowMenuItems) return null
 
+  const menuLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuLabel',
+    defaultMessage: 'Menu',
+    description: 'Label for the dropdown menu which displays additional action items',
+  })
+
+  const menuAriaLabel = formatMessage({
+    id: 'kzTitleBlock.overflowMenuAriaLabel',
+    defaultMessage: 'Opens overflow menu',
+    description: 'Aria Label for the dropdown menu which displays additional action items',
+  })
+
+  const combinedMenuLabel = formatMessage({
+    id: 'kzTitleBlock.combinedOverflowMenuLabel',
+    defaultMessage: 'Open combined secondary and overflow menu',
+    description:
+      'Label for the dropdown menu which displays additional action items and secondary actions',
+  })
+
   const secondaryActionsAsToolbarItems = secondaryActions
     ? secondaryActions.map((action, i) => {
         if ('menuItems' in action) {
@@ -148,8 +174,14 @@ export const SecondaryActions = ({
       })
     : []
 
-  const overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed)
+  const overflowMenu = renderSecondaryOverflowMenu(
+    menuAriaLabel,
+    menuLabel,
+    secondaryOverflowMenuItems,
+    reversed,
+  )
   const combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(
+    combinedMenuLabel,
     secondaryActions,
     secondaryOverflowMenuItems,
     reversed,