Improve workspace tabs semantic HTML and accessibility structure

[knightedcodemonkey]

Summary

Refactor the workspace tabs and add-tab UI to use more semantic HTML and improve accessibility consistency, while preserving current behavior and visual design.

This issue is intentionally scoped as a follow-up to previous tab behavior work. It focuses on structure and semantics, not new tab features.

Problem

The current workspace tabs area relies heavily on generic containers and mixed interaction patterns, which makes accessibility intent less clear and increases maintenance cost.

Known pain points:

1. Structural semantics are container-heavy and do not clearly communicate list/navigation intent.
2. Tab semantics and keyboard model are not fully aligned when tab roles are present.
3. Add-tab trigger/menu semantics can be clarified and hardened.
4. DOM structure is harder to reason about than it needs to be.

Goals

1. Replace overly generic structure with meaningful semantic elements where appropriate.
2. Align ARIA usage with implemented behavior (no partial pattern claims).
3. Keep existing UX and styling stable unless a semantic fix requires a minimal adjustment.
4. Keep changes localized and reviewable.

Non-goals

1. No tab reordering feature work.
2. No broad visual redesign.
3. No changes to unrelated app regions.
4. No dependency additions unless explicitly approved.

Proposed Scope

1. Audit workspace tabs markup and identify candidates for semantic upgrades (for example list/navigation structures and related controls).
2. Define one consistent accessibility strategy for tabs:
   • Option A: Full tabs pattern (roles, relationships, keyboard interactions).
   • Option B: Button/list semantics without claiming tabs pattern.
3. Refactor add-tab trigger/menu markup for stronger semantic clarity and accessible naming/state.
4. Update related JS wiring only as needed to support the chosen semantic model.
5. Update or add focused tests for structure and keyboard/accessibility behavior.

Acceptance Criteria

1. Workspace tabs DOM uses improved semantic HTML with no behavior regressions.
2. ARIA roles/attributes match real behavior and keyboard support.
3. Add-tab control and menu states are correctly exposed to assistive tech.
4. Existing tab flows still pass (activate, remove, rename, add module/styles).
5. Relevant automated tests are updated/added and passing.
6. Lint/build checks pass.

Suggested Validation

1. Run targeted workspace tabs and rendering/accessibility-related tests.
2. Verify keyboard interaction in the tabs area manually (Tab, Shift+Tab, Enter/Space, and arrow/home/end only if full tabs pattern is implemented).
3. Verify screen reader labels/state changes for active tab and add-tab menu expanded/collapsed state.
4. Run lint and build for the package.

Implementation Notes

1. Keep changes incremental and split into small commits/PR chunks if needed:
   • Chunk 1: semantic markup restructure
   • Chunk 2: ARIA/keyboard alignment
   • Chunk 3: tests and polish
2. Prefer preserving existing class hooks unless there is a clear reason to rename.
3. Document chosen accessibility pattern and rationale in the PR description.

[knightedcodemonkey]

Fixed in #68