docs(dialog): dlt-3361 dtmodal native dialog migration

[Ignacio Ropolo (iropolo)]

DtModal native dialog migration

🛠️ Type Of Change

These types will not increment the version number, but will still deploy to documentation site on release:

• Documentation

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-3361

📖 Description

Marked as Not breaking in the migration checklist, with a note that it only affects consumers targeting internal DOM structure.

[coderabbitai]

Adds comprehensive migration documentation for DtModal's native <dialog> element implementation, including a new guide page explaining CSS selector updates, focus/Escape handling changes, and backdrop behavior, along with navigation entries and migration checklist updates.

Overall Judgement: ✅ Ready to merge
Documentation-only changes that clearly communicate the migration path with no breaking changes for the target audience.

Walkthrough

This PR adds a new migration guide documenting DtModal's adoption of native HTML <dialog> elements, replacing the previous <div role="dialog"> with aria-hidden approach. The guide covers DOM structure, backdrop, focus/keyboard handling, transitions, and popover/tooltip behavior, with navigation and checklist integration.

Changes

DtModal Native Dialog Migration Documentation

Layer / File(s)	Summary
Navigation and checklist integration apps/dialtone-documentation/docs/_data/site-nav.json, apps/dialtone-documentation/docs/guides/migration/index.md	Adds "DtModal Native Dialog" link under Migration Guide navigation and registers a new migration checklist entry.
DtModal native dialog migration guide apps/dialtone-documentation/docs/guides/migration/modal-native-dialog/index.md	Complete migration guide explaining the shift from <div role="dialog"> with aria-hidden to native <dialog> with open state; details DOM structure, native ::backdrop pseudo-element behavior, CSS selector updates supporting both legacy and new patterns, focus/Escape handling via native APIs, removal of DtLazyShow transition wrapping, automatic popover/tooltip appending to dialogs, consumer action checklist, and support contact.

Possibly related PRs

• dialpad/dialtone#1266: Implements popover/tooltip auto-appending to native <dialog> elements as described in this migration guide.

Suggested reviewers

• braddialpad
• ninarepetto

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dlt-3361

---

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

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1275/

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/dialtone-documentation/docs/guides/migration/index.md (1)

39-45: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Fix checklist numbering: Vue 2 Removal should be #17, not #15.

Adding DtModal as item #16 extends the Components section, so the Framework section now starts at #17. Line 45 still shows Vue 2 Removal as #15, creating duplicate numbering.

🔢 Proposed fix

 | 16 | [DtModal Native Dialog](./modal-native-dialog/) | No | — | `DtModal` now uses a native `<dialog>` element. Popovers and tooltips inside modals auto-append to the dialog. Only affects consumers targeting internal DOM structure. |
 
 ### Framework
 
 | # | Guide | Breaking? | Tool | Summary |
 | --- | --- | --- | --- | --- |
-| 15 | [Vue 2 Removal](./vue2-removal/) | **Yes** | — | Vue 2 support dropped. Last Vue 2 version: `9.154.0`. |
+| 17 | [Vue 2 Removal](./vue2-removal/) | **Yes** | — | Vue 2 support dropped. Last Vue 2 version: `9.154.0`. |

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/dialtone-documentation/docs/guides/migration/index.md` around lines 39 -
45, The migration guide numbering is inconsistent: after adding "DtModal Native
Dialog" as item `#16` in the Components section, the Framework section's "Vue 2
Removal" still shows `#15`; update the markdown so "Vue 2 Removal" is numbered `#17`
instead of `#15` (and verify subsequent entries, e.g., any following guide
numbers) to avoid duplicate/incorrect numbering—edit the table row for "Vue 2
Removal" (the row containing the text "Vue 2 Removal" and the summary about Vue
2 support) and change the leading index from 15 to 17.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@apps/dialtone-documentation/docs/guides/migration/index.md`:
- Around line 39-45: The migration guide numbering is inconsistent: after adding
"DtModal Native Dialog" as item `#16` in the Components section, the Framework
section's "Vue 2 Removal" still shows `#15`; update the markdown so "Vue 2
Removal" is numbered `#17` instead of `#15` (and verify subsequent entries, e.g.,
any following guide numbers) to avoid duplicate/incorrect numbering—edit the
table row for "Vue 2 Removal" (the row containing the text "Vue 2 Removal" and
the summary about Vue 2 support) and change the leading index from 15 to 17.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 938aee86-1ab2-400d-8287-170223b5f167

📥 Commits

Reviewing files that changed from the base of the PR and between 1e919f8 and db78d5c.

📒 Files selected for processing (3)

• apps/dialtone-documentation/docs/_data/site-nav.json
• apps/dialtone-documentation/docs/guides/migration/index.md
• apps/dialtone-documentation/docs/guides/migration/modal-native-dialog/index.md