Skip to content

fix: add visually hidden DialogTitle for accessibility#395

Open
jaredm563 wants to merge 1 commit intodip:mainfrom
jaredm563:fix/dialog-title-accessibility-clean
Open

fix: add visually hidden DialogTitle for accessibility#395
jaredm563 wants to merge 1 commit intodip:mainfrom
jaredm563:fix/dialog-title-accessibility-clean

Conversation

@jaredm563
Copy link

Description

Fixes #393

This PR adds a visually hidden DialogTitle to the Command.Dialog component to satisfy Radix UI's accessibility requirements.

Problem

The Command.Dialog component uses @radix-ui/react-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.

Solution

Added a single line with a visually hidden DialogTitle that uses the label prop (with a fallback to "Command Menu"):

<RadixDialog.Title style={srOnlyStyles}>{props.label || 'Command Menu'}</RadixDialog.Title>

Benefits

  • ✅ Eliminates console warnings in development and test environments
  • ✅ Improves accessibility for screen reader users
  • ✅ Follows Radix UI's accessibility best practices
  • ✅ Maintains current visual design (title is visually hidden)
  • ✅ No breaking changes - uses existing label prop
  • ✅ Uses existing srOnlyStyles constant already in the codebase

Testing

Developers can now remove workarounds like:

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

Fixes dip#393

Adds a visually hidden DialogTitle to satisfy Radix UI's accessibility
requirements. This resolves console warnings in React 18+ and testing
environments while maintaining the current visual design.
@jaredm563
Copy link
Author

I totally understand the 'unstyled / headless' philosophy of the library and that yall probably were intending to keep the DOM tree minimal. BUT, the most recent versions of Radix UI now strictly enforce the presence of a DialogTitle component.

So, without this, developers using cmdk in React 18+ or modern testing environments (like Vitest/Jest with @testing-library) are hit with persistent console.error warnings that can't be resolved without messy workarounds in the consuming codebase.

Soooo this is a pretty small change only intended to satisfy the Radix UI accessibility contract and get rid of those console errors -- and it will still be visually identical for all users.

@aitchiss
Copy link

aitchiss commented Feb 2, 2026

Nice! Would love to get this merged - having a proper title for the dialog component is a must for accessibility; seems like a quick win with a big impact 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dialog component missing DialogTitle causes accessibility warnings

2 participants