You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.8 KiB
53 lines
1.8 KiB
<script lang="ts">
|
|
/**
|
|
* Renders a morfo's declared focus policy in the A11y tab — the docs
|
|
* consumer of the focus-first axis (2026-08-26): the same declaration the
|
|
* executors run (`FocusScope.use({ policy })` / `RovingFocusGroup`) is
|
|
* what the reader sees, so the page cannot describe a policy the runtime
|
|
* does not have.
|
|
*/
|
|
import type { MorfoFocus } from '$uix/morfo';
|
|
|
|
let { focus }: { focus: MorfoFocus | undefined } = $props();
|
|
|
|
const target = (t: 'first-focusable' | 'trigger' | 'previous' | { partRef: string }) =>
|
|
typeof t === 'string' ? t : `part: ${t.partRef}`;
|
|
</script>
|
|
|
|
{#if focus}
|
|
<h4>Focus policy</h4>
|
|
{#if focus.kind === 'trap'}
|
|
<table data-uix-doc-table>
|
|
<tbody>
|
|
<tr><th>Kind</th><td>trap (overlay)</td></tr>
|
|
<tr>
|
|
<th>Traps Tab</th>
|
|
<td
|
|
>{focus.trap ? 'yes' : 'no'}
|
|
<em>(species default — the `modal` / `trapFocus` prop decides per instance)</em></td
|
|
>
|
|
</tr>
|
|
{#if focus.initial}<tr><th>Initial focus</th><td>{target(focus.initial)}</td></tr>{/if}
|
|
{#if focus.return}<tr><th>Return focus</th><td>{target(focus.return)}</td></tr>{/if}
|
|
<tr><th>Restores on unmount</th><td>{(focus.restore ?? true) ? 'yes' : 'no'}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
{:else}
|
|
<table data-uix-doc-table>
|
|
<tbody>
|
|
<tr><th>Kind</th><td>roving tabindex (composite — exactly one tab stop)</td></tr>
|
|
<tr><th>Roving parts</th><td>{focus.parts.join(' · ')}</td></tr>
|
|
<tr><th>Arrow axis</th><td>{focus.orientation}</td></tr>
|
|
{#if focus.loop !== undefined}<tr
|
|
><th>Loops at ends</th><td>{focus.loop ? 'yes' : 'no'}</td></tr
|
|
>{/if}
|
|
{#if focus.executor}
|
|
<tr><th>Executor</th><td><em>signed custom:</em> {focus.executor.custom}</td></tr>
|
|
{:else}
|
|
<tr><th>Executor</th><td>shared <code>RovingFocusGroup</code> ($adom)</td></tr>
|
|
{/if}
|
|
</tbody>
|
|
</table>
|
|
{/if}
|
|
{/if}
|