fix(ui,sdk): localize disclosure labels

Author: librowski

.changeset/accessible-dismissible-labels.md

@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': minor
+'@workflowbuilder/sdk': patch
+---
+
+`Modal` now accepts `closeLabel`, while `Collapsible` accepts `expandLabel` and `collapseLabel`, all with English defaults. The SDK supplies its localized labels to these controls.

packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.tsx

@@ -2,6 +2,7 @@ import { Collapsible, NodeDescription, NodeIcon, NodePanel, Status } from '@work
 import { Handle } from '@xyflow/react';
 import clsx from 'clsx';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@workflow-builder/icons';
 
@@ -47,6 +48,7 @@ export const AiAgentNodeTemplate = memo(
     layoutDirection = 'RIGHT',
     onAddTool,
   }: Props) => {
+    const { t } = useTranslation();
     const isCanvasNode = showHandles;
     const handleTargetId = getHandleId({ handleType: 'target' });
     const handleSourceId = getHandleId({ handleType: 'source' });
@@ -59,7 +61,7 @@ export const AiAgentNodeTemplate = memo(
     const handlesAlignment = getHandlesAlignment({ layoutDirection });
 
     return (
-      <Collapsible>
+      <Collapsible expandLabel={t('common.expand')} collapseLabel={t('common.collapse')}>
         <NodePanel.Root selected={selected}>
           <NodePanel.Header className={styles['header']}>
             <NodeIcon className={styles['icon']} icon={iconElement} />

packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.tsx

@@ -1,6 +1,7 @@
 import { Collapsible, NodeDescription, NodeIcon, NodePanel, Status } from '@workflowbuilder/ui';
 import { Handle } from '@xyflow/react';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@workflow-builder/icons';
 
@@ -40,6 +41,7 @@ const StartNodeTemplateComponent = memo(
     isValid,
     children,
   }: StartNodeTemplateProps) => {
+    const { t } = useTranslation();
     const isCanvasNode = showHandles;
 
     const handleSourceId = getHandleId({ handleType: 'source' });
@@ -51,7 +53,7 @@ const StartNodeTemplateComponent = memo(
     const handlesAlignment = getHandlesAlignment({ layoutDirection });
 
     return (
-      <Collapsible>
+      <Collapsible expandLabel={t('common.expand')} collapseLabel={t('common.collapse')}>
         <NodePanel.Root selected={selected} className={styles['content']}>
           <NodePanel.Header>
             <NodeIcon icon={iconElement} />

packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.tsx

@@ -1,6 +1,7 @@
 import { Collapsible, NodeDescription, NodeIcon, NodePanel, Status } from '@workflowbuilder/ui';
 import { Handle } from '@xyflow/react';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@workflow-builder/icons';
 
@@ -64,6 +65,7 @@ const WorkflowNodeTemplateComponent = memo(
     isValid,
     children,
   }: WorkflowNodeTemplateProps) => {
+    const { t } = useTranslation();
     const isCanvasNode = showHandles;
 
     const handleTargetId = getHandleId({ handleType: 'target' });
@@ -77,7 +79,7 @@ const WorkflowNodeTemplateComponent = memo(
     const handlesAlignment = getHandlesAlignment({ layoutDirection });
 
     return (
-      <Collapsible>
+      <Collapsible expandLabel={t('common.expand')} collapseLabel={t('common.collapse')}>
         <NodePanel.Root selected={selected} className={styles['content']}>
           <NodePanel.Header>
             <NodeIcon icon={iconElement} />

packages/sdk/src/features/modals/providers/modal-provider.tsx

@@ -1,13 +1,15 @@
 import { Modal } from '@workflowbuilder/ui';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 
 import { closeModal, useModalStore } from '../stores/use-modal-store';
 
 // Read by variable-text.module.css to suppress its own backdrop.
 const MODAL_OPEN_BODY_CLASS = 'wb-modal-open';
 
 export function ModalProvider() {
+  const { t } = useTranslation();
   const isOpen = useModalStore((state) => state.isOpen);
   const modal = useModalStore((state) => state.modal);
 
@@ -46,6 +48,7 @@ export function ModalProvider() {
           open={isOpen && !!modal}
           icon={activeModal?.icon}
           onClose={activeModal?.isCloseButtonVisible ? closeModal : undefined}
+          closeLabel={t('common.close')}
           title={activeModal?.title || ''}
           footer={activeModal?.footer}
           footerVariant={activeModal?.footerVariant}

packages/ui/src/components/collapsible/collapsible.tsx

@@ -10,6 +10,8 @@ import { NavButton } from '../button/nav-button/nav-button';
 interface CollapsibleContextProps {
   isExpanded: boolean;
   toggle: () => void;
+  expandLabel: string;
+  collapseLabel: string;
 }
 
 const CollapsibleContext = createContext<CollapsibleContextProps | undefined>(undefined);
@@ -28,9 +30,26 @@ export type CollapsibleProps = {
   isExpanded?: boolean;
   defaultExpanded?: boolean;
   onToggle?: (expanded: boolean) => void;
+  /**
+   * Accessible label for the button when the content is collapsed
+   * @default 'Expand'
+   */
+  expandLabel?: string;
+  /**
+   * Accessible label for the button when the content is expanded
+   * @default 'Collapse'
+   */
+  collapseLabel?: string;
 };
 
-export function Collapsible({ children, isExpanded, defaultExpanded = false, onToggle }: CollapsibleProps) {
+export function Collapsible({
+  children,
+  isExpanded,
+  defaultExpanded = false,
+  onToggle,
+  expandLabel = 'Expand',
+  collapseLabel = 'Collapse',
+}: CollapsibleProps) {
   const isControlled = isExpanded !== undefined;
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
 
@@ -45,7 +64,9 @@ export function Collapsible({ children, isExpanded, defaultExpanded = false, onT
   }, [actualExpanded, isControlled, onToggle]);
 
   return (
-    <CollapsibleContext.Provider value={{ isExpanded: actualExpanded, toggle }}>{children}</CollapsibleContext.Provider>
+    <CollapsibleContext.Provider value={{ isExpanded: actualExpanded, toggle, expandLabel, collapseLabel }}>
+      {children}
+    </CollapsibleContext.Provider>
   );
 }
 
@@ -54,7 +75,7 @@ Collapsible.Button = function CollapsibleButton() {
 
   return (
     <NavButton
-      aria-label={context?.isExpanded ? 'Collapse' : 'Expand'}
+      aria-label={context?.isExpanded ? context.collapseLabel : context?.expandLabel}
       className={clsx(styles['expand-button'], {
         [styles['expanded']]: context?.isExpanded,
       })}

packages/ui/src/components/modal/modal.tsx

@@ -48,6 +48,11 @@ export type ModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivEle
      * Callback function called when the modal is closed
      */
     onClose?: () => void;
+    /**
+     * Accessible label for the close button
+     * @default 'Close'
+     */
+    closeLabel?: string;
   };
 
 /**
@@ -65,6 +70,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       footerVariant = 'integrated',
       open,
       onClose,
+      closeLabel = 'Close',
       className,
       ...rest
     },
@@ -99,7 +105,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
                   )}
                 </div>
               </div>
-              {onClose && <NavButton aria-label="Close" onClick={onClose} prefixIcon={<X />} />}
+              {onClose && <NavButton aria-label={closeLabel} onClick={onClose} prefixIcon={<X />} />}
             </div>
 
             {children && <div className={styles['content']}>{children}</div>}