Accessibility

Accessibility is part of the definition of done of every component, as in a real company workflow.

Techniques used in the project

• Semantic HTML: header, nav, main, section, footer; definition lists (dl/dt/dd) for metrics; real button elements for actions and RouterLink for navigation.
• Live feedback: loading, success and empty states use role="status" and errors use role="alert"; containers being refreshed are marked with aria-busy.
• Forms: every field has a label; invalid fields get aria-invalid and are linked to their error message with aria-describedby; on submit, focus moves to the first invalid field.
• Keyboard focus on mobile: the focused field is kept visible when the virtual keyboard opens (useKeepFocusedFieldVisible).
• Dialogs: the confirmation dialog uses aria-modal and is labeled with aria-labelledby.
• Menus and toggles: the user and mobile menus expose aria-haspopup, aria-expanded and aria-controls; toggle buttons (order channel, category filters, voice dictation) use aria-pressed; the current admin section uses aria-current.
• Icon-only buttons: have an aria-label describing the action; decorative icons use aria-hidden="true".
• Voice input: dictation is an optional alternative — every field can still be typed.
• Disabled states: real disabled attributes, not just styles.
• Color: text/background combinations from the design system follow WCAG AA contrast; states are never communicated by color alone.

---

Responsive Design

The layout is mobile-first and built with Flexbox and CSS Grid (Tailwind utilities).

Breakpoint	Width	Changes
Mobile	< 640px	Single column, compact paddings
Small (sm)	≥ 640px	Wider paddings, grids start using more columns
Tablet	< 1024px	Smaller headings (h1 32px, h2 24px)
Desktop	≥ 1024px	Full-size headings, max container width 1200px
Extra large (xl)	≥ 1280px	Full navigation in the header; below this width it collapses into the mobile menu (MobileNavMenu)

• Minimum supported width: 320px.
• The delivery dashboard is designed mobile-first, since drivers use it from their phones.
• The kitchen order list has its own responsive tests (KitchenOrderList.responsive.test.js).

---