Dialog component missing DialogTitle causes accessibility warnings

[jaredm563]

Description

The Command.Dialog component uses Radix UI's Dialog internally but doesn't include a DialogTitle, which causes accessibility warnings in React 18+ and testing environments:

Warning: `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.

Current Implementation

The Dialog component currently renders:

<RadixDialog.Content aria-label={props.label} cmdk-dialog="" className={contentClassName}>
  <Command ref={forwardedRef} {...etc} />
</RadixDialog.Content>

Impact

• Console warnings in development and test environments
• Developers need to suppress these warnings in tests (workaround required)
• Potential accessibility issues for screen reader users
• Not following Radix UI's accessibility requirements

Proposed Solution

Add a visually hidden DialogTitle that uses the label prop:

<RadixDialog.Content aria-label={props.label} cmdk-dialog="" className={contentClassName}>
  <RadixDialog.Title style={srOnlyStyles}>{props.label || 'Command Menu'}</RadixDialog.Title>
  <Command ref={forwardedRef} {...etc} />
</RadixDialog.Content>

This maintains the current visual design while satisfying Radix UI's accessibility requirements.

Workaround

Currently, developers need to suppress these errors in tests:

const originalConsoleError = console.error;
beforeAll(() => {
  console.error = (...args: unknown[]) => {
    const message = String(args[0]);
    if (message.includes('`DialogContent` requires a `DialogTitle`')) {
      return;
    }
    originalConsoleError(...args);
  };
});

Environment

• cmdk: 1.1.1
• @radix-ui/react-dialog: ^1.1.6
• React: 18+