Skip to content

Commit 9873ff0

Browse files
committed
markdown formatting nit
1 parent e31f78c commit 9873ff0

File tree

1 file changed

+4
-4
lines changed
  • apps/dialtone-documentation/docs/dialtone/whats-new/posts

1 file changed

+4
-4
lines changed

apps/dialtone-documentation/docs/dialtone/whats-new/posts/2026-4-21.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ Tab cycles through the inputs and buttons. Shift+Tab wraps backward. Focus never
7777
## Options
7878

7979
| Option | Type | Default | Description |
80-
|---|---|---|---|
80+
| --- | --- | --- | --- |
8181
| `active` | `boolean` | `true` | Whether the trap is active. Reactive. |
8282
| `initialFocus` | `'auto' \| string \| HTMLElement \| false` | `'auto'` | Where to place focus on activation. `'auto'` = first focusable. CSS selector = `el.querySelector()`. `false` = don't move focus. |
8383
| `restoreFocus` | `boolean` | `true` | Restore focus to the previously-focused element on deactivation. |
@@ -87,12 +87,12 @@ Tab cycles through the inputs and buttons. Shift+Tab wraps backward. Focus never
8787
These directives solve different problems. Use both when a widget needs both behaviors.
8888

8989
| | `v-dt-focustrap` | `v-dt-focusgroup` |
90-
|---|---|---|
90+
| --- | --- | --- |
9191
| **Purpose** | Prevent focus from *leaving* a container | Move focus *within* a container via arrow keys |
9292
| **Key handled** | `Tab` / `Shift+Tab` | Arrow keys, `Home`, `End` |
9393
| **Typical use** | Dialogs, modals, popovers, drawers | Toolbars, tab lists, menus, listboxes |
9494
| **Tab behavior** | Cycles Tab at container boundaries | Single Tab stop — Tab exits the group |
95-
| **Composable?** | Yes — a dialog can use `v-dt-focustrap` on the dialog and `v-dt-focusgroup` on a toolbar inside it |
95+
| **Composable?** | Yes — use on the dialog container | Yes — use on a toolbar or menu inside the dialog |
9696

9797
## What It Does NOT Do
9898

@@ -122,4 +122,4 @@ Remove your `@keydown.tab` handler, your `querySelectorAll` calls for Tab trappi
122122
<script setup>
123123
import BlogPost from '@baseComponents/BlogPost.vue';
124124
import { parse } from 'date-fns';
125-
</script>
125+
</script>

0 commit comments

Comments
 (0)