A11y Addon - support request

[jowan]

Is your feature request related to a problem? Please describe. I can not seem to use addon-a11y with my wingsuit components. I have tried adding the addon and config as described on the storybook documentation, but it does not seem to work for wingsuit components, presumably because of the use of component.wingsuit.yml and wingsuit's wrapping ? Note - I'm using $ yarn dev:storybook rather than a compiled storybook from dist.

Describe the solution you'd like I want to be able to use @storybook/addon-a11y in my project Specifically, I want to use accessibility testing in my wingsuit components. It would be great if component.wingsuit.yml could handle this the way it handles control variants, failing that - some documentation on how to integrated this very popular addon.

Have you achieved this ? I am probably missing something and would appreciate the help. I suppose another question is how you use Decorators or Addons with wingsuit ?

Great work though - I evaluated Emulsify recently for Drupal and this worked better for me - thanks !

[jowan]

Don't worry - got it working, I did need to rebuild, just running storybook was not enough maybe ? For others:

in my main.js

const wingsuitCore = require('@wingsuit-designsystem/core');

module.exports = {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    '@storybook/addon-a11y/register',
  ],
  webpackFinal: (config) => {
    const final = wingsuitCore.getAppPack(wingsuitCore.resolveConfig('storybook'), [config]);
    return final;
  },
};

and in my testcomp.stories.jsx

import React from 'react';
import 'organisms/testcomp';
import { RenderTwig } from '@wingsuit-designsystem/storybook';

const testcompTemplate = require('./testcomp.twig');

export default {
  title: 'Organisms/Testcomp',
  parameters: {
    a11y: {
      manual: true,
    },
  },
};

export const Testcomp = () => <RenderTwig data={testcompTemplate} />;