Problem Solving & Design C

The interaction model is clean and well-structured, but several accessibility fundamentals — labelled controls, ARIA roles, and semantic landmarks — are missing or incomplete.

• +A live region announcer provides screen-reader feedback when a cocktail is selected or an ingredient is toggled, giving keyboard and AT users audible confirmation.
• +Ingredient buttons carry aria-pressed reflecting their toggled state, which correctly communicates the binary missing/not-missing state to assistive technology.
• -The drink-picker buttons also use aria-pressed but are grouped inside a <nav>, mixing navigation semantics with toggle-button semantics in a way that may confuse screen readers.
• -The ingredient group uses role="group" but has no visible or programmatic label connecting it to the cocktail name, so its accessible name depends solely on the aria-label attribute which repeats the heading text redundantly.
• -The swap card is rendered as a <section> with only an eyebrow <h2>, but there is no aria-live region around it, so screen readers are not notified when substitution content changes.

Completeness B

Core feature set is fully delivered — seven cocktails, tappable chips, swap cards — but the app has no error states, no empty-state handling, and no loading indicators.

• +Switching cocktails clears the missing-ingredient state, so the one-at-a-time constraint is enforced across drink changes.
• -There is no empty state rendered when a cocktail has no ingredients — the ingredients container simply renders nothing, with no message to the user.
• -No error boundary or fallback exists if getCocktail returns the default cocktail[0] silently — the user sees no indication that something went wrong.
• -There is no input validation on the data-cocktail or data-ingredient values before they are passed to state functions — invalid dataset values are silently ignored rather than surfaced.

Technical Craft B+

The codebase is well-structured with typed interfaces, pure state functions, and a passing test suite covering edge cases, all backed by a clean module split.

• +State transitions are implemented as pure functions returning new objects, making the logic easy to test and reason about in isolation.
• +The test suite covers unknown-id safety, toggle-off behaviour, and cocktail-switch clearing, providing meaningful behavioural coverage of the model.
• +CSS custom properties define the colour palette and spacing once, and per-drink accent colours are applied via a single --drink-accent variable updated at render time.
• +The reduced-motion media query disables all animations and transitions for users who prefer it, applied globally via a single rule block.