2b - Design System — Complex Components & Validation
Contractor: TBA
Main Contact: TBA
Start date: 1 February 2027
End data: 30 April 2027
Abstract
The stable versioned release transforms the design system from a project deliverable into a living community asset. With a versioning policy and contribution guide in place, the Joomla project can maintain and extend the system in future major versions without starting from scratch. This is the foundation that makes the accessibility improvements from this programme durable beyond the 20-month funded period.
Milestone 2b depends directly on the design tokens, core components, and the initial alpha release produced in Milestone 2a, and on the test protocols and acceptance criteria established in Milestone 1a.
Scope of Work
Deliverable 1: Complex Accessible UI Components
Design and implement the comprehensive accessible UI components that complete the full component set:
- Dialogs and modals
- Menus (navigation and dropdown)
- Tabs
- Accordions
- Sortable tables
- Toast notifications
- Pagination
- Tree views
Each component must implement proper focus management, including focus trapping where required, together with ARIA attributes, keyboard interactions, and labelling in accordance with WAI-ARIA Authoring Practices. All components must support RTL layouts, responsive mobile behaviour, and reduced-motion preferences.
Deliverable 2: Documentation and Examples for the Full Component Set
Complete the documentation and example pages for all components in the full design system, covering both the core components from Milestone 2a and the complex components from this milestone. For every component, the documentation must show:
- Correct usage
- Accessibility requirements
- Common mistakes to avoid
Deliverable 3: Stable Versioned Package on GitHub
Publish the design system as a stable versioned package on GitHub that both Joomla core and third-party extensions can use. The package must include:
- A change-log
- A versioning policy
- A contribution guide
These artefacts must support long-term maintenance by the community after the funded programme ends.
Deliverable 4: Guided-Tour Readiness
Ensure all design-system components are Guided-Tour-ready, meaning they expose stable landmarks, labels, and states that can be reliably targeted by onboarding and help systems without breaking accessibility.
Deliverable 5: Full Validation and Regression Pass
Validate all components, core (from Milestone 2a) and complex (from this milestone), against the test protocols and the AT/browser combinations defined in Milestone 1a (minimum matrix: NVDA + Chrome, JAWS + Edge, VoiceOver + Safari). A full regression-testing pass must be run across the complete component set, and results recorded against the acceptance criteria for each component.
Deliverable 6: Documentation and Milestone Report
Maintain the programme documentation framework and produce the milestone completion report in the format agreed at kick-off.