feat(#15866): % of users in a11y simulation tool

addons/a11y/src/components/VisionSimulator.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { VisionSimulator, baseList } from './VisionSimulator';
+
+const getOptionByNameAndPercentage = (option: string, percentage: number) =>
+  screen.getByText(
+    (content, element) =>
+      content !== '' &&
+      element.textContent === option &&
+      (percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
+  );
+
+function ThemedVisionSimulator() {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <VisionSimulator />
+    </ThemeProvider>
+  );
+}
+
+describe('Vision Simulator', () => {
+  it('should render tool button', async () => {
+    // when
+    render(<ThemedVisionSimulator />);
+
+    // then
+    // waitFor because WithTooltip is a lazy component
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+  });
+
+  it('should display tooltip on click', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+
+    // when
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+
+    // then
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+    baseList.forEach(({ name, percentage }) =>
+      expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
+    );
+  });
+
+  it('should set filter', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+
+    // when
+    fireEvent.click(screen.getByText('blurred vision'));
+
+    // then
+    // eslint-disable-next-line no-undef
+    const rule = Object.values(document.styleSheets)
+      .filter(({ cssRules }) => cssRules)
+      .map(({ cssRules }) => Object.values(cssRules))
+      .flat()
+      .find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
+
+    expect(rule).toBeDefined();
+    expect(rule.style.filter).toBe('blur(2px)');
+  });
+});

addons/a11y/src/components/VisionSimulator.tsx

@@ -1,34 +1,39 @@
-import React, { FunctionComponent, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';
 
-const baseList = [
-  'blurred vision',
-  'deuteranomaly',
-  'deuteranopia',
-  'protanomaly',
-  'protanopia',
-  'tritanomaly',
-  'tritanopia',
-  'achromatomaly',
-  'achromatopsia',
-  'grayscale',
-] as const;
+interface Option {
+  name: string;
+  percentage?: number;
+}
+
+export const baseList = [
+  { name: 'blurred vision', percentage: 22.9 },
+  { name: 'deuteranomaly', percentage: 2.7 },
+  { name: 'deuteranopia', percentage: 0.56 },
+  { name: 'protanomaly', percentage: 0.66 },
+  { name: 'protanopia', percentage: 0.59 },
+  { name: 'tritanomaly', percentage: 0.01 },
+  { name: 'tritanopia', percentage: 0.016 },
+  { name: 'achromatomaly', percentage: 0.00001 },
+  { name: 'achromatopsia', percentage: 0.0001 },
+  { name: 'grayscale' },
+] as Option[];
 
-type Filter = typeof baseList[number] | null;
+type Filter = Option | null;
 
 const getFilter = (filter: Filter) => {
   if (!filter) {
     return 'none';
   }
-  if (filter === 'blurred vision') {
+  if (filter.name === 'blurred vision') {
     return 'blur(2px)';
   }
-  if (filter === 'grayscale') {
+  if (filter.name === 'grayscale') {
     return 'grayscale(100%)';
   }
   return `url('#${filter}')`;
@@ -66,6 +71,20 @@ export interface Link {
   onClick: () => void;
 }
 
+const Column = styled.span({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Title = styled.span({
+  textTransform: 'capitalize',
+});
+
+const Description = styled.span({
+  fontSize: '0.9em',
+  color: 'gray',
+});
+
 const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
   ...(active !== null
     ? [
@@ -80,20 +99,27 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
         },
       ]
     : []),
-  ...baseList.map((i) => ({
-    id: i,
-    title: i.charAt(0).toUpperCase() + i.slice(1),
-    onClick: () => {
-      set(i);
-    },
-    right: <ColorIcon filter={i} />,
-    active: active === i,
-  })),
+  ...baseList.map((i) => {
+    const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
+    return {
+      id: i.name,
+      title: (
+        <Column>
+          <Title>{i.name}</Title>
+          {description && <Description>{description}</Description>}
+        </Column>
+      ),
+      onClick: () => {
+        set(i);
+      },
+      right: <ColorIcon filter={i} />,
+      active: active === i,
+    };
+  }),
 ];
 
-export const VisionSimulator: FunctionComponent = () => {
+export const VisionSimulator = () => {
   const [filter, setFilter] = useState<Filter>(null);
-
   return (
     <>
       {filter && (