Context
The usage meter in apps/desktop-tauri/src/surfaces/tray/UsageBar.tsx:26 is a visual progress bar (usage-bar__track / usage-bar__fill) with a percentage next to it, but it exposes no ARIA semantics. Screen readers can't announce it as a meter.
Task
Add role="progressbar" with aria-valuenow, aria-valuemin={0}, aria-valuemax={100}, and an aria-label (include the label prop when present) to the track element.
Acceptance criteria
- The track div reports
role="progressbar" and the current clamped percentage via aria-valuenow.
aria-label is meaningful (e.g. "{label} usage: 72%"), falling back gracefully when label is undefined.- A short test in a new
UsageBar.test.tsx asserts the role and aria-valuenow for a sample window.
- No visual change.
How to test
pnpm --dir apps/desktop-tauri test
Pointers
- Component:
UsageBar.tsx. Note pct is already clamped to 0–100; rawPct is the unclamped percent for the label.
Context
The usage meter in
apps/desktop-tauri/src/surfaces/tray/UsageBar.tsx:26is a visual progress bar (usage-bar__track/usage-bar__fill) with a percentage next to it, but it exposes no ARIA semantics. Screen readers can't announce it as a meter.Task
Add
role="progressbar"witharia-valuenow,aria-valuemin={0},aria-valuemax={100}, and anaria-label(include thelabelprop when present) to the track element.Acceptance criteria
role="progressbar"and the current clamped percentage viaaria-valuenow.aria-labelis meaningful (e.g."{label} usage: 72%"), falling back gracefully whenlabelis undefined.UsageBar.test.tsxasserts the role andaria-valuenowfor a sample window.How to test
Pointers
UsageBar.tsx. Notepctis already clamped to 0–100;rawPctis the unclamped percent for the label.