QA Checklist Quality of Components

✔ #1 Visual Quality

Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variable tokens?

✔ #2 Sufficient States & Variations

Does it cover all the necessary variations (primary, secondary, flat, menu button) and states (default, hover, active, disabled), given intended scope?

image

A first pass may not comprehensively addressing states across all button types…

✔ #3 Responsiveness

Does it incorporate responsive display patterns and behaviors as needed?

image

Tab component, with options for responsive behavior

✔ #4 Content Resilience

Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? For tabs, how long can labels be, and what happens when you run out of space?

image

Tab component, automatically shifting to alternate display based on content length

✔ #5 Composability

Does it fit well when placed next to or layered with other components to form a larger composition? For tabs, how can they be applied stacked with or on top of other components?

image

Tabs in different settings, positioned stacked after or on top of a photograph

✔ #6 Functionality

Do all behaviors – typically, JavaScript-driven – function as expected? For responsive tabs, are gestures (for sliding left and right) and menus (for overflow tabs) behaving correctly in varied device settings?

✔ #7 Accessibility

Has the design and implementation accounted for accessible:

  • color contrast
  • ARIA
  • print versions
  • disabled CSS
  • svg and img attributes
  • descriptive headers
  • keyboard navigability, …

The list goes on, and could be augmented by testing with a screen reader like ChromeVox.

✔ #8 Browsers & Device Compatibility

Has the component visual quality and accuracy been assessed across Safari, Chrome, Firefox, IE and other browsers across relevant devices?

✔ Usability Testing EXTRA CREDIT

Has the component design been assessed via usability testing with our customers, whether conducted for a product team or by our system team?