Component creation checklist

As part of creating a component, what should I consider?

Accessibility:

• Font sizes
• Color contrast - Is your component usable for someone with poor eyesight?
• Color usage - Does your component have the same meaning to a color blind person?
• Alt-text - how would a screen reader process your component?

Localization:

• Translations
• Right-to-left support
• Non-latin scripts
• Timezones
• Date-time-formats
• Sorting and string comparison
• Calendar differences
• Currency formatting
• Number formatting
• Address formatting
• Unit of measure

Mobile support:

• How does your component work on a phone or tablet?
• How does your component work with touch events?

Aside support:

• How does your component work when contained within an aside?
• How does your component work when contained within a full-screen modal?

Documentation:

• How to use the component to build apps
• Acceptable / unacceptable design patterns for use of said component

Error handling:

• What happens when something goes wrong?
• What happens when there's no internet connection?
• Ensure your error messages and error handling is consistent with the rest of the component library / product

Icon consistency:

• Ensure your icon usage is consistent with the rest of the component library / product

Keyboard support:

• How might a power user interact with your component / interface?