From d1e8ccce824199e79ca5e17641e9fab80313f85f Mon Sep 17 00:00:00 2001
From: codebyalex <wilsonc.alexander@gmail.com>
Date: Thu, 11 Apr 2019 23:10:03 -0400
Subject: [PATCH] removed passes from props and used type to determine the
 badge needed

---
 addons/a11y/src/components/A11YPanel.tsx      |   3 -
 .../a11y/src/components/Report/Elements.tsx   |  10 +-
 addons/a11y/src/components/Report/Item.tsx    |   5 +-
 addons/a11y/src/components/Report/Rules.tsx   |  42 ++--
 addons/a11y/src/components/Report/index.tsx   |   5 +-
 .../__snapshots__/A11YPanel.test.js.snap      | 199 ++++++++++--------
 6 files changed, 151 insertions(+), 113 deletions(-)

diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
index 3f82b4899a3..5ca6069ce9f 100644
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@@ -175,7 +175,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Violations>{violations.length} Violations</Violations>,
                     panel: (
                       <Report
-                        passes={false}
                         items={violations}
                         type={RuleType.VIOLATION}
                         empty="No accessibility violations found."
@@ -188,7 +187,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Passes>{passes.length} Passes</Passes>,
                     panel: (
                       <Report
-                        passes
                         items={passes}
                         type={RuleType.PASS}
                         empty="No accessibility checks passed."
@@ -201,7 +199,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
                     panel: (
                       <Report
-                        passes={false}
                         items={incomplete}
                         type={RuleType.INCOMPLETION}
                         empty="No accessibility checks incomplete."
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
index 3dc1d345df1..d57192deffc 100644
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@@ -28,11 +28,10 @@ const HighlightToggleElement = styled.span({
 
 interface ElementProps {
   element: NodeResult;
-  passes: boolean;
   type: RuleType;
 }
 
-const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) => {
+const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
   const { any, all, none } = element;
   const rules = [...any, ...all, ...none];
   const highlightToggleId = `${type}-${element.target[0]}`;
@@ -51,21 +50,20 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) =>
           />
         </HighlightToggleElement>
       </ItemTitle>
-      <Rules rules={rules} passes={passes} />
+      <Rules rules={rules} type={type} />
     </Item>
   );
 };
 
 interface ElementsProps {
   elements: NodeResult[];
-  passes: boolean;
   type: RuleType;
 }
 
-export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes, type }) => (
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
   <ol>
     {elements.map((element, index) => (
-      <Element passes={passes} element={element} key={index} type={type} />
+      <Element element={element} key={index} type={type} />
     ))}
   </ol>
 );
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 0a5b784dc37..d1303153439 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -56,7 +56,6 @@ const HighlightToggleElement = styled.span({
 
 interface ItemProps {
   item: Result;
-  passes: boolean;
   type: RuleType;
 }
 
@@ -75,7 +74,7 @@ export class Item extends Component<ItemProps, ItemState> {
     }));
 
   render() {
-    const { item, passes, type } = this.props;
+    const { item, type } = this.props;
     const { open } = this.state;
     const highlightToggleId = `${type}-${item.id}`;
 
@@ -104,7 +103,7 @@ export class Item extends Component<ItemProps, ItemState> {
         {open ? (
           <Fragment>
             <Info item={item} key="info" />
-            <Elements elements={item.nodes} passes={passes} type={type} key="elements" />
+            <Elements elements={item.nodes} type={type} key="elements" />
             <Tags tags={item.tags} key="tags" />
           </Fragment>
         ) : null}
diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index 8d9b8ccdbc2..58d976a1436 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 import { Badge, Icons } from '@storybook/components';
 import { CheckResult } from 'axe-core';
+import { RuleType } from '../A11YPanel';
 
 const impactColors = {
   minor: '#f1c40f',
@@ -53,28 +54,45 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
 
 interface RuleProps {
   rule: CheckResult;
-  passes: boolean;
+  type: RuleType;
 }
 
-const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => (
-  <Item>
-    <BadgeWrapper>
-      <Badge status={passes ? "positive" : "negative"}>{rule.impact}</Badge>
-    </BadgeWrapper>
-    <Message>{rule.message}</Message>
-  </Item>
-);
+const Rule: FunctionComponent<RuleProps> = ({ rule, type }) => {
+  let badgeType = '';
+
+  switch(type) {
+    case RuleType.PASS:
+      badgeType = 'positive';
+      break;
+    case RuleType.VIOLATION:
+      badgeType = 'negative';
+    break;
+    case RuleType.INCOMPLETION:
+      badgeType = 'neutral';
+    break;
+    default:
+      break;
+  }
+  return (
+    <Item>
+      <BadgeWrapper>
+        <Badge status={badgeType}>{rule.impact}</Badge>
+      </BadgeWrapper>
+      <Message>{rule.message}</Message>
+    </Item>
+  );
+}
 
 interface RulesProps {
   rules: CheckResult[];
-  passes: boolean;
+  type: RuleType;
 }
 
-export const Rules: FunctionComponent<RulesProps> = ({ rules, passes }) => {
+export const Rules: FunctionComponent<RulesProps> = ({ rules, type }) => {
   return (
     <List>
       {rules.map((rule, index) => (
-        <Rule passes={passes} rule={rule} key={index} />
+        <Rule type={type} rule={rule} key={index} />
       ))}
     </List>
   );
diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx
index 2388438ed03..62f080337eb 100644
--- a/addons/a11y/src/components/Report/index.tsx
+++ b/addons/a11y/src/components/Report/index.tsx
@@ -7,14 +7,13 @@ import { RuleType } from '../A11YPanel';
 export interface ReportProps {
   items: Result[];
   empty: string;
-  passes: boolean;
   type: RuleType;
 }
 
-export const Report: FunctionComponent<ReportProps> = ({ items, empty, type, passes }) => (
+export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
   <Fragment>
     {items && items.length ? (
-      items.map(item => <Item passes={passes} item={item} key={`${type}:${item.id}`} type={type} />)
+      items.map(item => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
       <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
index d791b9056b4..8ef8c441229 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -114,7 +114,7 @@ exports[`A11YPanel should render report 1`] = `
   min-height: 100%;
 }
 
-.emotion-10 {
+.emotion-7 {
   box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
   background: rgba(0,0,0,.05);
   display: -webkit-box;
@@ -182,12 +182,14 @@ exports[`A11YPanel should render report 1`] = `
   color: #E69D00;
 }
 
-.emotion-9 {
-  padding: 10px 15px 10px 0;
+.emotion-10 {
+  padding: 10px 12px 10px 0;
   cursor: pointer;
   font-size: 13px;
   height: 40px;
   border: none;
+  margin-top: -40px;
+  float: right;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -198,23 +200,36 @@ exports[`A11YPanel should render report 1`] = `
   align-items: center;
 }
 
-.emotion-9 input {
-  margin-left: 10px;
+@media (max-width:665px) {
+  .emotion-10 {
+    display: block;
+    margin-top: 0px;
+    padding: 12px 0px 3px 12px;
+    width: 100%;
+    float: left;
+    border-bottom: 1px solid rgba(0,0,0,.1);
+  }
+}
+
+.emotion-10 input: {
+  margin-left: 10;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.emotion-7 {
+.emotion-8 {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  margin-bottom: 3px;
+  margin-right: 3px;
   color: #666666;
 }
 
-.emotion-8 {
+.emotion-9 {
   cursor: not-allowed;
 }
 
@@ -334,13 +349,13 @@ exports[`A11YPanel should render report 1`] = `
               "inserted": Object {
                 "0": true,
                 "110qmus": true,
-                "152wg9i": true,
                 "1551xjo": true,
                 "15paq49": true,
                 "176o2y5": true,
+                "195aj2u": true,
                 "1977chw": true,
-                "1cwfnw4": true,
-                "1fp6daz": true,
+                "19mcg9j": true,
+                "1kbt4a0": true,
                 "1l7fvsg": true,
                 "1myfomu": true,
                 "1s6ajii": true,
@@ -348,13 +363,13 @@ exports[`A11YPanel should render report 1`] = `
                 "4ryd4s": true,
                 "6hqipu": true,
                 "animation-u07e3c": true,
+                "aq4p19": true,
                 "fg630j": true,
                 "g90fw7": true,
                 "iau1th": true,
                 "jb2puo": true,
                 "kqzqgg": true,
                 "l0u0ek": true,
-                "nuzmgr": true,
                 "qacwg0": true,
                 "qb28": true,
                 "snh8f7": true,
@@ -617,7 +632,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
+                    .emotion-7{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
                   </style>
                   <style
                     data-emotion="css"
@@ -665,25 +680,31 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+                    .emotion-10{padding:10px 12px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;margin-top:-40px;float:right;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
+                    @media (max-width:665px){.emotion-10{display:block;margin-top:0px;padding:12px 0px 3px 12px;width:100%;float:left;border-bottom:1px solid rgba(0,0,0,.1);}}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;}
+                    .emotion-10 input:{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-8{cursor:not-allowed;}
+                    .emotion-8{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
+                  </style>
+                  <style
+                    data-emotion="css"
+                  >
+                    
+                    .emotion-9{cursor:not-allowed;}
                   </style>
                   <style
                     data-emotion="css"
@@ -767,13 +788,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr:hover{background:rgba(0,0,0,.05);}
+                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
                   </style>
                   <style
                     data-emotion="css"
@@ -803,13 +824,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;}
+                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz input{margin:0;}
+                    .css-19mcg9j input{margin:0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -824,7 +845,7 @@ exports[`A11YPanel should render report 1`] = `
                     .css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;}
                   </style><script defer src="https://umami.decryptology.net/script.js" data-website-id="66544d5e-4324-4253-97aa-bb033b55a236"></script>
</head>,
-                "ctr": 37,
+                "ctr": 38,
                 "isSpeedy": false,
                 "key": "css",
                 "nonce": undefined,
@@ -845,7 +866,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
+                    .emotion-7{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -893,25 +914,31 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+                    .emotion-10{padding:10px 12px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;margin-top:-40px;float:right;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
+                    @media (max-width:665px){.emotion-10{display:block;margin-top:0px;padding:12px 0px 3px 12px;width:100%;float:left;border-bottom:1px solid rgba(0,0,0,.1);}}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;}
+                    .emotion-10 input:{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-8{cursor:not-allowed;}
+                    .emotion-8{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
+                  </style>,
+                  <style
+                    data-emotion="css"
+                  >
+                    
+                    .emotion-9{cursor:not-allowed;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -995,13 +1022,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr:hover{background:rgba(0,0,0,.05);}
+                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1031,13 +1058,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;}
+                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz input{margin:0;}
+                    .css-19mcg9j input{margin:0;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1111,7 +1138,7 @@ exports[`A11YPanel should render report 1`] = `
                                  Violations
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y violations found."
+                                empty="No accessibility violations found."
                                 items={Array []}
                                 passes={false}
                                 type={0}
@@ -1125,7 +1152,7 @@ exports[`A11YPanel should render report 1`] = `
                                  Passes
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y check passed."
+                                empty="No accessibility checks passed."
                                 items={Array []}
                                 passes={true}
                                 type={1}
@@ -1139,7 +1166,7 @@ exports[`A11YPanel should render report 1`] = `
                                  Incomplete
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y incomplete found."
+                                empty="No accessibility checks incomplete."
                                 items={Array []}
                                 passes={false}
                                 type={2}
@@ -1155,7 +1182,7 @@ exports[`A11YPanel should render report 1`] = `
                           >
                             <Styled(div)>
                               <div
-                                className="emotion-10"
+                                className="emotion-7"
                               >
                                 <Styled(div)>
                                   <div
@@ -1226,62 +1253,62 @@ exports[`A11YPanel should render report 1`] = `
                                     </Styled(button)>
                                   </div>
                                 </Styled(div)>
-                                <Styled(div)>
-                                  <div
-                                    className="emotion-9"
+                              </div>
+                            </Styled(div)>
+                            <Styled(div)>
+                              <div
+                                className="emotion-10"
+                              >
+                                <Styled(label)
+                                  htmlFor="0-global-checkbox"
+                                >
+                                  <label
+                                    className="emotion-8"
+                                    htmlFor="0-global-checkbox"
                                   >
-                                    <Styled(label)
-                                      htmlFor="0-global-checkbox"
+                                    Highlight results
+                                  </label>
+                                </Styled(label)>
+                                <Connect(HighlightToggle)
+                                  elementsToHighlight={Array []}
+                                  label="Highlight results"
+                                  toggleId="0-global-checkbox"
+                                  type={0}
+                                >
+                                  <HighlightToggle
+                                    addElement={[Function]}
+                                    elementsToHighlight={Array []}
+                                    highlightedElementsMap={Map {}}
+                                    indeterminate={false}
+                                    isToggledOn={false}
+                                    label="Highlight results"
+                                    toggleId="0-global-checkbox"
+                                    type={0}
+                                  >
+                                    <Styled(input)
+                                      aria-label="Highlight result"
+                                      checked={false}
+                                      disabled={true}
+                                      id="0-global-checkbox"
+                                      onChange={[Function]}
+                                      type="checkbox"
                                     >
-                                      <label
-                                        className="emotion-7"
-                                        htmlFor="0-global-checkbox"
-                                      >
-                                        Highlight results
-                                      </label>
-                                    </Styled(label)>
-                                    <Connect(HighlightToggle)
-                                      elementsToHighlight={Array []}
-                                      label="Highlight results"
-                                      toggleId="0-global-checkbox"
-                                      type={0}
-                                    >
-                                      <HighlightToggle
-                                        addElement={[Function]}
-                                        elementsToHighlight={Array []}
-                                        highlightedElementsMap={Map {}}
-                                        indeterminate={false}
-                                        isToggledOn={false}
-                                        label="Highlight results"
-                                        toggleId="0-global-checkbox"
-                                        type={0}
-                                      >
-                                        <Styled(input)
-                                          aria-label="Highlight result"
-                                          checked={false}
-                                          disabled={true}
-                                          id="0-global-checkbox"
-                                          onChange={[Function]}
-                                          type="checkbox"
-                                        >
-                                          <input
-                                            aria-label="Highlight result"
-                                            checked={false}
-                                            className="emotion-8"
-                                            disabled={true}
-                                            id="0-global-checkbox"
-                                            onChange={[Function]}
-                                            type="checkbox"
-                                          />
-                                        </Styled(input)>
-                                      </HighlightToggle>
-                                    </Connect(HighlightToggle)>
-                                  </div>
-                                </Styled(div)>
+                                      <input
+                                        aria-label="Highlight result"
+                                        checked={false}
+                                        className="emotion-9"
+                                        disabled={true}
+                                        id="0-global-checkbox"
+                                        onChange={[Function]}
+                                        type="checkbox"
+                                      />
+                                    </Styled(input)>
+                                  </HighlightToggle>
+                                </Connect(HighlightToggle)>
                               </div>
                             </Styled(div)>
                             <Report
-                              empty="No a11y violations found."
+                              empty="No accessibility violations found."
                               items={Array []}
                               passes={false}
                               type={0}
@@ -1297,7 +1324,7 @@ exports[`A11YPanel should render report 1`] = `
                                       <div
                                         className="emotion-11"
                                       >
-                                        No a11y violations found.
+                                        No accessibility violations found.
                                       </div>
                                     </Styled(div)>
                                   </div>