Skip to content

[API]: Style sortable table headers through aria-sort #147

Description

@ricpastori

Proposal

Add an opt-in presentation for sortable table headers built from native table headings, aria-sort, and a native link or button. The component should provide:

  • a compact header control that fills the heading's interactive area;
  • ascending and descending indicators;
  • a visible focus state;
  • a non-colour indication of the active sort;
  • correct logical placement in RTL.

Cirth should not perform the sort or change aria-sort. A server response, htmx, Datastar, or application code owns that state.

Use Case

Sorting is a basic operation in record tables. Cirth currently styles table headings and buttons independently, but has no contract for a button inside <th> or for the standard aria-sort state. Consumers therefore need custom CSS for every sortable table even when the server performs all behavior.

Markup Or CSS Example

<th scope="col" aria-sort="ascending">
  <button type="submit">Created</button>
</th>

The enclosing form and request mechanism are application concerns.

Fit With Cirth

The proposal styles standard HTML and an accessibility state already authored by the application. It follows Cirth's existing treatment of aria-current, aria-selected, aria-invalid, and aria-busy without shipping behavior.

Compatibility

Prefer an explicit table modifier or another opt-in trigger so an ordinary button in a heading is not silently redefined. Existing tables must remain byte-for-byte or visually unchanged outside that opt-in.

Alternatives

  • Leave every sort control as a full primary button.
  • Require local CSS for the button and indicator.
  • Turn the table into an ARIA grid. Rejected because sorting does not require grid semantics or cell-by-cell keyboard navigation.

Acceptance

  • Cover ascending, descending, and unsorted sortable columns.
  • Verify keyboard focus, forced colors, RTL, long headings, narrow scroll regions, and all maintained presets.
  • Keep sort behavior and state changes outside Cirth.
  • Write the required public-behavior spec before implementation.

Activity

  1. added this to the Feature evaluation milestone on Oct 14, 2026
  2. moved this from 📝 Todo to 📥 Backlog in Cirth roadmapon Oct 14, 2026
  3. added
    ♿ accessibilityAccessibility, assistive technology, keyboard use, or WCAG compliance.
    🌐 rtlRight-to-left layout, bidirectional content, or logical properties.
    🎨 visual designVisual styling, theming, layout polish, or design consistency.
    on Oct 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    ♿ accessibilityAccessibility, assistive technology, keyboard use, or WCAG compliance.🌐 rtlRight-to-left layout, bidirectional content, or logical properties.🎨 visual designVisual styling, theming, layout polish, or design consistency.

    Fields

    Priority

    🌱 P3 — Low

    Projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions