@12-apps/ui 6.78.4 → 6.80.0

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -31,6 +31,7 @@ import type {
   DashboardMoreFiltersProps,
   DashboardProps,
 } from './Dashboard.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sxRem } from '../../../tokens/relative';
 
 /**
@@ -160,6 +161,7 @@ Dashboard.displayName = 'Dashboard';
 const DashboardBreadcrumb = ({
   items,
   renderLink,
+  ariaLabel = EN_US_UI_LABELS.dashboard.breadcrumb,
   className,
 }: DashboardBreadcrumbProps): React.JSX.Element => {
   const { testIdPrefix } = useDashboardContext();
@@ -167,7 +169,7 @@ const DashboardBreadcrumb = ({
     <MuiBreadcrumbs
       separator={<NavigateNextIcon fontSize="small" />}
       className={className}
-      aria-label="breadcrumb"
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-breadcrumb`}
       sx={{ fontSize: sxRem(14), color: 'text.secondary' }}
     >
@@ -259,7 +261,10 @@ const DashboardFilters = ({ children, className }: DashboardFiltersProps): React
 DashboardFilters.displayName = 'Dashboard.Filters';
 (DashboardFilters as SlottedComponent).dashboardSlot = 'filters';
 
-const DashboardMoreFilters = ({ children, label = 'More filters' }: DashboardMoreFiltersProps): React.JSX.Element => {
+const DashboardMoreFilters = ({
+  children,
+  label = EN_US_UI_LABELS.dashboard.moreFilters,
+}: DashboardMoreFiltersProps): React.JSX.Element => {
   const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();
   return (
     <Box>

package/src/components/layout/Dashboard/Dashboard.types.ts

@@ -33,6 +33,11 @@ export interface DashboardBreadcrumbProps {
   items: DashboardBreadcrumbItem[];
   /** Render function for links, e.g. a Next.js `<Link>`. Defaults to `<a>`. */
   renderLink?: (item: DashboardBreadcrumbItem, children: ReactNode) => ReactNode;
+  /**
+   * The trail's landmark name. @default "breadcrumb" — a host passes
+   * `UI_LABELS[locale].dashboard.breadcrumb`.
+   */
+  ariaLabel?: string;
   className?: string;
 }
 

package/src/components/layout/Drawer/Drawer.tsx

@@ -8,6 +8,7 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { shadowInk } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -166,7 +167,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         <IconButton
           onClick={onClose}
           edge="end"
-          aria-label={closeLabel ?? 'Close drawer'}
+          aria-label={closeLabel ?? EN_US_UI_LABELS.drawer.close}
           data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}
         >
           <Close />

package/src/components/layout/SettingsLayout/SettingsLayout.md

@@ -206,6 +206,7 @@ does not ask.
 | atIndex           | boolean                                                | `false`             | `drilldown`: the router is at the area's index, not in a section    |
 | indexHref         | string                                                 | -                   | `drilldown`: where the back link goes                              |
 | backLabel         | string                                                 | `'Back'`            | Label on the back control                                          |
+| navigationLabel   | string                                                 | `'Settings'`        | The navigation's accessible name while `title` is not plain text   |
 | sectionChips      | SettingsNavItem[]                                      | -                   | Sections carried by the narrow-width chip strip                    |
 
 ### SettingsNavGroup

package/src/components/layout/SettingsLayout/SettingsLayout.rail.tsx

@@ -23,6 +23,8 @@ import type {
 
 interface RailToggleProps {
   title?: React.ReactNode;
+  /** The navigation's accessible name, resolved by the layout from `title`. */
+  ariaLabel: string;
   activeLabel?: string;
   open: boolean;
   onToggle: () => void;
@@ -37,6 +39,7 @@ interface RailToggleProps {
  */
 function SettingsRailToggle({
   title,
+  ariaLabel,
   activeLabel,
   open,
   onToggle,
@@ -49,7 +52,7 @@ function SettingsRailToggle({
       type="button"
       onClick={onToggle}
       aria-expanded={open}
-      aria-label={typeof title === 'string' ? title : 'Settings'}
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-toggle`}
       sx={(theme) => ({
         ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),
@@ -238,6 +241,8 @@ function SettingsRailBody({
 /** Props for {@link SettingsRail}: the rail body's inputs plus the mobile chrome. */
 export type SettingsRailProps = RailBodyProps & {
   title?: React.ReactNode;
+  /** The navigation's accessible name, resolved by the layout from `title`. */
+  ariaLabel: string;
   activeLabel?: string;
   onToggleNav: () => void;
   /** Scroll inside the rail rather than with the page. See `fillHeight`. */
@@ -268,6 +273,7 @@ function railColumnSx(theme: Theme, railVariant: SettingsRailVariant): Record<st
 /** The navigation column: title, the `switcher`'s disclosure, and the body. */
 export function SettingsRail({
   title,
+  ariaLabel,
   activeLabel,
   navOpen,
   onToggleNav,
@@ -287,7 +293,7 @@ export function SettingsRail({
   return (
     <Box
       component="nav"
-      aria-label={typeof title === 'string' ? title : 'Settings'}
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-rail`}
       data-rail-variant={railVariant}
       sx={(theme) => ({
@@ -326,6 +332,7 @@ export function SettingsRail({
       {variant === 'switcher' ? (
         <SettingsRailToggle
           title={title}
+          ariaLabel={ariaLabel}
           activeLabel={activeLabel}
           open={navOpen}
           onToggle={onToggleNav}

package/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import React, { useMemo, useState } from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { withDefaults } from '../../../utils/withDefaults';
 import { activeItemLabel, filterGroups } from './SettingsLayout.filters';
 import { SettingsRail } from './SettingsLayout.rail';
@@ -32,18 +33,20 @@ type ResolvedProps = SettingsLayoutProps &
       | 'navVariant'
       | 'atIndex'
       | 'backLabel'
+      | 'navigationLabel'
     >
   >;
 
 const DEFAULTS = {
-  searchPlaceholder: 'Search settings',
+  searchPlaceholder: EN_US_UI_LABELS.settingsLayout.searchPlaceholder,
   defaultQuery: '',
-  emptySearchLabel: 'No settings match your search.',
+  emptySearchLabel: EN_US_UI_LABELS.settingsLayout.emptySearch,
   testIdPrefix: 'settings',
   railBreakpoint: 'md',
   navVariant: 'switcher',
   atIndex: false,
-  backLabel: 'Back',
+  backLabel: EN_US_UI_LABELS.settingsLayout.back,
+  navigationLabel: EN_US_UI_LABELS.settingsLayout.navigation,
 } satisfies Partial<SettingsLayoutProps>;
 
 /**
@@ -57,6 +60,14 @@ function railLookOf({
   return { searchable, railVariant };
 }
 
+/**
+ * The navigation's accessible name: a plain-string `title`, else the host's
+ * `navigationLabel`, else "Settings".
+ */
+function navigationNameOf({ title, navigationLabel = DEFAULTS.navigationLabel }: SettingsLayoutProps): string {
+  return typeof title === 'string' ? title : navigationLabel;
+}
+
 /** Stacked below the rail's breakpoint, two columns at and above it. */
 function shellSx(
   breakpoint: SettingsLayoutProps['railBreakpoint'],
@@ -136,7 +147,6 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
   const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
 
   const drilldown = navVariant === 'drilldown';
-  const ariaLabel = typeof title === 'string' ? title : 'Settings';
 
   return (
     <Box
@@ -147,6 +157,7 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
     >
       <SettingsRail
         title={title}
+        ariaLabel={navigationNameOf(props)}
         activeLabel={activeLabel}
         navOpen={navOpen}
         onToggleNav={() => setNavOpen((open) => !open)}
@@ -176,7 +187,7 @@ export const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {
         sectionTitle={props.sectionTitle}
         sectionDescription={props.sectionDescription}
         backLabel={backLabel}
-        ariaLabel={ariaLabel}
+        ariaLabel={navigationNameOf(props)}
         sectionChips={sectionChips}
         activeItemId={activeItemId}
         linkComponent={linkComponent}

package/src/components/layout/SettingsLayout/SettingsLayout.types.ts

@@ -200,6 +200,12 @@ export interface SettingsLayoutProps {
   indexHref?: string;
   /** Label on the back control. Defaults to `"Back"`. */
   backLabel?: string;
+  /**
+   * The navigation's accessible name while `title` is not plain text (a node,
+   * or nothing). Defaults to `"Settings"`; a plain-string `title` names it
+   * instead, whatever this says.
+   */
+  navigationLabel?: string;
   /**
    * The open section's own name.
    *

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React, { useRef, useState } from 'react';
 
 import { TableFilterContext, useTableFilterContext } from './TableFilterContext';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import type {
   TableFilterCheckboxFieldProps,
   TableFilterKeywordProps,
@@ -96,7 +97,7 @@ TableFilterMain.displayName = 'TableFilter.Main';
 const TableFilterPanel = ({
   children,
   onClearAll,
-  ariaLabel = 'Filters',
+  ariaLabel = EN_US_UI_LABELS.tableFilter.filters,
   clearTestId,
 }: TableFilterPanelProps): React.JSX.Element => {
   const { open, copy } = useTableFilterContext();
@@ -158,8 +159,8 @@ TableFilterPanel.displayName = 'TableFilter.Panel';
 const TableFilterKeyword = ({
   value,
   onChange,
-  placeholder = 'Press Enter to filter',
-  label = 'Filter by keyword',
+  placeholder = EN_US_UI_LABELS.tableFilter.keywordPlaceholder,
+  label = EN_US_UI_LABELS.tableFilter.keywordLabel,
   testId,
 }: TableFilterKeywordProps): React.JSX.Element => {
   const { copy } = useTableFilterContext();

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -9,6 +9,7 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { rem, sxRem } from '../../../tokens/relative';
+import { PT_BR_UI_LABELS } from '../../../pt-BR.labels';
 import { accentFor, type SizeValue } from '../../../tokens/scales';
 
 import { AppHeaderBrand } from './AppHeader.brand';
@@ -215,7 +216,7 @@ const IdentityText: React.FC<
           onClick={onDisclose}
           aria-haspopup="dialog"
           aria-expanded={disclosed}
-          aria-label={discloseLabel ?? `Detalhes de ${title}`}
+          aria-label={discloseLabel ?? PT_BR_UI_LABELS.appHeader.disclose(title)}
           sx={discloseSx}
         >
           {name}

package/src/components/navigation/AppHeader/AppHeader.types.ts

@@ -87,7 +87,11 @@ export interface AppHeaderIdentityProps
   onDisclose?: () => void;
   /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
   disclosed?: boolean;
-  /** Accessible name of the disclosure. @default `Detalhes de {title}` */
+  /**
+   * Accessible name of the disclosure. @default `Detalhes de {title}`, as it
+   * always read (`UI_LABELS['pt-BR'].appHeader.disclose`); a host in another
+   * locale passes its own pack's `appHeader.disclose(title)`.
+   */
   discloseLabel?: string;
   /**
    * The identity is still being resolved — hold a skeleton the size of the real

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -11,6 +11,7 @@ import {
   breadcrumbsBarStyles,
   sizeIconMap } from './Breadcrumbs.styles';
 import { BreadcrumbEntry } from './BreadcrumbEntry';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import type { BreadcrumbItem,BreadcrumbsProps } from './Breadcrumbs.types';
 import { sxRem } from '../../../tokens/relative';
 
@@ -174,7 +175,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
         color={color}
         visualStyle={variant}
         elevation={elevation}
-        aria-label={ariaLabel || 'breadcrumb navigation'}
+        aria-label={ariaLabel || EN_US_UI_LABELS.breadcrumbs.navigation}
         role="navigation"
         data-testid={dataTestId || 'breadcrumbs'}
         {...props}

package/src/components/navigation/CommandPalette/CommandPalette.helpers.ts

@@ -1,3 +1,4 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
 import type Fuse from 'fuse.js';
 import type React from 'react';
 
@@ -33,11 +34,14 @@ export const filterCommands = ({
   return [...recent, ...commands.filter((command) => !recentCommandIds.includes(command.id))];
 };
 
-export const groupByCategory = (commands: PaletteCommand[]): Record<string, PaletteCommand[]> => {
+export const groupByCategory = (
+  commands: PaletteCommand[],
+  generalLabel: string = EN_US_COMMAND_PALETTE_COPY.general,
+): Record<string, PaletteCommand[]> => {
   const groups: Record<string, PaletteCommand[]> = {};
 
   for (const command of commands) {
-    const category = command.category || 'General';
+    const category = command.category || generalLabel;
     groups[category] = groups[category] ?? [];
     groups[category].push(command);
   }

package/src/components/navigation/CommandPalette/CommandPalette.hooks.ts

@@ -17,11 +17,13 @@ const useCommandSearch = ({
   searchQuery,
   showRecent,
   recentCommandIds,
+  generalLabel,
 }: {
   commands: PaletteCommand[];
   searchQuery: string;
   showRecent?: boolean;
   recentCommandIds: string[];
+  generalLabel?: string;
 }) => {
   const fuse = useMemo(
     () =>
@@ -38,7 +40,10 @@ const useCommandSearch = ({
     [searchQuery, commands, fuse, showRecent, recentCommandIds],
   );
 
-  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  const groupedCommands = useMemo(
+    () => groupByCategory(filteredCommands, generalLabel),
+    [filteredCommands, generalLabel],
+  );
 
   return { filteredCommands, groupedCommands };
 };
@@ -152,8 +157,10 @@ export const useCommandPalette = ({
   recentCommands,
   onCommandExecute,
   onClose,
+  generalLabel,
 }: {
   open: boolean;
+  generalLabel?: string;
   commands: PaletteCommand[];
   showRecent?: boolean;
   recentCommands: string[];
@@ -171,6 +178,7 @@ export const useCommandPalette = ({
     searchQuery,
     showRecent,
     recentCommandIds,
+    generalLabel,
   });
 
   const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -1,3 +1,5 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import CloseIcon from '@mui/icons-material/Close';
 import EnterIcon from '@mui/icons-material/KeyboardReturn';
 import SearchIcon from '@mui/icons-material/Search';
@@ -38,7 +40,9 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 
 const PaletteContainer = styled(Paper)(({ theme }) => ({
   width: '100%',
-  maxWidth: rem(theme, 640),
+  // 640 is the desktop width (FUT-3347); below it the palette takes the dialog's
+  // own width, which already keeps MUI's 32px gutters, so a phone sees it whole.
+  maxWidth: `min(${rem(theme, 640)}, 100%)`,
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: `blur(${rem(theme, 20)})`,
   WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
@@ -103,18 +107,22 @@ const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }
   copy,
 }) => {
   const theme = useTheme();
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
 
   return (
     <Box
       sx={{
         display: 'flex',
+        // Wraps the count under the hints on a phone; one row on desktop.
+        flexWrap: 'wrap',
+        gap: 1,
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: 1,
         borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
         background: alpha(theme.palette.background.default, 0.4) }}
     >
-      <Box sx={{ display: 'flex', gap: 1 }}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
         <ShortcutChip
           icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}
           label={copy.execute}
@@ -124,7 +132,7 @@ const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }
         <ShortcutChip label={copy.close} size="small" />
       </Box>
       <Typography variant="caption" color="text.secondary">
-        {commandCount} commands
+        {text.commandCount(commandCount)}
       </Typography>
     </Box>
   );
@@ -135,13 +143,14 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
   open,
   onClose,
   commands,
-  placeholder = 'Type a command or search...',
+  placeholder,
   width,
   maxHeight,
   showRecent = true,
   recentCommands = [],
   onCommandExecute,
   dataTestId = 'command-palette' }) => {
+  const text = resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy);
   const {
     searchQuery,
     setSearchQuery,
@@ -158,7 +167,8 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
     showRecent,
     recentCommands,
     onCommandExecute,
-    onClose });
+    onClose,
+    generalLabel: text.general });
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
@@ -177,7 +187,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
         <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>
           <PaletteSearch
             inputRef={searchInputRef}
-            placeholder={placeholder}
+            placeholder={placeholder ?? text.placeholder}
             value={searchQuery}
             dataTestId={dataTestId}
             onChange={handleSearchChange}

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -1,3 +1,5 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import RecentIcon from '@mui/icons-material/History';
 import Box from '@mui/material/Box/index.js';
 import Divider from '@mui/material/Divider/index.js';
@@ -128,7 +130,7 @@ export const PaletteResults: React.FC<{
     return (
       <NoResults data-testid={`${dataTestId}-no-results`}>
         <Typography variant="body2" color="text.secondary">
-          No commands found for "{searchQuery}"
+          {resolveLabels(EN_US_COMMAND_PALETTE_COPY, copy).noCommandsFound(searchQuery)}
         </Typography>
         <Typography variant="caption" color="text.disabled" sx={{ mt: 1 }}>
           {copy.tryAnotherTerm}

package/src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx

@@ -213,10 +213,13 @@ export const MenuList: React.FC<PropsWithChildren<{ variant?: string; size?: str
   ...props
 }) => <StyledList {...props}>{children}</StyledList>;
 
-export const CollapseToggle: React.FC<PropsWithChildren<{ onClick: () => void }>> = ({
-  children,
-  onClick,
-}) => <CollapseButton onClick={onClick}>{children}</CollapseButton>;
+export const CollapseToggle: React.FC<
+  PropsWithChildren<{ onClick: () => void; ariaLabel?: string }>
+> = ({ children, onClick, ariaLabel }) => (
+  <CollapseButton onClick={onClick} aria-label={ariaLabel}>
+    {children}
+  </CollapseButton>
+);
 
 export const MegaSection: React.FC<{ children: ReactNode }> = ({ children }) => (
   <MegaMenuSection>{children}</MegaMenuSection>

package/src/components/navigation/NavigationMenu/NavigationMenu.tsx

@@ -121,6 +121,8 @@ export const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuPro
       collapsible,
       collapsed: controlledCollapsed,
       onCollapseChange,
+      collapseLabel,
+      expandLabel,
       logo,
       endContent,
       maxWidth,
@@ -179,6 +181,8 @@ export const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuPro
           items={items}
           logo={logo}
           endContent={endContent}
+          collapseLabel={collapseLabel}
+          expandLabel={expandLabel}
           onCollapseToggle={handleCollapseToggle}
         />
       </NavigationShell>

package/src/components/navigation/NavigationMenu/NavigationMenu.types.ts

@@ -107,6 +107,19 @@ export interface NavigationMenuProps {
    * Callback when collapse state changes
    */
   onCollapseChange?: (collapsed: boolean) => void;
+
+  /**
+   * The collapse control's text (vertical, `collapsible` only).
+   * @default "Collapse" — a host passes `UI_LABELS[locale].navigationMenu.collapse`.
+   */
+  collapseLabel?: string;
+
+  /**
+   * The collapse control's accessible name while the menu is collapsed, when it
+   * shows only its icon (vertical, `collapsible` only).
+   * @default "Expand" — a host passes `UI_LABELS[locale].navigationMenu.expand`.
+   */
+  expandLabel?: string;
   
   /**
    * Custom logo/brand element

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -225,6 +225,8 @@ const MenuItemContent: React.FC<{
         collapsed={collapsed}
         minimal={minimal}
         disabled={item.disabled}
+        // Collapsed, the row is its icon alone; the item's own label names it.
+        aria-label={collapsed ? item.label : undefined}
         onClick={onClick}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

package/src/components/navigation/NavigationMenu/NavigationStandardBody.tsx

@@ -13,6 +13,7 @@ import { CollapseToggle, LogoBar, MenuList } from './NavigationMenu.shell';
 import { slideIn } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { renderMenuItem } from './NavigationMenuItem';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sxRem } from '../../../tokens/relative';
 
 const DividerRule: FC = () => (
@@ -38,15 +39,23 @@ const VerticalLogo: FC<{ logo: ReactNode; collapsed: boolean }> = ({ logo, colla
   </LogoBar>
 );
 
-const CollapseControl: FC<{ collapsed: boolean; onToggle: () => void }> = ({
+const CollapseControl: FC<{
+  collapsed: boolean;
+  label?: string;
+  expandLabel?: string;
+  onToggle: () => void;
+}> = ({
   collapsed,
+  label = EN_US_UI_LABELS.navigationMenu.collapse,
+  expandLabel = EN_US_UI_LABELS.navigationMenu.expand,
   onToggle,
 }) => (
-  <CollapseToggle onClick={onToggle}>
+  // Collapsed, the control is its icon alone, so the name has to be given.
+  <CollapseToggle onClick={onToggle} ariaLabel={collapsed ? expandLabel : undefined}>
     <ListItemIcon sx={{ minWidth: collapsed ? 0 : sxRem(40), justifyContent: 'center' }}>
       <MenuIcon />
     </ListItemIcon>
-    {!collapsed && <ListItemText primary="Collapse" />}
+    {!collapsed && <ListItemText primary={label} />}
   </CollapseToggle>
 );
 
@@ -103,6 +112,10 @@ export interface NavigationStandardBodyProps {
   items: NavigationMenuItem[];
   logo?: ReactNode;
   endContent?: ReactNode;
+  /** The collapse control's text; English when the host names none. */
+  collapseLabel?: string;
+  /** Its accessible name while collapsed; English when the host names none. */
+  expandLabel?: string;
   onCollapseToggle: () => void;
 }
 
@@ -118,6 +131,8 @@ export const NavigationStandardBody: FC<NavigationStandardBodyProps> = ({
   items,
   logo,
   endContent,
+  collapseLabel,
+  expandLabel,
   onCollapseToggle,
 }) => {
   const isVertical = variant === 'vertical';
@@ -137,7 +152,12 @@ export const NavigationStandardBody: FC<NavigationStandardBodyProps> = ({
       {logo && isVertical && <VerticalLogo logo={logo} collapsed={collapsed} />}
 
       {collapsible && isVertical && (
-        <CollapseControl collapsed={collapsed} onToggle={onCollapseToggle} />
+        <CollapseControl
+          collapsed={collapsed}
+          label={collapseLabel}
+          expandLabel={expandLabel}
+          onToggle={onCollapseToggle}
+        />
       )}
 
       <MenuItems