Each component is tested against the following items to guage the component's maturity. Use this list to understand how to test the component and when to make a checklist item 'Not applicable'.
All Axe and Storybook plugins for WCAG AA compliance have passed.
Should not be used.
Code is checked with the Axe Core plugin (external link) that finds on average 57% of WCAG issues automatically. You can see the complete list of rules that are checked in the rules descriptions (external link).
You can use Storybook to test for WCAG violations and color blindness filters.
Run yarn test:a11y
While using FCM the components text is legible and improves readability.
Should not be used.
In Forced Color Mode (FCM) in Windows, verify in Edge, Chrome, and Firefox that:
- All background colors are reset to a single color.
- All elements that need a border have one.
- All SVG elements and icons have a contrast color applied.
- Color is not the only means used to convey meaning with elements.
- Focus styles are clearly indicated.
The full suite of visual regression tests takes screenshots of what each component looks like in forced-colors mode. One can also turn on forced-colors mode in browser developer tools (external link). They should be reviewed by the team to determine if the component meets the above criteria.
Meets AA color contrast standards for accessibility and color blindness.
Should not be used.
Code is verified for color contrast using the Axe Core plugin.
Color blindness is tested using a color blindness simulator and visually inspected for:
-
Elements with low color contrast
-
Text readability
-
Link visibility
-
Errors and warnings that might rely on color
-
Code - Run
yarn test:a11y -
Design - Designs are verified using a plugin within Sketch to check color contrast and color blindness.
VoiceOver, NVDA, and JAWS were used to test for concise communication and interaction.
When the component has no interactive elements like a button or text input a 'Not applicable' state can be applied.
Testing is a manual process and takes some time to understand how screen readers work. Use the instructions provided in the Accessibility Champions guidance (Google docs) to learn how to use a screen reader. Deque University also provides some guidance and demos on how to use a screen reader (external link).
Components are tested in the following screen readers:
- Mac OS -- Safari + VoiceOver
- Windows -- NVDA + Edge -- JAWS + Edge -- iOS + Safari + Mobile VoiceOver (as time permits)
Component is fully navigable with a keyboard.
When the component has no interactive elements like a button or text input a 'Not applicable' state can be applied.
Keyboard navigation is tested using this keyboard acceptance criteria (Confluence document).
Use this guidance from WebAIM (external link) to navigate components using a keyboard.
Component has stories to cover all defined props.
Should not be used.
Storybook (external link) is an open-source tool for building components in isolation that is public to all Design System users.
Manually interact with the Storybook stories and make sure that all defined props are in some way tested by our storybook story and that the meaningful ones can be changed. Specifically,
- Event handlers have visible output through Actions or logging
- Visual and content props can be changed, as long as the prop can be easily changed with standard Storybook controls
- Alternate stories exist for complex component configurations that are common
Component designed to work in all responsive breakpoints and allow users to zoom (scale) up to 400% at a 1280px browser width.
Should not be used.
View in all supported breakpoints (internal link) in the CMSDS with Storybook controls (internal link) or with browser dev tools.
To test zoom levels, use browser dev tools to zoom your browser to a 400% zoom level.
- Content should not overlap, or force users to scroll horizontally
- All content should still be available.
Includes Spanish translations for default text content.
When the component has no text to apply a translation to.
Read more about Internationalization (internal link) in the CMSDS.
Changing the language in the Storybook controls (internal link) should change all English content that isn’t provided through a prop
Includes all Sketch symbols for defined options.
When the component is a utility with no visual element.
Verify with code that all props and options that can be used in code have an equal option in Sketch.
All Sketch symbols designed for small and large breakpoints.
When there are no visual elements to the component.
Verify that the small and large breakpoints (internal link)in the Sketch symbols match the responsive components in code.
Tokens implemented in code.
When there are no styles that tokens can be applied to.
Look at the style rules for this component and check that token variables are used for the kinds of tokens we already have defined, like color, spacing, font size, etc.
Tokens implemented in the Sketch.
When there are no styles that tokens can be applied to.
Open Sketch and click through each element to view styles being used and make sure the styles are linked to tokens in the theme files.