Testing

Test your design system implementation and custom components so they work correctly across devices, browsers, and for all users, including those using assistive technologies.

What to test

Visual consistency — Components and pages look correct and match the design system. Spacing, colors, and typography use the right tokens.
Responsive behavior — Layouts adapt at the design system breakpoints (e.g. 768px, 1024px). No horizontal scroll on small screens; content is readable and usable. See Breakpoints.
Accessibility — Keyboard navigation, focus order, and focus visibility work. Screen readers can understand the content. Color contrast meets requirements. See Accessibility.
Localization — If you support Amharic or other languages, text displays correctly and direction is set where needed. See Ethiopian localization.

How to test

Manual checks

Resize the browser window or use device emulation to verify layouts at different widths.
Use only the keyboard (Tab, Enter, Escape) to navigate and activate controls.
Test with a screen reader (e.g. built-in or browser extension) to ensure labels and structure are announced correctly.
Check contrast with a contrast checker; fix any failing combinations.

Browsers and devices

Test in the browsers and devices your users actually use. Include at least one desktop and one mobile browser. Ensure forms, buttons, and navigation work in all of them.

Before submitting a contribution

If you’re contributing to EthioWDS:

Run the project locally and confirm your changes don’t break existing pages or components.
Test new or changed components at different viewport sizes and with keyboard and screen reader.
Update documentation if you add or change a component or token.

See Contributing for the full process.