Configurable checks at build-time

Description

As you know, currently the plugin has the following checks enabled by default: Landmarks, Headings, Alternative text, Contrast, Color, Text resizing, Responsive reflow, Touch target and Complex gestures.

Why

Why is this change important to you? How would you use it?

My design system already takes care of most of these checks. So, I would only like to provide my Figma users (usually product designers) the following checks: Landmarks, Headings and Alternative text.

How can it benefit other users?

• Reduced mental overhead: Lesser checks make it easy for Figma users (usually product designers) to quickly annotate their designs.
• Explicit Control: Simplifies enabling specific checks.
• Improved Performance: Avoids rendering unnecessary checks.
• Ease of Use: Clear and maintainable configuration.

Possible Implementation & Open Questions

Introduce an enabledChecks key in a configuration file to explicitly list the checks (or pages) to render. Checks not listed will be skipped.

Example Configuration

{
  "enabledChecks": ["landmarks", "headings", "alt-text"]
}

Implementation

Filter routes in App based on enabledChecks:

const routeData = {
  landmarks: { path: "/", component: Landmarks },
  headings: { path: "headings", component: Headings },
  altText: { path: "alt-text", component: AltText },
  // ... etc.
};

const filteredRoutes = Object.keys(routeData).filter((key) =>
  config.enabledChecks.includes(routeData[key].path)
);

<Routes>
  {filteredRoutes.map((routeKey) => {
    const { path, component: Component } = routeData[routeKey];
    return <Route key={path} path={path} element={<Component />} />;
  })}
</Routes>

Is this something you're interested in working on?

Yes, I can put together a pull request, if you folks agree to the general idea. I’m open to any feedback that you may share. Thanks!