@12-apps/ui 6.7.0 → 6.9.0

package/src/components/form/Textarea/Textarea.types.ts

@@ -1,8 +1,21 @@
+import type { RichEditorToolbarCopy } from '../../../copy';
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { TextareaAutosizeProps } from '@mui/material';
 import type React from 'react';
 
-export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | 'color' | 'size'> {
+/**
+ * The rich variant mounts a formatting toolbar of ten glyph buttons; the other
+ * three variants mount no toolbar at all. So only that variant owes the words
+ * — a plain textarea is not asked for tooltips it has nowhere to put.
+ */
+type TextareaRichCopy =
+  | { variant?: 'default' | 'autosize' | 'resizable'; richEditorCopy?: never }
+  | { variant: 'rich'; richEditorCopy: RichEditorToolbarCopy };
+
+export type TextareaProps = TextareaBaseProps & TextareaRichCopy;
+
+export interface TextareaBaseProps
+  extends Omit<TextareaAutosizeProps, 'variant' | 'color' | 'size'> {
   /**
    * The variant of the textarea
    */

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -14,6 +14,7 @@ import { styled } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
+import type { RichEditorToolbarCopy } from '../../../copy';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
@@ -206,11 +207,12 @@ const useRichEditorState = ({
 };
 
 const InlineFormatButtons: React.FC<{
+  copy: RichEditorToolbarCopy;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ activeFormats, onCommand }) => (
+}> = ({ copy, activeFormats, onCommand }) => (
   <>
-    <Tooltip title="Bold" arrow>
+    <Tooltip title={copy.bold} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.bold}
@@ -220,7 +222,7 @@ const InlineFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Italic" arrow>
+    <Tooltip title={copy.italic} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.italic}
@@ -230,7 +232,7 @@ const InlineFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Underline" arrow>
+    <Tooltip title={copy.underline} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.underline}
@@ -244,13 +246,14 @@ const InlineFormatButtons: React.FC<{
 );
 
 const BlockFormatButtons: React.FC<{
+  copy: RichEditorToolbarCopy;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ activeFormats, onCommand }) => (
+}> = ({ copy, activeFormats, onCommand }) => (
   <>
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Bullet List" arrow>
+    <Tooltip title={copy.bulletList} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.list}
@@ -260,7 +263,7 @@ const BlockFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Numbered List" arrow>
+    <Tooltip title={copy.numberedList} arrow>
       <ToolbarButton
         size="small"
         active={activeFormats.orderedList}
@@ -272,13 +275,13 @@ const BlockFormatButtons: React.FC<{
 
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Quote" arrow>
+    <Tooltip title={copy.quote} arrow>
       <ToolbarButton size="small" onClick={() => onCommand('formatBlock', 'blockquote')}>
         <FormatQuote fontSize="small" />
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Code" arrow>
+    <Tooltip title={copy.code} arrow>
       <ToolbarButton size="small" onClick={() => onCommand('formatBlock', 'pre')}>
         <Code fontSize="small" />
       </ToolbarButton>
@@ -286,11 +289,11 @@ const BlockFormatButtons: React.FC<{
 
     <Divider orientation="vertical" flexItem />
 
-    <Tooltip title="Insert Link" arrow>
+    <Tooltip title={copy.insertLink} arrow>
       <ToolbarButton
         size="small"
         onClick={() => {
-          const url = window.prompt('Enter URL:');
+          const url = window.prompt(copy.linkPrompt);
           if (url) onCommand('createLink', url);
         }}
       >
@@ -298,13 +301,13 @@ const BlockFormatButtons: React.FC<{
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Text Color" arrow>
+    <Tooltip title={copy.textColor} arrow>
       <ToolbarButton size="small">
         <FormatColorText fontSize="small" />
       </ToolbarButton>
     </Tooltip>
 
-    <Tooltip title="Background Color" arrow>
+    <Tooltip title={copy.backgroundColor} arrow>
       <ToolbarButton size="small">
         <FormatColorFill fontSize="small" />
       </ToolbarButton>
@@ -315,17 +318,24 @@ const BlockFormatButtons: React.FC<{
 // The formatting buttons. Split out so the editor body is state, handlers and
 // the editable region.
 const EditorToolbar: React.FC<{
+  copy: RichEditorToolbarCopy;
   glass?: boolean;
   activeFormats: Record<string, boolean>;
   onCommand: (command: string, value?: string) => void;
-}> = ({ glass, activeFormats, onCommand }) => (
+}> = ({ copy, glass, activeFormats, onCommand }) => (
   <RichToolbar glass={glass}>
-    <InlineFormatButtons activeFormats={activeFormats} onCommand={onCommand} />
-    <BlockFormatButtons activeFormats={activeFormats} onCommand={onCommand} />
+    <InlineFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />
+    <BlockFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />
   </RichToolbar>
 );
 
 export const TextareaRichEditor: React.FC<{
+  /**
+   * The ten toolbar buttons' tooltips — which are also their accessible names,
+   * since every one of them is a glyph — plus the link prompt. REQUIRED: this
+   * package ships no default copy.
+   */
+  copy: RichEditorToolbarCopy;
   value?: string;
   onChange?: (html: string) => void;
   placeholder?: string;
@@ -333,7 +343,7 @@ export const TextareaRichEditor: React.FC<{
   glass?: boolean;
   color?: string;
   characterLimit?: number;
-}> = ({ value, onChange, placeholder, error, glass, color, characterLimit }) => {
+}> = ({ copy, value, onChange, placeholder, error, glass, color, characterLimit }) => {
   const {
     focused,
     setFocused,
@@ -346,7 +356,7 @@ export const TextareaRichEditor: React.FC<{
 
   return (
     <Box sx={{ position: 'relative' }}>
-      <EditorToolbar glass={glass} activeFormats={activeFormats} onCommand={handleFormat} />
+      <EditorToolbar copy={copy} glass={glass} activeFormats={activeFormats} onCommand={handleFormat} />
 
       <ContentEditableDiv
         ref={contentRef}

package/src/components/form/UploadButton/UploadButton.parts.tsx

@@ -4,10 +4,12 @@ import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material
 import type React from 'react';
 
 import type { DragHandlers } from './UploadButton.hooks';
+import type { UploadButtonCopy } from '../../../copy';
 import type { UploadButtonProps } from './UploadButton.types';
 
 /** Shared shape for the two trigger variants. */
 export interface TriggerProps {
+  copy: UploadButtonCopy;
   label: string;
   icon?: React.ReactNode;
   disabled: boolean;
@@ -19,6 +21,7 @@ export interface TriggerProps {
 
 /** The drag-and-drop surface. */
 export function UploadDropzone({
+  copy,
   label,
   icon,
   disabled,
@@ -61,7 +64,7 @@ export function UploadDropzone({
         onOpen();
       }}
       aria-describedby={describedBy}
-      aria-label={`Upload file dropzone. ${label}`}
+      aria-label={copy.dropzoneRole(label)}
     >
       <Box sx={{ mb: 2 }}>
         {icon || <CloudUploadOutlined sx={{ fontSize: 48, color: 'text.secondary' }} />}
@@ -70,7 +73,7 @@ export function UploadDropzone({
         {label}
       </Typography>
       <Typography variant="body2" color="text.secondary">
-        Drop your file here or click to browse
+        {copy.dropzoneHint}
       </Typography>
     </Box>
   );
@@ -81,6 +84,7 @@ const MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;
 
 /** The plain-button trigger. */
 export function UploadTrigger({
+  copy,
   label,
   icon,
   disabled,
@@ -110,18 +114,20 @@ export function UploadTrigger({
         }),
       }}
     >
-      {isUploading ? 'Uploading...' : label}
+      {isUploading ? copy.uploading : label}
     </Button>
   );
 }
 
 /** The screen-reader live region — drag, progress and error announcements. */
 function UploadAnnouncer({
+  copy,
   announceDragOver,
   isUploading,
   progress,
   error,
 }: {
+  copy: UploadButtonCopy;
   announceDragOver: boolean;
   isUploading: boolean;
   progress: number;
@@ -140,15 +146,16 @@ function UploadAnnouncer({
         overflow: 'hidden',
       }}
     >
-      {announceDragOver && 'File ready to drop'}
-      {isUploading && `Upload in progress: ${Math.round(progress)}%`}
-      {error && `Error: ${error}`}
+      {announceDragOver && copy.dropReady}
+      {isUploading && copy.uploadInProgress(Math.round(progress))}
+      {error && copy.errorAnnouncement(error)}
     </div>
   );
 }
 
 /** Progress bar, helper text, error text and the live region. */
 export function UploadFeedback({
+  copy,
   isUploading,
   progress,
   helperText,
@@ -157,6 +164,7 @@ export function UploadFeedback({
   errorId,
   announceDragOver,
 }: {
+  copy: UploadButtonCopy;
   isUploading: boolean;
   progress: number;
   helperText?: string;
@@ -171,7 +179,7 @@ export function UploadFeedback({
         <Box sx={{ mt: 1 }}>
           <LinearProgress variant="determinate" value={progress} sx={{ borderRadius: 1 }} />
           <Typography variant="caption" sx={{ mt: 0.5, display: 'block' }}>
-            {Math.round(progress)}% uploaded
+            {copy.percentUploaded(Math.round(progress))}
           </Typography>
         </Box>
       )}
@@ -200,6 +208,7 @@ export function UploadFeedback({
       )}
 
       <UploadAnnouncer
+        copy={copy}
         announceDragOver={announceDragOver}
         isUploading={isUploading}
         progress={progress}

package/src/components/form/UploadButton/UploadButton.tsx

@@ -19,8 +19,9 @@ import type { UploadButtonProps, UploadButtonState } from './UploadButton.types'
  */
 const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((props, ref) => {
   const {
+    copy,
     variant = 'default',
-    label = 'Upload File',
+    label = props.copy.buttonLabel,
     disabled = false,
     multiple = false,
     accept,
@@ -34,6 +35,7 @@ const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((prop
     useUploadButton(props);
 
   const trigger: TriggerProps = {
+    copy,
     label,
     icon,
     disabled,
@@ -65,6 +67,7 @@ const UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((prop
       )}
 
       <UploadFeedback
+        copy={copy}
         isUploading={derived.isUploading}
         progress={derived.progress}
         helperText={helperText}

package/src/components/form/UploadButton/UploadButton.types.ts

@@ -1,6 +1,14 @@
 import type { ReactNode } from 'react';
 
+import type { UploadButtonCopy } from '../../../copy';
+
 export interface UploadButtonProps {
+  /**
+   * What this control says beyond the host's own button label. REQUIRED: three
+   * of the four are announcements only a screen reader ever receives, which is
+   * how they stayed English through every language pass.
+   */
+  copy: UploadButtonCopy;
   /** Button variant style */
   variant?: 'default' | 'outline' | 'ghost' | 'dropzone';
 

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -28,6 +28,8 @@ type SelectionClusterProps = Pick<
   | 'clearAllTestId'
   | 'edgeAlign'
   | 'selectAllLabel'
+  | 'selectAllText'
+  | 'clearAllText'
 >;
 
 /** The left cluster: Select All + (when selecting) Clear All / count / actions. */
@@ -41,6 +43,8 @@ function SelectionCluster({
   clearAllTestId,
   edgeAlign = false,
   selectAllLabel,
+  selectAllText,
+  clearAllText,
 }: SelectionClusterProps): React.JSX.Element {
   const actionsSlot = actions !== undefined && (
     <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>
@@ -68,7 +72,7 @@ function SelectionCluster({
         data-testid={selectAllTestId}
         sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}
       >
-        Select All
+        {selectAllText}
       </Button>
       <Checkbox
         size="small"
@@ -88,7 +92,7 @@ function SelectionCluster({
             data-testid={clearAllTestId}
             sx={selectionButtonSx}
           >
-            Clear All
+            {clearAllText}
           </Button>
           <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
           <Typography
@@ -216,6 +220,8 @@ export function ContentToolbar({
   edgeAlign = false,
   exclusiveSelection = false,
   selectAllLabel,
+  selectAllText,
+  clearAllText,
 }: ContentToolbarProps): React.JSX.Element {
   // Under `exclusiveSelection` the two states are alternatives, not neighbours:
   // browsing shows the controls and no checkbox, selecting shows the checkbox
@@ -241,6 +247,8 @@ export function ContentToolbar({
     >
       {showSelection && (
         <SelectionCluster
+          selectAllText={selectAllText}
+          clearAllText={clearAllText}
           hasSelection={hasSelection}
           selectedCount={selectedCount}
           selectAll={selectAll}

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

@@ -4,6 +4,9 @@ import type { ReactNode } from 'react';
 
 /** Props for {@link ContentToolbar} — the shared content-page toolbar. */
 export interface ContentToolbarProps {
+  /** The two bulk-selection buttons, spelled out where the bar has room. */
+  selectAllText: string;
+  clearAllText: string;
   /**
    * The select-all checkbox's accessible name. It carries no visible label of
    * its own, so this is the only thing a screen reader gets for it. REQUIRED:
@@ -61,6 +64,8 @@ export type ViewMode = 'grid' | 'list';
 
 /** Props for {@link ViewSelector}. */
 export interface ViewSelectorProps {
+  /** The card-size control's accessible name — it renders icons only. */
+  cardSizeLabel: string;
   /** Current view mode. */
   viewMode: ViewMode;
   /** Called when the view mode changes. */
@@ -99,6 +104,10 @@ export interface SortFieldDefinition<TField extends string = string> {
 
 /** Props for {@link SortByDropdown}. */
 export interface SortByDropdownProps<TField extends string = string> {
+  /** The menu's two section headings, and the trigger's own prefix. */
+  orderHeading: string;
+  sortHeading: string;
+  triggerPrefix: string;
   fields: SortFieldDefinition<TField>[];
   activeField: TField;
   activeOrder?: string;
@@ -126,6 +135,9 @@ export interface MultiSelectExtraOption {
 
 /** Props for {@link MultiSelectDropdown}. */
 export interface MultiSelectDropdownProps<TValue extends string = string> {
+  /** The extra-options section heading, and the clear-selection action. */
+  extraOptionsHeading: string;
+  clearText: string;
   /** Label before the trigger (e.g. "Content Type"). */
   label: string;
   options: MultiSelectOption<TValue>[];

package/src/components/layout/ContentToolbar/MultiSelectDropdown.tsx

@@ -62,6 +62,8 @@ export function MultiSelectDropdown<TValue extends string = string>({
   onClear,
   allLabel = 'All',
   clearLabel,
+  clearText,
+  extraOptionsHeading,
   extraOptions,
   searchable,
   searchPlaceholder = 'Search…',
@@ -111,7 +113,7 @@ export function MultiSelectDropdown<TValue extends string = string>({
     <>
       {renderTrigger()}
       <MultiSelectMenu
-        anchorEl={anchorEl}
+        extraOptionsHeading={extraOptionsHeading} clearText={clearText} anchorEl={anchorEl}
         open={open}
         close={close}
         options={options}
@@ -184,6 +186,8 @@ interface MultiSelectMenuProps<TValue extends string> {
   onQueryChange: (value: string) => void;
   searchPlaceholder: string;
   noResultsLabel: string;
+  extraOptionsHeading: string;
+  clearText: string;
   /** Match the menu width to the trigger and left-align it (stacked select). */
   matchAnchorWidth?: boolean;
   testId?: string;
@@ -211,6 +215,8 @@ function MultiSelectMenu<TValue extends string>({
   selected,
   onToggle,
   extraOptions,
+  extraOptionsHeading,
+  clearText,
   clearDisabled,
   onClear,
   showSearch,
@@ -267,25 +273,30 @@ function MultiSelectMenu<TValue extends string>({
         ? [
             <Divider key="extra-divider" />,
             <ListSubheader key="extra-label" sx={{ px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600 }}>
-              Options
+              {extraOptionsHeading}
             </ListSubheader>,
             ...extraOptions.map((extra) => (
               <CheckboxRow key={extra.id} label={extra.label} checked={extra.checked} onToggle={(next) => extra.onCheckedChange(next)} />
             )),
           ]
         : null}
-      <MenuClearFooter clearDisabled={clearDisabled} onClear={onClear} close={close} testId={testId} />
+      <MenuClearFooter
+        clearText={clearText} clearDisabled={clearDisabled} onClear={onClear}
+        close={close} testId={testId}
+      />
     </Menu>
   );
 }
 
 /** The bottom "Clear" footer that resets the selection and closes the menu. */
 function MenuClearFooter({
+  clearText,
   clearDisabled,
   onClear,
   close,
   testId,
 }: {
+  clearText: string;
   clearDisabled: boolean;
   onClear: () => void;
   close: () => void;
@@ -320,7 +331,7 @@ function MenuClearFooter({
         }}
         sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: '0.75rem', fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}
       >
-        Clear
+        {clearText}
       </Button>
     </Box>
   );

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -103,6 +103,8 @@ interface SortMenuProps<TField extends string> {
   fields: SortFieldDefinition<TField>[];
   activeField: TField;
   onFieldSelect: (field: TField) => void;
+  orderHeading: string;
+  sortHeading: string;
 }
 
 /** The Order + Sort sections of the dropdown menu. */
@@ -116,6 +118,8 @@ function SortMenu<TField extends string>({
   fields,
   activeField,
   onFieldSelect,
+  orderHeading,
+  sortHeading,
 }: SortMenuProps<TField>): React.JSX.Element {
   return (
     <Menu
@@ -128,7 +132,7 @@ function SortMenu<TField extends string>({
     >
       {orderOptions.length > 0 && [
         <ListSubheader key="order-label" sx={sectionLabelSx}>
-          Order
+          {orderHeading}
         </ListSubheader>,
         ...orderOptions.map((option) => (
           <SortRow
@@ -141,7 +145,7 @@ function SortMenu<TField extends string>({
         )),
         <Divider key="order-divider" />,
       ]}
-      <ListSubheader sx={sectionLabelSx}>Sort</ListSubheader>
+      <ListSubheader sx={sectionLabelSx}>{sortHeading}</ListSubheader>
       {fields.map((field) => (
         <SortRow
           key={field.value}
@@ -167,6 +171,9 @@ export function SortByDropdown<TField extends string = string>({
   activeOrder,
   onFieldChange,
   onOrderChange,
+  orderHeading,
+  sortHeading,
+  triggerPrefix,
   'data-testid': testId,
 }: SortByDropdownProps<TField>): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -195,7 +202,7 @@ export function SortByDropdown<TField extends string = string>({
         component="span"
         sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: '0.875rem' }}
       >
-        Sort By:
+        {triggerPrefix}
       </Typography>
       <Button
         variant="text"
@@ -219,6 +226,8 @@ export function SortByDropdown<TField extends string = string>({
         <ChevronDownIcon sx={{ fontSize: 14 }} />
       </Button>
       <SortMenu
+        orderHeading={orderHeading}
+        sortHeading={sortHeading}
         anchorEl={anchorEl}
         open={open}
         close={close}

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -25,6 +25,7 @@ export function ViewSelector({
   onViewModeChange,
   zoom,
   onZoomChange,
+  cardSizeLabel,
 }: ViewSelectorProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
@@ -37,7 +38,7 @@ export function ViewSelector({
         <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>
           <Slider
             data-testid="resize-card-slider"
-            aria-label="Card size"
+            aria-label={cardSizeLabel}
             value={zoom[0] ?? 0}
             onChange={(_, value) => onZoomChange([value as number])}
             min={0}

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

@@ -75,6 +75,8 @@ interface DashboardSettingsBaseProps {
  * dialog rendering `children`. Mutually exclusive with link mode.
  */
 export interface DashboardSettingsDialogProps extends DashboardSettingsBaseProps {
+  /** The dialog's close button — a glyph with no visible label. REQUIRED. */
+  closeLabel: string;
   /** Dialog title. Defaults to `"Settings"`. */
   title?: ReactNode;
   /** Dialog body. */
@@ -89,6 +91,8 @@ export interface DashboardSettingsDialogProps extends DashboardSettingsBaseProps
  * exclusive with dialog mode, so `title`/`children` are not accepted.
  */
 export interface DashboardSettingsLinkProps extends DashboardSettingsBaseProps {
+  /** Link mode opens no dialog, so there is no close button to name. */
+  closeLabel?: never;
   /** Link target settings route. */
   href: string;
   /**

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

@@ -101,6 +101,7 @@ DashboardFilterToggle.displayName = 'Dashboard.FilterToggle';
 
 export const DashboardSettings = ({
   title = 'Settings',
+  closeLabel,
   children,
   ariaLabel = 'Settings',
   href,
@@ -146,7 +147,7 @@ export const DashboardSettings = ({
       <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth data-testid={`${testIdPrefix}-settings-dialog`}>
         <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
           {title}
-          <IconButton aria-label="Close" size="small" onClick={() => setOpen(false)}>
+          <IconButton aria-label={closeLabel} size="small" onClick={() => setOpen(false)}>
             <CloseIcon fontSize="small" />
           </IconButton>
         </DialogTitle>

package/src/components/layout/ScrollArea/ScrollArea.tsx

@@ -148,9 +148,18 @@ const LoadingOverlay: FC = () => (
   </Box>
 );
 
-const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void }> = ({
+// The label is guarded at the call site rather than defaulted: the props union
+// already makes it required alongside `scrollToTopButton`, and a fab with an
+// empty accessible name is the exact failure this port exists to remove.
+const ScrollToTopFab: FC<{
+  visible: boolean;
+  glass: boolean;
+  scrollToTopLabel: string;
+  onClick: () => void;
+}> = ({
   visible,
   glass,
+  scrollToTopLabel,
   onClick }) => {
   const theme = useTheme();
 
@@ -158,7 +167,7 @@ const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void
     <Zoom in={visible}>
       <Fab
         size="small"
-        aria-label="Scroll to top"
+        aria-label={scrollToTopLabel}
         onClick={onClick}
         sx={{
           position: 'absolute',
@@ -183,6 +192,8 @@ const ScrollToTopFab: FC<{ visible: boolean; glass: boolean; onClick: () => void
 export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
   const resolved = resolveScrollAreaProps(componentProps);
   const {
+    regionLabel,
+    scrollToTopLabel,
     children,
     width,
     height,
@@ -231,6 +242,7 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
     >
       <ScrollViewport
         {...resolved}
+        regionLabel={regionLabel}
         shouldShowScrollbar={shouldShowScrollbar}
         setScrollRef={setScrollRef}
         onScroll={handleScroll}
@@ -246,8 +258,9 @@ export const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {
 
       {loading && <LoadingOverlay />}
 
-      {scrollToTopButton && !disabled && !loading && (
+      {scrollToTopButton && scrollToTopLabel && !disabled && !loading && (
         <ScrollToTopFab
+          scrollToTopLabel={scrollToTopLabel}
           visible={showScrollToTop}
           glass={variant === 'glass'}
           onClick={scrollToTop}