Merge pull request #6118 from Armanio/fix/a11y_reports_key

Addon-a11y: added 'name' param for generate unique key for item
storybookjs · Mar 16, 2019 · 59582f5 · 59582f5
2 parents c570059 + af0ea7e
commit 59582f5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
@@ -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."
+                    />
                   ),
                 },
               ]}

diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx
@@ -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>
     )}

diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -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