refactor(a11y): activate strictFunctionTypes TS compiler option

Activate strictFunctionTypes and fix TS errors related to it

addons/a11y/src/components/A11YPanel.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, ComponentProps } from 'react';
 
 import { styled } from '@storybook/theming';
 
@@ -20,13 +20,15 @@ export enum RuleType {
   INCOMPLETION,
 }
 
-const Icon = styled(Icons)(
+type IconProps = ComponentProps<typeof Icons> & { status?: string; inline?: boolean };
+
+const Icon = styled(Icons)<IconProps>(
   {
     height: 12,
     width: 12,
     marginRight: 4,
   },
-  ({ status, theme }: any) =>
+  ({ status, theme }) =>
     status === 'running'
       ? {
           animation: `${theme.animation.rotate360} 1s linear infinite;`,

addons/a11y/src/components/ColorBlindness.tsx

@@ -18,7 +18,7 @@ const getFilter = (filter: string | null) => {
   return `url('#${filter}')`;
 };
 
-const ColorIcon = styled.span(
+const ColorIcon = styled.span<{ filter: string | null }>(
   {
     background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
     borderRadius: '1rem',
@@ -26,7 +26,7 @@ const ColorIcon = styled.span(
     height: '1rem',
     width: '1rem',
   },
-  ({ filter }: { filter: string | null }) => ({
+  ({ filter }) => ({
     filter: getFilter(filter),
   }),
   ({ theme }) => ({

addons/a11y/src/components/Report/Rules.tsx

@@ -13,7 +13,7 @@ const List = styled.div({
   fontWeight: '400',
 } as any);
 
-const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
+const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 407;
   return {
     flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',

addons/a11y/src/components/Tabs.tsx

@@ -23,7 +23,7 @@ const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   color: theme.color.dark,
 }));
 
-const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => {
+const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 450;
   return {
     cursor: 'pointer',
@@ -47,7 +47,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
   };
 });
 
-const Item = styled.button(
+const Item = styled.button<{ active?: boolean }>(
   ({ theme }) => ({
     textDecoration: 'none',
     padding: '10px 15px',
@@ -66,7 +66,7 @@ const Item = styled.button(
       borderBottom: `3px solid ${theme.color.secondary}`,
     },
   }),
-  ({ active, theme }: any) =>
+  ({ active, theme }) =>
     active
       ? {
           opacity: 1,

addons/a11y/tsconfig.json

@@ -5,7 +5,8 @@
     "types": ["webpack-env"],
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
+    "strictFunctionTypes": true
   },
   "include": [
     "src/**/*"