AuroraUI.Components.Tabs (Aurora UI v0.1.1)

View Source

Tabs family — tabs/1 (ARIA tablist) and accordion/1 (native disclosure).

Both components render complete, correct semantics on the server; the hooks only add motion and keyboard niceties on top of a baseline that already works without JavaScript.

tabs/1

Renders the WAI-ARIA Tabs pattern: a role="tablist" of role="tab" buttons, each aria-controls-linked to a role="tabpanel". The first tab is selected on the server. The AuroraTabs hook manages roving tabindex, Arrow / Home / End key handling, and activation (manual — move focus, select on Enter/Space; auto — select on focus). Selection is preserved across LiveView patches because the hook owns it in the DOM and survives updated(). Pass a stable id so the hook target is stable across patches.

accordion/1

Built on native <details>/<summary> so expand/collapse, keyboard, and in-page-find work with zero JavaScript. The AuroraDisclosure hook only animates open/close (honouring prefers-reduced-motion) and handles interruption when a user toggles mid-animation. type="single" uses the native <details name> grouping for exclusive (one-open-at-a-time) behavior.

Because panels are native <details>, a browser's "find in page" can reveal content in a collapsed panel, and you may open a specific item on load by passing open on that :item. Aurora UI does not auto-open from the URL fragment; wire that in your LiveView if you need it, then set open server-side.

Summary

Functions

accordion(assigns)

A stack of collapsible sections built on native <details>. Works fully without JavaScript; the AuroraDisclosure hook only animates the open/close. Set type="single" for an exclusive accordion.

tabs(assigns)

An accessible tabbed interface. The first tab renders selected; the AuroraTabs hook takes over keyboard navigation and keeps the selection stable across patches.

Functions

accordion(assigns)

A stack of collapsible sections built on native <details>. Works fully without JavaScript; the AuroraDisclosure hook only animates the open/close. Set type="single" for an exclusive accordion.

Examples

<.accordion id="faq" type="single">
  <:item title="What is Aurora UI?">A free Phoenix component kit.</:item>
  <:item title="Is it accessible?" open>Yes — WCAG 2.2 AA.</:item>
</.accordion>

Attributes

  • id (:string) (required) - stable id; item ids + single-open group derive from it.
  • type (:string) - single allows only one open item (native <details name> grouping). Defaults to "multiple". Must be one of "multiple", or "single".
  • Global attributes are accepted.

Slots

  • item (required) - one collapsible section. Accepts attributes:
    • title (:string) (required) - the summary / trigger label.
    • open (:boolean) - render this item expanded.

tabs(assigns)

An accessible tabbed interface. The first tab renders selected; the AuroraTabs hook takes over keyboard navigation and keeps the selection stable across patches.

Examples

<.tabs id="settings" label="Settings" activation="manual">
  <:tab label="Profile">…profile fields…</:tab>
  <:tab label="Billing">…billing…</:tab>
  <:tab label="Archived" disabled>…</:tab>
</.tabs>

Attributes

  • id (:string) (required) - stable id; hook + ARIA targets derive from it.
  • label (:string) (required) - accessible name for the tablist.
  • activation (:string) - manual selects on Enter/Space; auto selects on focus. Defaults to "manual". Must be one of "manual", or "auto".
  • orientation (:string) - arrow-key axis; sets aria-orientation. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • Global attributes are accepted.

Slots

  • tab (required) - one tab and its panel. Accepts attributes:
    • label (:string) (required) - the visible tab label.
    • disabled (:boolean)