IssueReportPage: unmount guard on the repos fetch, aria-sort on sortable headers

Two non-blocking notes from review:
- the /api/repos effect now uses the same cancelled guard the
  repo-filter effect already has, so an unmount mid-flight doesn't call
  setRepos/setError on a gone component.
- Table's TableColumn gains an optional ariaSort field, consumed as the
  <th>'s aria-sort attribute; the issue-report page's sortable columns
  now report ascending/descending/none so a screen reader can announce
  which column and direction is active, not just the sighted ▲/▼ glyph.
This commit is contained in:
iris 2026-08-31 18:54:23 +02:00 committed by mara
commit 6e6bf62437
2 changed files with 43 additions and 5 deletions

View file

@ -20,6 +20,17 @@ export interface TableColumn<T> {
// can pass real markup instead of forking a second table primitive.
header: ComponentChildren;
render: (row: T) => ComponentChildren;
/**
* ARIA sort state for this column's `<th>` — `'ascending'` /
* `'descending'` while this is the active sort column, `'none'` while
* sortable but not active, omitted entirely for a non-sortable column
* (no `aria-sort` attribute at all, the correct value for a column
* that can never be the active sort). A screen reader announces which
* column/direction is active from this attribute; the / glyph a
* sortable header renders is `aria-hidden` and carries no information
* on its own.
*/
ariaSort?: 'ascending' | 'descending' | 'none';
}
export function Table<T>({
@ -44,7 +55,9 @@ export function Table<T>({
<thead>
<tr>
{columns.map((c) => (
<th key={c.key}>{c.header}</th>
<th key={c.key} aria-sort={c.ariaSort}>
{c.header}
</th>
))}
</tr>
</thead>