Storybook: Unable to use configureA11y

[bertho-zero]

I'm using the latest version of storybook and I can not configure axe for the addon a11y. I have tried all possible combinations from the axe doc and it has no effect.

Storybook: 4.0.0-rc.0

.storybook/config.js

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { checkA11y, configureA11y } from '@storybook/addon-a11y';

function importAll( req ) {
  req.keys()
    .forEach( filename => req( filename ) );
}

function loadStories() {
  importAll( require.context( './stories', true, /\.stories\.js$/ ) );
}

if ( process.env.NODE_ENV === 'development' ) {
  // eslint-disable-next-line global-require
  const { whyDidYouUpdate } = require( 'why-did-you-update' );
  whyDidYouUpdate( React );
}

configureA11y( {
  rules: [],
  runOnly: {
    type: 'tags',
    values: {
      include: []
    }
  }
} );

addDecorator( checkA11y );

addDecorator(
  withOptions( {
    selectedAddonPanel: 'storybook/stories/stories-panel'
  } )
);

configure( loadStories, module );

[bertho-zero]

I found a workaround, I need to install axe-core then:

configureA11y( {
  rules: getRules( [ 'wcag2a', 'section508', 'best-practice' ] ).map( v => ( { id: v.ruleId, ...v } ) ),
  disableOtherRules: true
} );

My goal is to choose the rules to test, for that I make a getRules but I have to make a map on it to add the id property.

We should be able to do this more neatly.

[bertho-zero]

The problem is still there.

[donaldpipowitch]

axe has actually two ways to configure which rules should be used. In your initial example you used an options object in the shape of { runOnly: {}, ... }. This one is documented here and needs to be passed as a second argument to axe.run on this line:

https://github.com/storybooks/storybook/blob/f8feb013b8e74835dbd076a09ef1d45bec91749f/addons/a11y/src/index.js#L23

As you can see there is no 2nd param so it is currently not possible to use { runOnly: {}, ... } in @storybook/addon-a11y. (I tried the same thing and struggle with it.)

What you can configure with import { configureA11y } from '@storybook/addon-a11y'; is the options object which will be passed to axe.configure and which is documented here.

---

I personally would propose to offer a new API to help with that:

import { configureRunOptions } from '@storybook/addon-a11y';

configureRunOptions({
  runOnly: {
    type: 'tag',
    values: ['wcag2a']
  }
});

Instead of this:

import { configureA11y } from '@storybook/addon-a11y';
import axe from 'axe-core';

configureA11y({
  rules: axe
    .getRules(['wcag2a'])
    .map((v) => Object.assign({ id: v.ruleId }, v)),
  disableOtherRules: true
});

---

Not sure what the maintainers think about this new API? @ndelangen , what is your opinion?

[shilman]

@donaldpipowitch that looks much cleaner to me. Mind putting together a PR, either to document the configuration, or to add your new API and deprecate the old API?

[donaldpipowitch]

and deprecate the old API?

I'm not super familiar with aXe, but I think we'd need to keep both APIs, because they slightly configure different things. E.g. with axe.configure(options) you can set a locale, but not with axe.run(_, options).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

There's a new release on the next NPM tag that is supposed to address this. Mind giving it a try and reporting back?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!