---
phase: 09-md3-components
plan: "01"
subsystem: ui-components
tags: [md3, floating-label, aria, accessibility, debt]
dependency_graph:
  requires: []
  provides: [TextFieldMD3, MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT, FieldRenderer-aria-fix]
  affects: [FieldRenderer, PasswordField, RemoteConfigStep.test]
tech_stack:
  added: []
  patterns: [css-peer-floating-label, aria-label-direct, md3-button-constants]
key_files:
  created:
    - src/components/ui/TextFieldMD3.tsx
    - src/components/ui/TextFieldMD3.test.tsx
    - src/styles/md3-buttons.ts
    - src/components/ui/FieldRenderer.test.tsx
  modified:
    - src/components/ui/FieldRenderer.tsx
    - src/components/ui/PasswordField.tsx
    - src/components/wizard/RemoteConfigStep.test.tsx
decisions:
  - "Used peer-[:not(:placeholder-shown)] arbitrary variant for has-value floating label detection (Tailwind v4 supports bracket syntax)"
  - "TextFieldMD3 uses placeholder=' ' (space) to drive CSS-only floating label, not JS state"
  - "Updated RemoteConfigStep.test.tsx getByLabelText to add { selector: 'input' } to prevent matching tooltip button aria-labels (Rule 1 regression fix)"
metrics:
  duration_seconds: 381
  completed_date: "2026-04-01"
  tasks_completed: 2
  tasks_total: 2
  files_created: 4
  files_modified: 3
---

# Phase 9 Plan 01: MD3 UI Primitives Summary

**One-liner:** CSS-only floating label TextFieldMD3 component + MD3 button class constants + DEBT-01 aria-label consistency fix across FieldRenderer, PasswordField, and tooltip buttons.

## Tasks Completed

| Task | Name | Commit | Status |
|------|------|--------|--------|
| 1 | Create TextFieldMD3 + MD3 button constants | 9441dcd | Complete |
| 2 | Fix DEBT-01 aria-label in FieldRenderer + tests | 532a994 | Complete |

## Verification

- `npx vitest run src/components/ui/TextFieldMD3.test.tsx` — 9/9 tests pass
- `npx vitest run src/components/ui/FieldRenderer.test.tsx` — 4/4 tests pass
- `npx vitest run --reporter=dot` — 179/179 tests pass (zero regressions)
- `src/styles/md3-buttons.ts` exports `MD3_BTN_FILLED`, `MD3_BTN_OUTLINED`, `MD3_BTN_TEXT`

## Decisions Made

1. **Tailwind v4 `peer-[:not(:placeholder-shown)]` arbitrary variant:** Used the bracket syntax form directly — verified it passes through the test suite correctly. No need for the `data-has-value` JS fallback.

2. **`placeholder=" "` (space) for floating label:** TextFieldMD3 always renders with `placeholder=" "` and `placeholder-transparent` CSS. This is the CSS-only detection mechanism for the `:not(:placeholder-shown)` pseudo-class — no React state needed.

3. **`{ selector: 'input' }` added to RemoteConfigStep.test.tsx:** Once tooltip buttons received `aria-label="More info about {field.label}"`, the `getByLabelText(/sas url/i)` query matched both the input (via its `<label>` association) and the tooltip button (via its `aria-label`). Fixed by scoping the query to `{ selector: 'input' }` in 6 call sites. This is correct behavior — the tests were too broad before.

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Test regression from DEBT-01 aria-label fix**
- **Found during:** Task 2, after fixing FieldRenderer.tsx
- **Issue:** `getByLabelText(/sas url/i)` in RemoteConfigStep.test.tsx started matching both the PasswordField input (via label association) AND the new tooltip button `aria-label="More info about SAS URL"`, causing "Found multiple elements" errors in 9 tests.
- **Fix:** Added `{ selector: 'input' }` option to 6 `getByLabelText` call sites in RemoteConfigStep.test.tsx that queried fields with tooltip buttons. This scopes the accessible name lookup to input elements only.
- **Files modified:** `src/components/wizard/RemoteConfigStep.test.tsx`
- **Commit:** 532a994 (included in Task 2 commit)

## Self-Check: PASSED