Implement accessible ARIA tablist pattern for landing page tabs

[bonheur15]

Problem

The tab interface on the landing page (Site CDN / Image CDN tabs) is not accessible to keyboard users or screen readers. The current implementation uses hidden radio inputs with CSS-only tab switching.

Location: internal/web/views/landing.templ:9-19

• Radio inputs have class="tab-input" and display: none — completely invisible to screen readers
• No role="tablist", role="tab", or role="tabpanel" attributes
• No aria-selected state on active tab
• No aria-label on tab sections
• Keyboard navigation between tabs is unreliable

Current Code

<input class="tab-input" type="radio" id="tab-site" name="tab" checked/>
<label class="tab-label" for="tab-site">Site CDN</label>
<input class="tab-input" type="radio" id="tab-img" name="tab"/>
<label class="tab-label" for="tab-img">Image CDN</label>

Proposed Fix

Follow the WAI-ARIA Tabs Pattern:

1. Add role="tablist" to the container holding the tab labels
2. Add role="tab" to each label
3. Add role="tabpanel" to each section
4. Add aria-selected="true/false" to indicate active tab
5. Add aria-controls linking tabs to their panels
6. Ensure Tab key moves focus between tabs, and Arrow keys navigate within the tab list
7. Add keyboard event handlers to support Arrow key navigation and Home/End keys

Example

<div class="tabs" role="tablist">
    <label class="tab-label" role="tab" id="tab-site" 
           aria-selected="true" aria-controls="pane-site" tabindex="0">Site CDN</label>
    <label class="tab-label" role="tab" id="tab-img" 
           aria-selected="false" aria-controls="pane-img" tabindex="-1">Image CDN</label>
</div>
<section class="pane pane-site" role="tabpanel" id="pane-site" aria-labelledby="tab-site">...</section>
<section class="pane pane-img" role="tabpanel" id="pane-img" aria-labelledby="tab-img">...</section>