From ff08dd0ed89b86e7561d55b410acd65b1f718cd4 Mon Sep 17 00:00:00 2001
From: Giulia Alfonsi <electric.g@gmail.com>
Date: Tue, 26 Mar 2019 09:15:18 -0700
Subject: [PATCH] Fixed Colorblindness Emulation

---
 addons/a11y/src/components/ColorBlindness.tsx | 16 ++++++++++++++--
 addons/a11y/src/register.tsx                  |  6 +++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index 3476fbc3fbc1..d451aefb8850 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -8,6 +8,16 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));
 
+const getFilter = (filter: string | null) => {
+  if (filter === null) {
+    return 'none';
+  }
+  if (filter === 'mono') {
+    return 'grayscale(100%)';
+  }
+  return `url('#${filter}')`;
+};
+
 const ColorIcon = styled.span(
   {
     background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
@@ -17,7 +27,7 @@ const ColorIcon = styled.span(
     width: '1rem',
   },
   ({ filter }: { filter: string | null }) => ({
-    filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+    filter: getFilter(filter),
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
@@ -42,7 +52,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
     const iframe = getIframe();
 
     if (iframe) {
-      iframe.style.filter = filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`;
+      iframe.style.filter = getFilter(filter);
       this.setState({
         expanded: false,
         filter,
@@ -78,6 +88,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
         this.setFilter(i);
       },
       right: <ColorIcon filter={i} />,
+      active: filter === i,
     }));
 
     if (filter !== null) {
@@ -89,6 +100,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
             this.setFilter(null);
           },
           right: undefined,
+          active: false,
         },
         ...colorList,
       ];
diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx
index 4b9c9d22ffee..2ed298f656a2 100644
--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
@@ -7,7 +7,11 @@ import { A11YPanel } from './components/A11YPanel';
 import { addons, types } from '@storybook/addons';
 
 const Hidden = styled.div(() => ({
-  display: 'none',
+  '&, & svg': {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
 }));
 
 const PreviewWrapper: FunctionComponent<{}> = p => (