fix: add visually hidden DialogTitle for accessibility#395
fix: add visually hidden DialogTitle for accessibility#395
Conversation
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.
|
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. |
|
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 🙌 |
Description
Fixes #393
This PR adds a visually hidden
DialogTitleto theCommand.Dialogcomponent to satisfy Radix UI's accessibility requirements.Problem
The
Command.Dialogcomponent uses@radix-ui/react-dialoginternally but doesn't include aDialogTitle, which causes accessibility warnings in React 18+ and testing environments:Solution
Added a single line with a visually hidden
DialogTitlethat uses thelabelprop (with a fallback to "Command Menu"):Benefits
labelpropsrOnlyStylesconstant already in the codebaseTesting
Developers can now remove workarounds like: