@kaizen/components 2.3.3 → 2.3.5

package/locales/sr.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Sakrij informacije:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Otvori kombinovani sekundarni i meni sa dodatnim radnjama"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Otvori podrazumevani meni dodatnih radnji"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Otvori meni"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Otvara meni sa dodatnim radnjama"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "Meni"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "Otvori sekundarni i meni sa dodatnim radnjama"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Prikaži predloge za {field}"
@@ -227,9 +251,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" : "Obriši izbor: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Dodatne radnje"
   }
 }

package/locales/sv.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Dölj information:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Öppna kombinerad sekundär- och överflödesmeny"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Öppna överflödesmeny för standardåtgärd"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Öppna meny"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Öppnar överflödesmeny"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "Meny"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "Öppna sekundär meny och överflödesmeny"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Visa förslag för {field}"
@@ -227,9 +251,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" : "Rensa val: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Ytterligare åtgärder"
   }
 }

package/locales/th.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "ซ่อนข้อมูล:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "เปิดเมนูรองและโอเวอร์โฟลว์รวมกัน"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "เปิดเมนูโอเวอร์โฟลว์การดําเนินการเริ่มต้น"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "เปิดเมนู"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "เปิดเมนูโอเวอร์โฟลว์"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "เมนู"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "เปิดเมนูรองและโอเวอร์โฟลว์"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "แสดงคำแนะนำสำหรับ {field}"
@@ -227,9 +251,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" : "ล้างรายการที่เลือก: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "การดำเนินการเพิ่มเติม"
   }
 }

package/locales/tl.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Itago ang impormasyon:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Buksan ang pinagsamang sekundaryong menu at overflow menu"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Buksan ang default na overflow menu ng aksyon"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Buksan ang menu"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Binubuksan ang 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" : "Buksan ang sekundaryong menu at overflow menu"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Ipakita ang mga mungkahi para sa {field}"
@@ -227,9 +251,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" : "I-clear ang napili: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Karagdagang mga aksiyon"
   }
 }

package/locales/tr.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Bilgileri gizleyin:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Birleşik ikincil ve taşma menüsünü açın"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Varsayılan işlem taşma menüsünü açın"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Menüyü aç"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Taşma menüsünü açar"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "Menü"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "İkincil ve taşma menüsünü açın"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "{field} için önerileri göster"
@@ -227,9 +251,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" : "Seçimi temizle: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Ek eylemler"
   }
 }

package/locales/uk.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Приховати інформацію:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Відкрити об'єднане додаткове меню та меню переповнення"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Відкрити меню дій за замовчуванням"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Відкрити меню"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Відкрити меню переповнення"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "Меню"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "Відкрити додаткове меню та меню переповнення"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Показати пропозиції для {field}"
@@ -227,9 +251,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" : "Скасувати виділення: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Додаткові дії"
   }
 }

package/locales/vi.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ẩn thông tin:"
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Mở menu phụ và menu tùy chọn kết hợp"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Mở menu tùy chọn hành động mặc định"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Mở menu"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Mở menu tùy chọn"
+  },
+  "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" : "Mở menu phụ và menu tùy chọn"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "Hiển thị gợi ý cho {field}"
@@ -227,9 +251,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" : "Xóa lựa chọn: {field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Các hành động bổ sung"
   }
 }

package/locales/zh-TW.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "隱藏資訊："
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "開啟複合副選單和溢出選單"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "開啟預設動作溢出選單"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "開啟功能表"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "開啟溢出選單"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "功能表"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "開啟副選單和溢出選單"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "顯示對 {field} 的建議"
@@ -227,9 +251,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" : "清除選擇：{field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "其他行動"
   }
 }

package/locales/zh.json

@@ -220,6 +220,30 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "隐藏信息："
   },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "打开组合式二级菜单和溢出菜单"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "打开默认操作溢出菜单"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "打开菜单"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "打开溢出菜单"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "菜单"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "打开二级菜单和溢出菜单"
+  },
   "singleSelect.chevronButton" : {
     "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
     "message" : "显示{field}的建议"
@@ -227,9 +251,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" : "清除选择：{field}"
-  },
-  "splitButton.dropdownButton.label" : {
-    "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "附加操作"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "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,