Add react-axe as plugin to Storybook

[vepor]

Because of a11y reasons, it would be great to add react-axe as accessibility checker for both the production and development build.

[sanskar-p]

Hi @vepor, I'd like to try my hands at this issue. I'm planning on referring to this link. What do you think?

[vepor]

Hey @sanskar-p 👋

We are already using eslint-plugin-jsx-a11y for the @kiwicom/orbit-components, but feel free to get your hands on react-axe and integrate it with storybook! 🙂

[sanskar-p]

@vepor, can you give me some advice on how to do that?

[vepor]

What we want to do here is to add the react-axe to be loaded with the storybook.
This can be easily implemented into preview.js file.

It can be implemented as a addon or just used with normal import.

Let me know @sanskar-p if will do this, otherwise somebody else or our core team can handle it.

[sanskar-p]

@vepor, will it work to just insert this codeblock into preview.js?

var React = require('react');
var ReactDOM = require('react-dom');

if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe');
  axe(React, ReactDOM, 1000);
}

Found it here

[vepor]

Yes, it should @sanskar-p 🙂

Also it seems that react-axe is deprecated, so it would be better to use @axe-core/react instead, so we will get updates in the future.

[aalises]

@sanskar-p also, you can use ES6 syntax, e.g.

import { addDecorator, addParameters } from "@storybook/react";
import * as React from "react";
import * as ReactDOM from "react-dom";

import "loki/configure-react";
import orbitTheme from "./orbitTheme";
import orbitDecorator from "./orbitDecorator";

if (process.env.NODE_ENV !== "production") {
  import("@axe-core/react").then(axe => axe(React, ReactDOM, 1000));
}

[mainframev]

Also check this addon-a11y. It has axe under the hood

[tbergquist-godaddy]

Also check this addon-a11y. It has axe under the hood

This is probably the best choice 🙂 It seems to be better adapted for storybook.