fix(a11y): a11y each report has 'name' param for generate unique key for item

@see https://github.com/storybooks/storybook/issues/6107
This commit is contained in:
Arman Sargsyan 2019-03-16 00:47:43 +03:00
parent 7b261dbb1a
commit af0ea7e8b4
3 changed files with 22 additions and 5 deletions

View File

@ -165,17 +165,29 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
{
label: <Violations>{violations.length} Violations</Violations>,
panel: (
<Report passes={false} items={violations} empty="No a11y violations found." />
<Report
name="violations"
passes={false}
items={violations}
empty="No a11y violations found."
/>
),
},
{
label: <Passes>{passes.length} Passes</Passes>,
panel: <Report passes items={passes} empty="No a11y check passed." />,
panel: (
<Report name={'passes'} 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." />
<Report
name="incomplete"
passes={false}
items={incomplete}
empty="No a11y incomplete found."
/>
),
},
]}

View File

@ -8,12 +8,13 @@ export interface ReportProps {
items: Result[];
empty: string;
passes: boolean;
name: string;
}
export const Report: FunctionComponent<ReportProps> = ({ items, empty, passes }) => (
export const Report: FunctionComponent<ReportProps> = ({ items, empty, passes, name }) => (
<Fragment>
{items.length ? (
items.map(item => <Item passes={passes} item={item} key={item.id} />)
items.map(item => <Item passes={passes} item={item} key={`${name}:${item.id}`} />)
) : (
<Placeholder key="placeholder">{empty}</Placeholder>
)}

View File

@ -962,6 +962,7 @@ exports[`A11YPanel should render report 1`] = `
"panel": <Unknown
empty="No a11y violations found."
items={Array []}
name="violations"
passes={false}
/>,
},
@ -973,6 +974,7 @@ exports[`A11YPanel should render report 1`] = `
"panel": <Unknown
empty="No a11y check passed."
items={Array []}
name="passes"
passes={true}
/>,
},
@ -984,6 +986,7 @@ exports[`A11YPanel should render report 1`] = `
"panel": <Unknown
empty="No a11y incomplete found."
items={Array []}
name="incomplete"
passes={false}
/>,
},
@ -1058,6 +1061,7 @@ exports[`A11YPanel should render report 1`] = `
<Component
empty="No a11y violations found."
items={Array []}
name="violations"
passes={false}
>
<Placeholder