What are the Design Ops tooling we need to establish for Theme Builder

[PaulaPaul]

Best practices for design and accessibility testing tooling and how they can be used to contribute to this project. Best practices for evaluating accessibility of existing experiences and creating new accessible experiences.

Consider mobile and web -

[PaulaPaul]

@lwnoble @kburk1997 - tooling for testing and design to help contributors

Penpot, Storybook, Chromatic, Anima, ... please comment here so that we can create a comprehensive list of tooling that can help our community evaluate and implement accessible solutions

[kburk1997]

Testing:

• Accessibility Insights for Web - free Chrome/Edge extension that contains automated, guided, and manual test abilities. Very comprehensive - lots of tests that are available for free and it has a GitHub integration too that makes it easy to file issues. There is also tooling available for Windows + Android apps.
• axe-devtools - freemium offering - Chrome extension with only automated tests are free. axe API is free up to a point - its Developer Hub offering is paid. Also has mobile offerings.
• @storybook/addon-a11y - Storybook accessibility plugin - runs automated checks using axe api

Linting:

• axe-linter - VSCode extension free, GitHub actions integration paid
• eslint-plugin-jsx-a11y - plugin for ESLint - allows us to catch common accessibility issues + extend the configuration to map Material UI elements to HTML elements

For Designers:

• axe for Designers - contains accessibility annotations + auto scan functionality
• Stark - color contrast tool for designers - includes a lot more than just color contrast, including functionality for developers
• Web Accessibility Annotation Kit - accessibility annotations toolkit for Figma from CVS Health

[kburk1997]

Integration Testing:

• Cypress - offers an OSS Plan for open source projects for its premium offering, but basic functionality is also free
  • Beta Cypress Accessibility offering that has a waitlist
  • Accessibility testing can be achieved using plugins such as:
  • [axe Developer Hub]() - axe offering that can integrate an accessibility scan into all Cypress tests
  • cypress-axe - barebones integration with axe api
  • cypress-audit - not up to date but does let you run Pa11y or Lighthouse
• Playwright - free open source offering
  • Playwright guide for automated accessibility testing
• Selenium WebDriver - multiple language bindings for browser automation
  • Accessibility testing can also be done using 3rd party plugins like axe-selenium-java
  • Very barebones compared to Cypress + Playwright

[kburk1997]

Regarding unit testing - #854 introduces Jest as a proposed unit testing framework. I did find a plugin that runs axe-core in Jest, so that could be an avenue for integrating automated tests:

• jest-axe

However, since axe-core is so DOM-heavy, it may need to be done as part of the integration testing layer using Cypress or Playwright.