fix(Modal/Slideover): suppress aria-describedby warning when no description

[howwohmm]

Fixes #6240

Reka UI warns Missing 'Description' or 'aria-describedby="undefined"' when DialogContent has no DialogDescription child. The fix is to pass aria-describedby="undefined" to suppress it when no description is intentionally provided.

Added the conditional binding to both Modal.vue and Slideover.vue — when description prop and slot are both absent, set it; otherwise leave it unset so reka-ui can wire it to the DialogDescription id normally.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes address an accessibility warning that appeared in Modal and Slideover components when the description prop was not provided. Both Modal.vue and Slideover.vue were updated to conditionally set the aria-describedby attribute on the DialogContent element. When neither a description prop nor a description slot is present, the attribute is explicitly set to the string 'undefined'; otherwise, it remains undefined (omitting the attribute entirely). This prevents console warnings about missing descriptions without altering any other component logic or behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: suppressing aria-describedby warnings in Modal and Slideover components when no description is provided.
Linked Issues check	✅ Passed	The PR fully addresses the objective from issue #6240 by passing aria-describedby='undefined' to DialogContent when no description is provided, eliminating the console warning.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the aria-describedby warning in Modal and Slideover components; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the issue (#6240), the fix applied, and which components are affected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/runtime/components/Modal.vue (1)

147-147: Add regression coverage for the no-description branch.

This line is the core fix path, but current accessibility tests shown in context only assert the described case. Please add tests for “no description prop and no description slot” to lock in warning-free behavior.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/runtime/components/Modal.vue` at line 147, Add a regression test for the
Modal component covering the "no description" branch: mount the Modal without
the description prop and without providing a description slot (the branch
controlled by the :aria-describedby expression in Modal.vue) and assert that
aria-describedby is not present (or equals undefined) and that no accessibility
or console warnings are emitted. Create this in the Modal test suite (e.g.,
Modal.spec) using the same render/mount helpers as other tests, spy on
console.warn/error, mount <Modal> with no description prop and no description
slot, and assert no warnings and that the rendered root does not include an
aria-describedby attribute or includes it only as undefined. Ensure the test
mirrors the existing "described" case structure so CI will exercise the
regression path.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/runtime/components/Modal.vue`:
- Line 147: Add a regression test for the Modal component covering the "no
description" branch: mount the Modal without the description prop and without
providing a description slot (the branch controlled by the :aria-describedby
expression in Modal.vue) and assert that aria-describedby is not present (or
equals undefined) and that no accessibility or console warnings are emitted.
Create this in the Modal test suite (e.g., Modal.spec) using the same
render/mount helpers as other tests, spy on console.warn/error, mount <Modal>
with no description prop and no description slot, and assert no warnings and
that the rendered root does not include an aria-describedby attribute or
includes it only as undefined. Ensure the test mirrors the existing "described"
case structure so CI will exercise the regression path.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6a27825a-39a3-4e91-a895-7b73da06de14

📥 Commits

Reviewing files that changed from the base of the PR and between 90a94fb and 4cbe6cf.

📒 Files selected for processing (2)

• src/runtime/components/Modal.vue
• src/runtime/components/Slideover.vue