#461
Own header
A drawer without a title whose own header carries the item key, a heading and a close button; aria-labelledby names the panel.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Own header" pattern (@codeatlasdev/ui demo #461, feedback/drawer) in my app.
Call get_demo({ ids: ["#461"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Detail panels that build their own header (key, actions) and still need an accessible name.
Keep these library parts, with the props and tokens the demo uses:
- Drawer, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<Drawer bind:open aria-labelledby="item-heading" data-testid="item-drawer">` with no `title`
- A `<header class="head">` with `PRJ-42` as `<p class="key">` and `<h2 id="item-heading" class="name">Fix login redirect</h2>`
- A ghost small button with `aria-label="Close item"` and a `<X size={14} />` leading icon sets `open = false`
- A line below reads `Own header, own close button. The panel is still named by the heading above.`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<Drawer bind:open aria-labelledby="item-heading" data-testid="item-drawer">` with no `title`
- A `<header class="head">` with `PRJ-42` as `<p class="key">` and `<h2 id="item-heading" class="name">Fix login redirect</h2>`
- A ghost small button with `aria-label="Close item"` and a `<X size={14} />` leading icon sets `open = false`
- A line below reads `Own header, own close button. The panel is still named by the heading above.`
Related
Loading source.