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:
parent
f4b61db753
commit
6e6bf62437
2 changed files with 43 additions and 5 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue