GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5984 from Armanio/feat/a11y_incomplete

Browse Source 
feta(a11y): add 'incomplete' tab
This commit is contained in:
Michael Shilman 2019-03-09 22:47:12 +08:00 committed by GitHub
commit 1756f62740
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
addons/a11y/src/components/A11YPanel.tsx
View File

@ -32,10 +32,15 @@ const Violations = styled.span(({ theme }) => ({
color: theme.color.negative,
}));
const Incomplete = styled.span(({ theme }) => ({
color: theme.color.warning,
}));
interface A11YPanelState {
status: string;
passes: Result[];
violations: Result[];
incomplete: Result[];
}
interface A11YPanelProps {
@ -52,6 +57,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
status: 'ready',
passes: [],
violations: [],
incomplete: [],
};
componentDidMount() {
@ -77,12 +83,13 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
api.off(EVENTS.RESULT, this.onUpdate);
}
onUpdate = ({ passes, violations }: AxeResults) => {
onUpdate = ({ passes, violations, incomplete }: AxeResults) => {
this.setState(
{
status: 'ran',
passes,
violations,
incomplete,
},
() => {
setTimeout(() => {
@ -113,7 +120,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
};
render() {
const { passes, violations, status } = this.state;
const { passes, violations, incomplete, status } = this.state;
const { active } = this.props;
let actionTitle;
@ -147,7 +154,13 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
},
{
label: <Passes>{passes.length} Passes</Passes>,
panel: <Report passes items={passes} empty="No a11y check passed" />,
panel: <Report passes items={passes} empty="No a11y check passed." />,
},
{
label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
panel: (
<Report passes={false} items={incomplete} empty="No a11y incomplete found." />
),
},
]}
/>

5
examples/cra-kitchen-sink/.storybook/config.js
View File

@ -1,5 +1,8 @@
import { configure, addParameters } from '@storybook/react';
import { configure, addParameters, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y);
addParameters({
options: {
name: 'CRA Kitchen Sink',