FOLLOW-UP: Optionally upgrade Tabs pattern to full ARIA tablist semantics (from PR #74)

[adnaan]

Context

This follow-up task was identified during the review of PR #74.

Source PR: #74
PR Title: feat: patterns example Session 4 (patterns #17-21) — dialogs, tabs & navigation
Suggested by: @claude[bot] (PR comments, rounds 5 and 11)

Task Description

The Tabs (HATEOAS) pattern uses <nav> + aria-current="page" (Pico CSS convention) for a server-driven navigation set. This is correct for "current page in navigation" semantics but does not announce as a tab widget to screen readers.

Some users may want to demonstrate the formal ARIA tab widget pattern instead, with role="tablist", role="tab", role="tabpanel", and aria-selected.

Suggested Approach

Either (a) add a separate "Tabs (ARIA)" pattern alongside the existing HATEOAS one to show both options, or (b) upgrade the existing pattern with the ARIA roles while keeping aria-current for breadcrumb consistency.

<nav aria-label="Sections">
    <ul role="tablist">
        <li role="presentation">
            <a href="?tab=overview" role="tab"
               {{if eq .ActiveTab "overview"}}aria-current="page" aria-selected="true"{{else}}aria-selected="false"{{end}}>
              Overview
            </a>
        </li>
        ...
    </ul>
</nav>
<section role="tabpanel" aria-label="{{.ActiveTab}}">

Why Not in PR #74

The PR's pattern was scoped to demonstrate server-driven tab content swapping via the __navigate__ action, not the ARIA tab widget pattern. The Pico-native aria-current shape matches the rest of the patterns codebase. Upgrading is a separate accessibility improvement worth its own PR.

---

Auto-created by prmonitor from PR review comments.