Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: adding aXe configuration for a11y addon #3285

Merged
merged 4 commits into from
Mar 27, 2018

Conversation

wuweiweiwu
Copy link
Member

Issue: #2830

What I did

Added an extra export function configure to the a11y addon for users to configure aXe

usage:

import React from 'react';
import { storiesOf } from '@storybook/react';

import { checkA11y, configure } from '@storybook/addon-a11y';

const whateverConfigYouWant = {};

configure(whateverConfigYouWant);

storiesOf('button', module)
  .addDecorator(checkA11y)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));

How to test

I used the official storybook to test configuring axe.

Is this testable with jest or storyshots?
N
Does this need a new example in the kitchen sink apps?
N
Does this need an update to the documentation?
Y
If your answer is yes to any of these, please make sure to include it in your PR.

@wuweiweiwu wuweiweiwu changed the title adding axe configuration for a11y addon Feature request: adding axe configuration for a11y addon Mar 26, 2018
@wuweiweiwu wuweiweiwu changed the title Feature request: adding axe configuration for a11y addon Feature request: adding aXe configuration for a11y addon Mar 26, 2018
}

export { checkA11y, shared };
function configure(options = {}) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

configure is a too generic name. Please rename it to the configureA11y.

@codecov
Copy link

codecov bot commented Mar 27, 2018

Codecov Report

Merging #3285 into master will decrease coverage by 0.03%.
The diff coverage is 25%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3285      +/-   ##
==========================================
- Coverage   36.09%   36.05%   -0.04%     
==========================================
  Files         445      445              
  Lines        9783     9793      +10     
  Branches      902      890      -12     
==========================================
  Hits         3531     3531              
- Misses       5669     5707      +38     
+ Partials      583      555      -28
Impacted Files Coverage Δ
addons/a11y/src/index.js 0% <0%> (ø) ⬆️
addons/a11y/src/A11yManager.js 0% <0%> (ø) ⬆️
addons/a11y/src/components/WrapStory.js 54.09% <60%> (-7.02%) ⬇️
lib/core/src/client/preview/syncUrlWithStore.js 40.9% <0%> (ø) ⬆️
addons/jest/src/components/Indicator.js 0% <0%> (ø) ⬆️
app/react/src/client/preview/error_display.js 54.54% <0%> (ø) ⬆️
lib/ui/src/libs/key_events.js 33.96% <0%> (ø) ⬆️
...ents/stories_panel/stories_tree/tree_decorators.js 34.37% <0%> (ø) ⬆️
addons/a11y/src/components/Report/Item.js 0% <0%> (ø) ⬆️
... and 63 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4cab8d0...0d40d95. Read the comment docs.

@wuweiweiwu wuweiweiwu force-pushed the issue-2830 branch 3 times, most recently from 1744e56 to 26e430e Compare March 27, 2018 18:21
@wuweiweiwu
Copy link
Member Author

@igor-dv @Hypnosphi updated :)

@Hypnosphi Hypnosphi merged commit 108af01 into storybookjs:master Mar 27, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants