QuantityStepper: spinbutton has no keyboard handler of its own #8

The Back Bar Design System/components/inventory/QuantityStepper.jsx exposes its value as role="spinbutton" with tabIndex={0}, but the arrow-key handler lives on the wrapping <div role="group"> via onKeyDown. React's synthetic events bubble, so it happens to work today — but the contract is wrong: the element that claims the spinbutton role does not own its own keyboard behaviour, and it is missing aria-label and aria-valuetext.

The design system's accessibility floor states that steppers are fully keyboard operable, and the component's own doc comment says "Fully keyboard operable", so this is a stated guarantee resting on event bubbling rather than on the element itself.

Low urgency: nothing in src/ renders this component today. Worth fixing before any screen adopts it — bottle-level "volume remaining" is the likely first consumer, and docs/spec/frontend-spec.md §8 lists it as post-MVP.

Suggested: move onKeyDown onto the spinbutton element, add aria-label (or accept one as a prop), and set aria-valuetext when unit is present so screen readers announce "3 bottles" rather than "3".

Found during the UX audit (2026-09-02) alongside PR #6. Noted in the design system readme under Revisions as not yet addressed.