Listings: the state strip drawn as Basecoat tabs #842

New issue

Closed

opened 2026-10-10 15:50:13 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 15:50:13 +00:00

Owner

Replace the Listings page's top navigation — To decide, Shortlisted, Discarded, Applied, Closed, Everything — with Basecoat's Tabs.

What exists today

templates/jobs/listing_list.html:152-168: <nav aria-label="Listing filters"> of whole-page links (nav-link, nav-link-active, aria-current="page"), each with a count; labels from FILTER_LABELS (listing_views.py:32-39). They are page loads on purpose, because the counts change (:152-155, the view's docstring :42-56).
No tabs component exists; Basecoat's tabs.css is not imported and its tabs.js not vendored. The same nav-link look is used by the calendar (applications/calendar.html:148) and the sidebar; Documents has a pill strip (cotton/documents_nav.html).

What would change

Import Basecoat's tabs structure and paint it; the strip drawn as tabs, keeping <nav> and the links with aria-current="page".

Decisions

Look, or behaviour. Basecoat Tabs is the ARIA tablist pattern (tabs, panels, arrow keys); links that load another page are not tabs, and role="tab" on them would tell a screen reader something untrue. Recommended: Basecoat's tabs look on the existing navigation links, no role="tab". The alternative — a real tablist with panels — would change how the page loads and counts.
One component. Recommended: a cotton c-tab-nav used by Listings now and offered to the calendar and Documents strips.

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

Replace the Listings page's top navigation — To decide, Shortlisted, Discarded, Applied, Closed, Everything — with Basecoat's Tabs. ## What exists today - `templates/jobs/listing_list.html:152-168`: `<nav aria-label="Listing filters">` of whole-page links (`nav-link`, `nav-link-active`, `aria-current="page"`), each with a count; labels from `FILTER_LABELS` (`listing_views.py:32-39`). They are page loads on purpose, because the counts change (`:152-155`, the view's docstring `:42-56`). - No tabs component exists; Basecoat's `tabs.css` is not imported and its `tabs.js` not vendored. The same `nav-link` look is used by the calendar (`applications/calendar.html:148`) and the sidebar; Documents has a pill strip (`cotton/documents_nav.html`). ## What would change - Import Basecoat's tabs structure and paint it; the strip drawn as tabs, keeping `<nav>` and the links with `aria-current="page"`. ## Decisions - **Look, or behaviour.** Basecoat Tabs is the ARIA tablist pattern (tabs, panels, arrow keys); links that load another page are not tabs, and `role="tab"` on them would tell a screen reader something untrue. Recommended: Basecoat's tabs **look** on the existing navigation links, no `role="tab"`. The alternative — a real tablist with panels — would change how the page loads and counts. - **One component.** Recommended: a cotton `c-tab-nav` used by Listings now and offered to the calendar and Documents strips. Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 15:50:13 +00:00

tiagoagueda added the

enhancement

interface

accessibility

labels

2026-10-10 15:50:13 +00:00

tiagoagueda referenced this issue

2026-10-10 16:01:29 +00:00

Calendar: the view switcher beside the period, Import and Export beside New reminder #861

tiagoagueda referenced this issue