mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 01:31:06 +08:00
Merge pull request #10456 from storybookjs/feature/useChannelToHighlight
Addon-a11y: use channel to highlight elements in preview
This commit is contained in:
Norbert de Langen
GitHub
commit
ba8ec665ed
@ -46,13 +46,10 @@
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.15",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react-redux": "^7.0.2",
|
||||
"react-sizeme": "^2.5.2",
|
||||
"redux": "^4.0.1",
|
||||
"regenerator-runtime": "^0.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-redux": "^7.0.6",
|
||||
"@types/webpack-env": "^1.15.1",
|
||||
"enzyme": "^3.11.0"
|
||||
},
|
||||
|
||||
46
addons/a11y/src/a11yHighlight.ts
Normal file
46
addons/a11y/src/a11yHighlight.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { document } from 'global';
|
||||
import addons from '@storybook/addons';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
|
||||
|
||||
import { higlightStyle } from './highlight';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
interface HighlightInfo {
|
||||
/** html selector of the element */
|
||||
elements: string[];
|
||||
color: string;
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const highlight = (infos: HighlightInfo) => {
|
||||
const id = HIGHLIGHT_STYLE_ID;
|
||||
resetHighlight();
|
||||
|
||||
const sheet = document.createElement('style');
|
||||
sheet.setAttribute('id', id);
|
||||
sheet.innerHTML = infos.elements
|
||||
.map(
|
||||
(target) =>
|
||||
`${target}{
|
||||
${higlightStyle(infos.color)}
|
||||
}`
|
||||
)
|
||||
.join(' ');
|
||||
document.head.appendChild(sheet);
|
||||
};
|
||||
|
||||
const resetHighlight = () => {
|
||||
const id = HIGHLIGHT_STYLE_ID;
|
||||
const sheetToBeRemoved = document.getElementById(id);
|
||||
if (sheetToBeRemoved) {
|
||||
sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
|
||||
}
|
||||
};
|
||||
|
||||
channel.on(STORY_CHANGED, resetHighlight);
|
||||
channel.on(EVENTS.HIGHLIGHT, highlight);
|
||||
25
addons/a11y/src/a11yRunner.test.ts
Normal file
25
addons/a11y/src/a11yRunner.test.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { EVENTS } from './constants';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
const mockedAddons = addons as jest.Mocked<typeof addons>;
|
||||
|
||||
describe('a11yRunner', () => {
|
||||
let mockChannel: { on: jest.Mock; emit?: jest.Mock };
|
||||
|
||||
beforeEach(() => {
|
||||
mockedAddons.getChannel.mockReset();
|
||||
|
||||
mockChannel = { on: jest.fn(), emit: jest.fn() };
|
||||
mockedAddons.getChannel.mockReturnValue(mockChannel as any);
|
||||
});
|
||||
|
||||
it('should listen to events', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('./a11yRunner');
|
||||
|
||||
expect(mockedAddons.getChannel).toHaveBeenCalled();
|
||||
expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.REQUEST, expect.any(Function));
|
||||
expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.MANUAL, expect.any(Function));
|
||||
});
|
||||
});
|
||||
@ -1,19 +1,13 @@
|
||||
import { document, window } from 'global';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import axe, { ElementContext, RunOptions, Spec } from 'axe-core';
|
||||
import axe from 'axe-core';
|
||||
import addons from '@storybook/addons';
|
||||
import { EVENTS } from './constants';
|
||||
import { Setup } from './params';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
interface Setup {
|
||||
element?: ElementContext;
|
||||
config: Spec;
|
||||
options: RunOptions;
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
let active = false;
|
||||
|
||||
@ -28,6 +22,8 @@ const run = async (storyId: string) => {
|
||||
|
||||
if (!active) {
|
||||
active = true;
|
||||
channel.emit(EVENTS.RUNNING);
|
||||
|
||||
const { element = getElement(), config, options } = input;
|
||||
axe.reset();
|
||||
if (config) {
|
||||
@ -58,5 +54,5 @@ const getParams = (storyId: string): Setup => {
|
||||
);
|
||||
};
|
||||
|
||||
channel.on(STORY_RENDERED, run);
|
||||
channel.on(EVENTS.REQUEST, run);
|
||||
channel.on(EVENTS.MANUAL, run);
|
||||
|
||||
@ -1,166 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { EventEmitter } from 'events';
|
||||
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
|
||||
import { A11YPanel } from './A11YPanel';
|
||||
import { EVENTS } from '../constants';
|
||||
|
||||
function createApi() {
|
||||
const emitter = new EventEmitter();
|
||||
jest.spyOn(emitter, 'emit');
|
||||
jest.spyOn(emitter, 'on');
|
||||
jest.spyOn(emitter, 'off');
|
||||
|
||||
emitter.getCurrentStoryData = () => ({ id: '1' });
|
||||
return emitter;
|
||||
}
|
||||
|
||||
const axeResult = {
|
||||
incomplete: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: ['cat.color', 'wcag2aa', 'wcag143'],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
passes: [
|
||||
{
|
||||
id: 'aria-allowed-attr',
|
||||
impact: null,
|
||||
tags: ['cat.aria', 'wcag2a', 'wcag412'],
|
||||
description: "Ensures ARIA attributes are allowed for an element's role",
|
||||
help: 'Elements must only use allowed ARIA attributes',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
violations: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: ['cat.color', 'wcag2aa', 'wcag143'],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function ThemedA11YPanel(props) {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<A11YPanel {...props} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('A11YPanel', () => {
|
||||
it('should register event listener on mount', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
expect(api.on).not.toHaveBeenCalled();
|
||||
|
||||
// when
|
||||
mount(<ThemedA11YPanel api={api} />);
|
||||
|
||||
// then
|
||||
expect(api.on.mock.calls.length).toBe(3);
|
||||
expect(api.on.mock.calls[0][0]).toBe(EVENTS.RESULT);
|
||||
expect(api.on.mock.calls[1][0]).toBe(EVENTS.ERROR);
|
||||
expect(api.on.mock.calls[2][0]).toBe(EVENTS.MANUAL);
|
||||
});
|
||||
|
||||
it('should deregister event listener on unmount', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
expect(api.off).not.toHaveBeenCalled();
|
||||
|
||||
// when
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} />);
|
||||
wrapper.unmount();
|
||||
|
||||
// then
|
||||
expect(api.off.mock.calls.length).toBe(3);
|
||||
expect(api.off.mock.calls[0][0]).toBe(EVENTS.RESULT);
|
||||
expect(api.off.mock.calls[1][0]).toBe(EVENTS.ERROR);
|
||||
expect(api.off.mock.calls[2][0]).toBe(EVENTS.MANUAL);
|
||||
});
|
||||
|
||||
it('should handle "initial" status', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
|
||||
// when
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} active />);
|
||||
|
||||
// then
|
||||
expect(api.emit).not.toHaveBeenCalled();
|
||||
expect(wrapper.text()).toMatch(/Initializing/);
|
||||
});
|
||||
|
||||
it('should handle "manual" status', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} active />);
|
||||
|
||||
// when
|
||||
api.emit(EVENTS.MANUAL, true);
|
||||
wrapper.update();
|
||||
|
||||
// then
|
||||
expect(wrapper.text()).toMatch(/Manually run the accessibility scan/);
|
||||
expect(api.emit).not.toHaveBeenCalledWith(EVENTS.REQUEST);
|
||||
});
|
||||
|
||||
it('should handle "running" status', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} active />);
|
||||
|
||||
// when
|
||||
api.emit(EVENTS.MANUAL, false);
|
||||
wrapper.update();
|
||||
|
||||
// then
|
||||
expect(wrapper.text()).toMatch(/Please wait while the accessibility scan is running/);
|
||||
expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST, '1');
|
||||
});
|
||||
|
||||
it('should handle "ran" status', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} active />);
|
||||
|
||||
// when
|
||||
api.emit(EVENTS.RESULT, axeResult);
|
||||
wrapper.update();
|
||||
|
||||
// then
|
||||
expect(wrapper.find('button').last().text().trim()).toBe('Tests completed');
|
||||
expect(wrapper.find('Tabs').prop('tabs').length).toBe(3);
|
||||
expect(wrapper.find('Tabs').prop('tabs')[0].label.props.children).toEqual([1, ' Violations']);
|
||||
expect(wrapper.find('Tabs').prop('tabs')[1].label.props.children).toEqual([1, ' Passes']);
|
||||
expect(wrapper.find('Tabs').prop('tabs')[2].label.props.children).toEqual([1, ' Incomplete']);
|
||||
});
|
||||
|
||||
it('should handle inactive state', () => {
|
||||
// given
|
||||
const api = createApi();
|
||||
|
||||
// when
|
||||
const wrapper = mount(<ThemedA11YPanel api={api} active={false} />);
|
||||
|
||||
// then
|
||||
expect(wrapper.text()).toBe('');
|
||||
expect(api.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
139
addons/a11y/src/components/A11YPanel.test.tsx
Normal file
139
addons/a11y/src/components/A11YPanel.test.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import { render, waitFor, fireEvent, act } from '@testing-library/react';
|
||||
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import * as api from '@storybook/api';
|
||||
|
||||
import { A11YPanel } from './A11YPanel';
|
||||
import { EVENTS } from '../constants';
|
||||
|
||||
jest.mock('@storybook/api');
|
||||
const mockedApi = api as jest.Mocked<typeof api>;
|
||||
|
||||
const axeResult = {
|
||||
incomplete: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: ['cat.color', 'wcag2aa', 'wcag143'],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
passes: [
|
||||
{
|
||||
id: 'aria-allowed-attr',
|
||||
impact: null,
|
||||
tags: ['cat.aria', 'wcag2a', 'wcag412'],
|
||||
description: "Ensures ARIA attributes are allowed for an element's role",
|
||||
help: 'Elements must only use allowed ARIA attributes',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
violations: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: ['cat.color', 'wcag2aa', 'wcag143'],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function ThemedA11YPanel() {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<A11YPanel />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('A11YPanel', () => {
|
||||
beforeEach(() => {
|
||||
mockedApi.useChannel.mockReset();
|
||||
mockedApi.useParameter.mockReset();
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
mockedApi.useAddonState.mockReset();
|
||||
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
mockedApi.useParameter.mockReturnValue({ manual: false });
|
||||
const state: Partial<api.State> = { storyId: 'jest' };
|
||||
// Lazy to mock entire state
|
||||
mockedApi.useStorybookState.mockReturnValue(state as any);
|
||||
mockedApi.useAddonState.mockImplementation(React.useState);
|
||||
});
|
||||
|
||||
it('should render', () => {
|
||||
const { container } = render(<A11YPanel />);
|
||||
expect(container.firstChild).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should register event listener on mount', () => {
|
||||
render(<A11YPanel />);
|
||||
expect(mockedApi.useChannel).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
[EVENTS.RESULT]: expect.any(Function),
|
||||
[EVENTS.ERROR]: expect.any(Function),
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle "initial" status', () => {
|
||||
const { getByText } = render(<A11YPanel />);
|
||||
expect(getByText(/Initializing/)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should handle "manual" status', async () => {
|
||||
mockedApi.useParameter.mockReturnValue({ manual: true });
|
||||
const { getByText } = render(<ThemedA11YPanel />);
|
||||
await waitFor(() => {
|
||||
expect(getByText(/Manually run the accessibility scan/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('running', () => {
|
||||
it('should handle "running" status', async () => {
|
||||
const emit = jest.fn();
|
||||
mockedApi.useChannel.mockReturnValue(emit);
|
||||
mockedApi.useParameter.mockReturnValue({ manual: true });
|
||||
const { getByRole, getByText } = render(<ThemedA11YPanel />);
|
||||
await waitFor(() => {
|
||||
const button = getByRole('button', { name: 'Run test' });
|
||||
fireEvent.click(button);
|
||||
});
|
||||
await waitFor(() => {
|
||||
expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
|
||||
expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, 'jest');
|
||||
});
|
||||
});
|
||||
|
||||
it('should set running status on event', async () => {
|
||||
const { getByText } = render(<ThemedA11YPanel />);
|
||||
const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
|
||||
act(() => useChannelArgs[EVENTS.RUNNING]());
|
||||
await waitFor(() => {
|
||||
expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle "ran" status', async () => {
|
||||
const { getByText } = render(<ThemedA11YPanel />);
|
||||
const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
|
||||
act(() => useChannelArgs[EVENTS.RESULT](axeResult));
|
||||
await waitFor(() => {
|
||||
expect(getByText(/Tests completed/)).toBeTruthy();
|
||||
expect(getByText(/Violations/)).toBeTruthy();
|
||||
expect(getByText(/Passes/)).toBeTruthy();
|
||||
expect(getByText(/Incomplete/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,18 +1,17 @@
|
||||
/* eslint-disable react/destructuring-assignment,default-case,consistent-return,no-case-declarations */
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { ActionBar, Icons, ScrollArea } from '@storybook/components';
|
||||
|
||||
import { AxeResults, Result } from 'axe-core';
|
||||
import { API } from '@storybook/api';
|
||||
import { Provider } from 'react-redux';
|
||||
import { AxeResults } from 'axe-core';
|
||||
import { useChannel, useParameter, useStorybookState, useAddonState } from '@storybook/api';
|
||||
import { Report } from './Report';
|
||||
import { Tabs } from './Tabs';
|
||||
import { EVENTS } from '../constants';
|
||||
|
||||
import store, { clearElements } from '../redux-config';
|
||||
import { useA11yContext } from './A11yContext';
|
||||
import { EVENTS, ADDON_ID } from '../constants';
|
||||
import { A11yParameters } from '../params';
|
||||
|
||||
export enum RuleType {
|
||||
VIOLATION,
|
||||
@ -49,228 +48,138 @@ const Centered = styled.span<{}>({
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
interface InitialState {
|
||||
status: 'initial';
|
||||
}
|
||||
type Status = 'initial' | 'manual' | 'running' | 'error' | 'ran' | 'ready';
|
||||
|
||||
interface ManualState {
|
||||
status: 'manual';
|
||||
}
|
||||
export const A11YPanel: React.FC = () => {
|
||||
const [status, setStatus] = useAddonState<Status>(ADDON_ID, 'initial');
|
||||
const [error, setError] = React.useState<unknown>(undefined);
|
||||
const { setResults, results } = useA11yContext();
|
||||
const { storyId } = useStorybookState();
|
||||
const { manual } = useParameter<Pick<A11yParameters, 'manual'>>('a11y', {
|
||||
manual: false,
|
||||
});
|
||||
|
||||
interface RunningState {
|
||||
status: 'running';
|
||||
}
|
||||
React.useEffect(() => {
|
||||
setStatus(manual ? 'manual' : 'initial');
|
||||
}, [manual]);
|
||||
|
||||
interface RanState {
|
||||
status: 'ran';
|
||||
passes: Result[];
|
||||
violations: Result[];
|
||||
incomplete: Result[];
|
||||
}
|
||||
const handleResult = (axeResults: AxeResults) => {
|
||||
setStatus('ran');
|
||||
setResults(axeResults);
|
||||
|
||||
interface ReadyState {
|
||||
status: 'ready';
|
||||
passes: Result[];
|
||||
violations: Result[];
|
||||
incomplete: Result[];
|
||||
}
|
||||
|
||||
interface ErrorState {
|
||||
status: 'error';
|
||||
error: unknown;
|
||||
}
|
||||
|
||||
type A11YPanelState =
|
||||
| InitialState
|
||||
| ManualState
|
||||
| RunningState
|
||||
| RanState
|
||||
| ReadyState
|
||||
| ErrorState;
|
||||
|
||||
interface A11YPanelProps {
|
||||
active: boolean;
|
||||
api: API;
|
||||
}
|
||||
|
||||
export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
|
||||
state: A11YPanelState = {
|
||||
status: 'initial',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { api } = this.props;
|
||||
|
||||
api.on(EVENTS.RESULT, this.onResult);
|
||||
api.on(EVENTS.ERROR, this.onError);
|
||||
api.on(EVENTS.MANUAL, this.onManual);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: A11YPanelProps) {
|
||||
// TODO: might be able to remove this
|
||||
const { active } = this.props;
|
||||
|
||||
if (!prevProps.active && active) {
|
||||
// removes all elements from the redux map in store from the previous panel
|
||||
store.dispatch(clearElements());
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { api } = this.props;
|
||||
|
||||
api.off(EVENTS.RESULT, this.onResult);
|
||||
api.off(EVENTS.ERROR, this.onError);
|
||||
api.off(EVENTS.MANUAL, this.onManual);
|
||||
}
|
||||
|
||||
onResult = ({ passes, violations, incomplete }: AxeResults) => {
|
||||
this.setState(
|
||||
{
|
||||
status: 'ran',
|
||||
passes,
|
||||
violations,
|
||||
incomplete,
|
||||
},
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
const { status } = this.state;
|
||||
if (status === 'ran') {
|
||||
this.setState({
|
||||
status: 'ready',
|
||||
});
|
||||
}
|
||||
}, 900);
|
||||
setTimeout(() => {
|
||||
if (status === 'ran') {
|
||||
setStatus('ready');
|
||||
}
|
||||
);
|
||||
}, 900);
|
||||
};
|
||||
|
||||
onError = (error: unknown) => {
|
||||
this.setState({
|
||||
status: 'error',
|
||||
error,
|
||||
});
|
||||
};
|
||||
const handleRun = useCallback(() => {
|
||||
setStatus('running');
|
||||
}, []);
|
||||
|
||||
onManual = (manual: boolean) => {
|
||||
if (manual) {
|
||||
this.setState({
|
||||
status: 'manual',
|
||||
});
|
||||
} else {
|
||||
this.request();
|
||||
}
|
||||
};
|
||||
const handleError = useCallback((err: unknown) => {
|
||||
setStatus('error');
|
||||
setError(err);
|
||||
}, []);
|
||||
|
||||
request = () => {
|
||||
const { api } = this.props;
|
||||
this.setState(
|
||||
const emit = useChannel({
|
||||
[EVENTS.RUNNING]: handleRun,
|
||||
[EVENTS.RESULT]: handleResult,
|
||||
[EVENTS.ERROR]: handleError,
|
||||
});
|
||||
|
||||
const handleManual = useCallback(() => {
|
||||
setStatus('running');
|
||||
emit(EVENTS.MANUAL, storyId);
|
||||
}, [storyId]);
|
||||
|
||||
const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [
|
||||
handleManual,
|
||||
]);
|
||||
const readyActionItems = useMemo(
|
||||
() => [
|
||||
{
|
||||
status: 'running',
|
||||
},
|
||||
() => {
|
||||
api.emit(EVENTS.REQUEST, api.getCurrentStoryData().id);
|
||||
// removes all elements from the redux map in store from the previous panel
|
||||
store.dispatch(clearElements());
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
if (!active) return null;
|
||||
|
||||
switch (this.state.status) {
|
||||
case 'initial':
|
||||
return <Centered>Initializing...</Centered>;
|
||||
case 'manual':
|
||||
return (
|
||||
<Fragment>
|
||||
<Centered>Manually run the accessibility scan.</Centered>
|
||||
<ActionBar
|
||||
key="actionbar"
|
||||
actionItems={[{ title: 'Run test', onClick: this.request }]}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
case 'running':
|
||||
return (
|
||||
<Centered>
|
||||
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
|
||||
...
|
||||
</Centered>
|
||||
);
|
||||
case 'ready':
|
||||
case 'ran':
|
||||
const { passes, violations, incomplete, status } = this.state;
|
||||
const actionTitle =
|
||||
title:
|
||||
status === 'ready' ? (
|
||||
'Rerun tests'
|
||||
) : (
|
||||
<Fragment>
|
||||
<>
|
||||
<Icon inline icon="check" /> Tests completed
|
||||
</Fragment>
|
||||
);
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<ScrollArea vertical horizontal>
|
||||
<Tabs
|
||||
key="tabs"
|
||||
tabs={[
|
||||
{
|
||||
label: <Violations>{violations.length} Violations</Violations>,
|
||||
panel: (
|
||||
<Report
|
||||
items={violations}
|
||||
type={RuleType.VIOLATION}
|
||||
empty="No accessibility violations found."
|
||||
/>
|
||||
),
|
||||
items: violations,
|
||||
type: RuleType.VIOLATION,
|
||||
},
|
||||
{
|
||||
label: <Passes>{passes.length} Passes</Passes>,
|
||||
panel: (
|
||||
<Report
|
||||
items={passes}
|
||||
type={RuleType.PASS}
|
||||
empty="No accessibility checks passed."
|
||||
/>
|
||||
),
|
||||
items: passes,
|
||||
type: RuleType.PASS,
|
||||
},
|
||||
{
|
||||
label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
|
||||
panel: (
|
||||
<Report
|
||||
items={incomplete}
|
||||
type={RuleType.INCOMPLETION}
|
||||
empty="No accessibility checks incomplete."
|
||||
/>
|
||||
),
|
||||
items: incomplete,
|
||||
type: RuleType.INCOMPLETION,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollArea>
|
||||
<ActionBar
|
||||
key="actionbar"
|
||||
actionItems={[{ title: actionTitle, onClick: this.request }]}
|
||||
/>
|
||||
</Provider>
|
||||
);
|
||||
case 'error':
|
||||
const { error } = this.state;
|
||||
return (
|
||||
<Centered>
|
||||
The accessibility scan encountered an error.
|
||||
<br />
|
||||
{error}
|
||||
</Centered>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</>
|
||||
),
|
||||
onClick: handleManual,
|
||||
},
|
||||
],
|
||||
[status, handleManual]
|
||||
);
|
||||
const tabs = useMemo(() => {
|
||||
const { passes, incomplete, violations } = results;
|
||||
return [
|
||||
{
|
||||
label: <Violations>{violations.length} Violations</Violations>,
|
||||
panel: (
|
||||
<Report
|
||||
items={violations}
|
||||
type={RuleType.VIOLATION}
|
||||
empty="No accessibility violations found."
|
||||
/>
|
||||
),
|
||||
items: violations,
|
||||
type: RuleType.VIOLATION,
|
||||
},
|
||||
{
|
||||
label: <Passes>{passes.length} Passes</Passes>,
|
||||
panel: (
|
||||
<Report items={passes} type={RuleType.PASS} empty="No accessibility checks passed." />
|
||||
),
|
||||
items: passes,
|
||||
type: RuleType.PASS,
|
||||
},
|
||||
{
|
||||
label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
|
||||
panel: (
|
||||
<Report
|
||||
items={incomplete}
|
||||
type={RuleType.INCOMPLETION}
|
||||
empty="No accessibility checks incomplete."
|
||||
/>
|
||||
),
|
||||
items: incomplete,
|
||||
type: RuleType.INCOMPLETION,
|
||||
},
|
||||
];
|
||||
}, [results]);
|
||||
return (
|
||||
<>
|
||||
{status === 'initial' && <Centered>Initializing...</Centered>}
|
||||
{status === 'manual' && (
|
||||
<>
|
||||
<Centered>Manually run the accessibility scan.</Centered>
|
||||
<ActionBar key="actionbar" actionItems={manualActionItems} />
|
||||
</>
|
||||
)}
|
||||
{status === 'running' && (
|
||||
<Centered>
|
||||
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
|
||||
...
|
||||
</Centered>
|
||||
)}
|
||||
{(status === 'ready' || status === 'ran') && (
|
||||
<>
|
||||
<ScrollArea vertical horizontal>
|
||||
<Tabs key="tabs" tabs={tabs} />
|
||||
</ScrollArea>
|
||||
<ActionBar key="actionbar" actionItems={readyActionItems} />
|
||||
</>
|
||||
)}
|
||||
{status === 'error' && (
|
||||
<Centered>
|
||||
The accessibility scan encountered an error.
|
||||
<br />
|
||||
{typeof error === 'string' ? error : JSON.stringify(error)}
|
||||
</Centered>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
133
addons/a11y/src/components/A11yContext.test.tsx
Normal file
133
addons/a11y/src/components/A11yContext.test.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import * as React from 'react';
|
||||
import { AxeResults } from 'axe-core';
|
||||
import { render, act } from '@testing-library/react';
|
||||
import * as api from '@storybook/api';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
|
||||
import { A11yContextProvider, useA11yContext } from './A11yContext';
|
||||
import { EVENTS } from '../constants';
|
||||
|
||||
jest.mock('@storybook/api');
|
||||
const mockedApi = api as jest.Mocked<typeof api>;
|
||||
|
||||
const storyId = 'jest';
|
||||
const axeResult: Partial<AxeResults> = {
|
||||
incomplete: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: [],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
passes: [
|
||||
{
|
||||
id: 'aria-allowed-attr',
|
||||
impact: undefined,
|
||||
tags: [],
|
||||
description: "Ensures ARIA attributes are allowed for an element's role",
|
||||
help: 'Elements must only use allowed ARIA attributes',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
violations: [
|
||||
{
|
||||
id: 'color-contrast',
|
||||
impact: 'serious',
|
||||
tags: [],
|
||||
description:
|
||||
'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
|
||||
help: 'Elements must have sufficient color contrast',
|
||||
helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
|
||||
nodes: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
describe('A11YPanel', () => {
|
||||
beforeEach(() => {
|
||||
mockedApi.useChannel.mockReset();
|
||||
mockedApi.useStorybookState.mockReset();
|
||||
|
||||
mockedApi.useChannel.mockReturnValue(jest.fn());
|
||||
const state: Partial<api.State> = { storyId };
|
||||
// Lazy to mock entire state
|
||||
mockedApi.useStorybookState.mockReturnValue(state as any);
|
||||
});
|
||||
|
||||
it('should render children', () => {
|
||||
const { getByTestId } = render(
|
||||
<A11yContextProvider active>
|
||||
<div data-testid="child" />
|
||||
</A11yContextProvider>
|
||||
);
|
||||
expect(getByTestId('child')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not render when inactive', () => {
|
||||
const emit = jest.fn();
|
||||
mockedApi.useChannel.mockReturnValue(emit);
|
||||
const { queryByTestId } = render(
|
||||
<A11yContextProvider active={false}>
|
||||
<div data-testid="child" />
|
||||
</A11yContextProvider>
|
||||
);
|
||||
expect(queryByTestId('child')).toBeFalsy();
|
||||
expect(emit).not.toHaveBeenCalledWith(EVENTS.REQUEST);
|
||||
});
|
||||
|
||||
it('should emit request when moving from inactive to active', () => {
|
||||
const emit = jest.fn();
|
||||
mockedApi.useChannel.mockReturnValue(emit);
|
||||
const { rerender } = render(<A11yContextProvider active={false} />);
|
||||
rerender(<A11yContextProvider active />);
|
||||
expect(emit).toHaveBeenLastCalledWith(EVENTS.REQUEST, storyId);
|
||||
});
|
||||
|
||||
it('should emit highlight with no values when inactive', () => {
|
||||
const emit = jest.fn();
|
||||
mockedApi.useChannel.mockReturnValue(emit);
|
||||
const { rerender } = render(<A11yContextProvider active />);
|
||||
rerender(<A11yContextProvider active={false} />);
|
||||
expect(emit).toHaveBeenLastCalledWith(
|
||||
EVENTS.HIGHLIGHT,
|
||||
expect.objectContaining({
|
||||
color: expect.any(String),
|
||||
elements: [],
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('should emit highlight with no values when story changed', () => {
|
||||
const Component = () => {
|
||||
const { results, setResults } = useA11yContext();
|
||||
// As any because of unit tests...
|
||||
React.useEffect(() => setResults(axeResult as any), []);
|
||||
return (
|
||||
<>
|
||||
{!!results.passes.length && <div data-testid="anyPassesResults" />}
|
||||
{!!results.incomplete.length && <div data-testid="anyIncompleteResults" />}
|
||||
{!!results.violations.length && <div data-testid="anyViolationsResults" />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { queryByTestId } = render(
|
||||
<A11yContextProvider active>
|
||||
<Component />
|
||||
</A11yContextProvider>
|
||||
);
|
||||
expect(queryByTestId('anyPassesResults')).toBeTruthy();
|
||||
expect(queryByTestId('anyIncompleteResults')).toBeTruthy();
|
||||
expect(queryByTestId('anyViolationsResults')).toBeTruthy();
|
||||
const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
|
||||
act(() => useChannelArgs[STORY_CHANGED]());
|
||||
expect(queryByTestId('anyPassesResults')).toBeFalsy();
|
||||
expect(queryByTestId('anyIncompleteResults')).toBeFalsy();
|
||||
expect(queryByTestId('anyViolationsResults')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
117
addons/a11y/src/components/A11yContext.tsx
Normal file
117
addons/a11y/src/components/A11yContext.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import * as React from 'react';
|
||||
import { themes, convert } from '@storybook/theming';
|
||||
import { Result } from 'axe-core';
|
||||
import { useChannel, useStorybookState } from '@storybook/api';
|
||||
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
|
||||
import { EVENTS } from '../constants';
|
||||
|
||||
interface Results {
|
||||
passes: Result[];
|
||||
violations: Result[];
|
||||
incomplete: Result[];
|
||||
}
|
||||
|
||||
interface A11yContextStore {
|
||||
results: Results;
|
||||
setResults: (results: Results) => void;
|
||||
highlighted: string[];
|
||||
toggleHighlight: (target: string[], highlight: boolean) => void;
|
||||
clearHighlights: () => void;
|
||||
tab: number;
|
||||
setTab: (index: number) => void;
|
||||
}
|
||||
|
||||
const colorsByType = [
|
||||
convert(themes.normal).color.negative, // VIOLATION,
|
||||
convert(themes.normal).color.positive, // PASS,
|
||||
convert(themes.normal).color.warning, // INCOMPLETION,
|
||||
];
|
||||
|
||||
export const A11yContext = React.createContext<A11yContextStore>({
|
||||
results: {
|
||||
passes: [],
|
||||
incomplete: [],
|
||||
violations: [],
|
||||
},
|
||||
setResults: () => {},
|
||||
highlighted: [],
|
||||
toggleHighlight: () => {},
|
||||
clearHighlights: () => {},
|
||||
tab: 0,
|
||||
setTab: () => {},
|
||||
});
|
||||
|
||||
interface A11yContextProviderProps {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
const defaultResult = {
|
||||
passes: [],
|
||||
incomplete: [],
|
||||
violations: [],
|
||||
};
|
||||
|
||||
export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
|
||||
const [results, setResults] = React.useState<Results>(defaultResult);
|
||||
const [tab, setTab] = React.useState(0);
|
||||
const [highlighted, setHighlighted] = React.useState<string[]>([]);
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
const handleToggleHighlight = React.useCallback((target: string[], highlight: boolean) => {
|
||||
setHighlighted((prevHighlighted) =>
|
||||
highlight
|
||||
? [...prevHighlighted, ...target]
|
||||
: prevHighlighted.filter((t) => !target.includes(t))
|
||||
);
|
||||
}, []);
|
||||
const handleRun = React.useCallback(() => {
|
||||
emit(EVENTS.REQUEST, storyId);
|
||||
}, [storyId]);
|
||||
const handleClearHighlights = React.useCallback(() => setHighlighted([]), []);
|
||||
const handleSetTab = React.useCallback((index: number) => {
|
||||
handleClearHighlights();
|
||||
setTab(index);
|
||||
}, []);
|
||||
|
||||
const handleReset = React.useCallback(() => {
|
||||
setTab(0);
|
||||
setResults(defaultResult);
|
||||
// Highlights is cleared by a11yHighlights.ts
|
||||
}, []);
|
||||
|
||||
const emit = useChannel({
|
||||
[STORY_RENDERED]: handleRun,
|
||||
[STORY_CHANGED]: handleReset,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
emit(EVENTS.HIGHLIGHT, { elements: highlighted, color: colorsByType[tab] });
|
||||
}, [highlighted, tab]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (active) {
|
||||
handleRun();
|
||||
} else {
|
||||
handleClearHighlights();
|
||||
}
|
||||
}, [active, handleClearHighlights, emit, storyId]);
|
||||
|
||||
if (!active) return null;
|
||||
|
||||
return (
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
results,
|
||||
setResults,
|
||||
highlighted,
|
||||
toggleHighlight: handleToggleHighlight,
|
||||
clearHighlights: handleClearHighlights,
|
||||
tab,
|
||||
setTab: handleSetTab,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const useA11yContext = () => React.useContext(A11yContext);
|
||||
@ -36,19 +36,13 @@ const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
|
||||
const { any, all, none } = element;
|
||||
const rules = [...any, ...all, ...none];
|
||||
const highlightToggleId = `${type}-${element.target[0]}`;
|
||||
const highlightLabel = `Highlight`;
|
||||
|
||||
return (
|
||||
<Item>
|
||||
<ItemTitle>
|
||||
{element.target[0]}
|
||||
<HighlightToggleElement>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
type={type}
|
||||
elementsToHighlight={[element]}
|
||||
label={highlightLabel}
|
||||
/>
|
||||
<HighlightToggle toggleId={highlightToggleId} elementsToHighlight={[element]} />
|
||||
</HighlightToggleElement>
|
||||
</ItemTitle>
|
||||
<Rules rules={rules} />
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { Provider } from 'react-redux';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import HighlightToggle from './HighlightToggle';
|
||||
import store from '../../redux-config';
|
||||
|
||||
function ThemedHighlightToggle(props) {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.normal)}>
|
||||
<HighlightToggle {...props} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('HighlightToggle component', () => {
|
||||
test('should render', () => {
|
||||
// given
|
||||
const wrapper = mount(
|
||||
<Provider store={store}>
|
||||
<ThemedHighlightToggle />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
// then
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('should match snapshot', () => {
|
||||
// given
|
||||
const wrapper = mount(
|
||||
<Provider store={store}>
|
||||
<ThemedHighlightToggle />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
// then
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
93
addons/a11y/src/components/Report/HighlightToggle.test.tsx
Normal file
93
addons/a11y/src/components/Report/HighlightToggle.test.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { NodeResult } from 'axe-core';
|
||||
import HighlightToggle from './HighlightToggle';
|
||||
import { A11yContext } from '../A11yContext';
|
||||
|
||||
const nodeResult = (target: string): NodeResult => ({
|
||||
html: '',
|
||||
target: [target],
|
||||
any: [],
|
||||
all: [],
|
||||
none: [],
|
||||
});
|
||||
|
||||
const defaultProviderValue = {
|
||||
results: {
|
||||
passes: [],
|
||||
incomplete: [],
|
||||
violations: [],
|
||||
},
|
||||
setResults: jest.fn(),
|
||||
highlighted: [],
|
||||
toggleHighlight: jest.fn(),
|
||||
clearHighlights: jest.fn(),
|
||||
tab: 0,
|
||||
setTab: jest.fn(),
|
||||
};
|
||||
|
||||
describe('<HighlightToggle />', () => {
|
||||
it('should render', () => {
|
||||
const { container } = render(<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />);
|
||||
expect(container.firstChild).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should be checked when all targets are highlighted', () => {
|
||||
const { getByRole } = render(
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
...defaultProviderValue,
|
||||
highlighted: ['#root'],
|
||||
}}
|
||||
>
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />
|
||||
</A11yContext.Provider>
|
||||
);
|
||||
const checkbox = getByRole('checkbox') as HTMLInputElement;
|
||||
expect(checkbox.checked).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should be mixed when some targets are highlighted', () => {
|
||||
const { getByRole } = render(
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
...defaultProviderValue,
|
||||
highlighted: ['#root'],
|
||||
}}
|
||||
>
|
||||
<HighlightToggle elementsToHighlight={[nodeResult('#root'), nodeResult('#root1')]} />
|
||||
</A11yContext.Provider>
|
||||
);
|
||||
const checkbox = getByRole('checkbox') as HTMLInputElement;
|
||||
expect(checkbox.indeterminate).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('toggleHighlight', () => {
|
||||
it.each`
|
||||
highlighted | elementsToHighlight | expected
|
||||
${[]} | ${['#root']} | ${true}
|
||||
${['#root']} | ${['#root']} | ${false}
|
||||
${['#root']} | ${['#root', '#root1']} | ${true}
|
||||
`(
|
||||
'should be triggerd with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
|
||||
({ highlighted, elementsToHighlight, expected }) => {
|
||||
const { getByRole } = render(
|
||||
<A11yContext.Provider
|
||||
value={{
|
||||
...defaultProviderValue,
|
||||
highlighted,
|
||||
}}
|
||||
>
|
||||
<HighlightToggle elementsToHighlight={elementsToHighlight.map(nodeResult)} />
|
||||
</A11yContext.Provider>
|
||||
);
|
||||
const checkbox = getByRole('checkbox') as HTMLInputElement;
|
||||
fireEvent.click(checkbox);
|
||||
expect(defaultProviderValue.toggleHighlight).toHaveBeenCalledWith(
|
||||
elementsToHighlight,
|
||||
expected
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,28 +1,12 @@
|
||||
import { document } from 'global';
|
||||
import React, { Component, createRef } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { styled, themes, convert } from '@storybook/theming';
|
||||
import memoize from 'memoizerific';
|
||||
import React from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { NodeResult } from 'axe-core';
|
||||
import { Dispatch } from 'redux';
|
||||
import { RuleType } from '../A11YPanel';
|
||||
import { addElement } from '../../redux-config';
|
||||
import { IFRAME } from '../../constants';
|
||||
|
||||
export interface HighlightedElementData {
|
||||
originalOutline: string;
|
||||
isHighlighted: boolean;
|
||||
}
|
||||
import { useA11yContext } from '../A11yContext';
|
||||
|
||||
interface ToggleProps {
|
||||
elementsToHighlight: NodeResult[];
|
||||
type: RuleType;
|
||||
addElement: (data: any) => void;
|
||||
highlightedElementsMap: Map<HTMLElement, HighlightedElementData>;
|
||||
isToggledOn?: boolean;
|
||||
toggleId?: string;
|
||||
indeterminate: boolean;
|
||||
}
|
||||
|
||||
enum CheckBoxStates {
|
||||
@ -35,38 +19,13 @@ const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
}));
|
||||
|
||||
const colorsByType = [
|
||||
convert(themes.normal).color.negative, // VIOLATION,
|
||||
convert(themes.normal).color.positive, // PASS,
|
||||
convert(themes.normal).color.warning, // INCOMPLETION,
|
||||
];
|
||||
|
||||
const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);
|
||||
|
||||
function getElementBySelectorPath(elementPath: string): HTMLElement {
|
||||
const iframe = getIframe();
|
||||
if (iframe && iframe.contentDocument && elementPath) {
|
||||
return iframe.contentDocument.querySelector(elementPath);
|
||||
}
|
||||
return (null as unknown) as HTMLElement;
|
||||
}
|
||||
|
||||
function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
targetElement.style.outline = outlineStyle;
|
||||
}
|
||||
|
||||
function areAllRequiredElementsHighlighted(
|
||||
elementsToHighlight: NodeResult[],
|
||||
highlightedElementsMap: Map<HTMLElement, HighlightedElementData>
|
||||
highlighted: string[]
|
||||
): CheckBoxStates {
|
||||
const highlightedCount = elementsToHighlight.filter((item) => {
|
||||
const targetElement = getElementBySelectorPath(item.target[0]);
|
||||
return (
|
||||
highlightedElementsMap.has(targetElement) &&
|
||||
(highlightedElementsMap.get(targetElement) as HighlightedElementData).isHighlighted
|
||||
);
|
||||
}).length;
|
||||
const highlightedCount = elementsToHighlight.filter((item) =>
|
||||
highlighted.includes(item.target[0])
|
||||
).length;
|
||||
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
return highlightedCount === 0
|
||||
@ -76,112 +35,39 @@ function areAllRequiredElementsHighlighted(
|
||||
: CheckBoxStates.INDETERMINATE;
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: Dispatch) {
|
||||
return {
|
||||
addElement: (data: { element: HTMLElement; data: HighlightedElementData }) =>
|
||||
dispatch(addElement(data)),
|
||||
};
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: any, ownProps: any) => {
|
||||
const checkBoxState = areAllRequiredElementsHighlighted(
|
||||
ownProps.elementsToHighlight || [],
|
||||
state.highlightedElementsMap
|
||||
const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight = [] }) => {
|
||||
const { toggleHighlight, highlighted } = useA11yContext();
|
||||
const checkBoxRef = React.useRef<HTMLInputElement>(null);
|
||||
const [checkBoxState, setChecked] = React.useState(
|
||||
areAllRequiredElementsHighlighted(elementsToHighlight, highlighted)
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const newState = areAllRequiredElementsHighlighted(elementsToHighlight, highlighted);
|
||||
if (checkBoxRef.current) {
|
||||
checkBoxRef.current.indeterminate = newState === CheckBoxStates.INDETERMINATE;
|
||||
}
|
||||
setChecked(newState);
|
||||
}, [elementsToHighlight, highlighted]);
|
||||
|
||||
const handleToggle = React.useCallback((): void => {
|
||||
toggleHighlight(
|
||||
elementsToHighlight.map((e) => e.target[0]),
|
||||
checkBoxState !== CheckBoxStates.CHECKED
|
||||
);
|
||||
}, [elementsToHighlight, checkBoxState, toggleHighlight]);
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
ref={checkBoxRef}
|
||||
id={toggleId}
|
||||
type="checkbox"
|
||||
aria-label="Highlight result"
|
||||
disabled={!elementsToHighlight.length}
|
||||
onChange={handleToggle}
|
||||
checked={checkBoxState === CheckBoxStates.CHECKED}
|
||||
/>
|
||||
);
|
||||
return {
|
||||
highlightedElementsMap: state.highlightedElementsMap,
|
||||
isToggledOn: checkBoxState === CheckBoxStates.CHECKED,
|
||||
indeterminate: checkBoxState === CheckBoxStates.INDETERMINATE,
|
||||
};
|
||||
};
|
||||
|
||||
class HighlightToggle extends Component<ToggleProps> {
|
||||
static defaultProps: Partial<ToggleProps> = {
|
||||
elementsToHighlight: [],
|
||||
};
|
||||
|
||||
private checkBoxRef = createRef<HTMLInputElement>();
|
||||
|
||||
componentDidMount() {
|
||||
const { elementsToHighlight, highlightedElementsMap } = this.props;
|
||||
elementsToHighlight.forEach((element) => {
|
||||
const targetElement = getElementBySelectorPath(element.target[0]);
|
||||
if (targetElement && !highlightedElementsMap.has(targetElement)) {
|
||||
this.saveElementDataToMap(targetElement, false, targetElement.style.outline);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(): void {
|
||||
const { indeterminate } = this.props;
|
||||
if (this.checkBoxRef.current) {
|
||||
this.checkBoxRef.current.indeterminate = indeterminate;
|
||||
}
|
||||
}
|
||||
|
||||
onToggle = (): void => {
|
||||
const { elementsToHighlight, highlightedElementsMap } = this.props;
|
||||
elementsToHighlight.forEach((element) => {
|
||||
const targetElement = getElementBySelectorPath(element.target[0]);
|
||||
if (!highlightedElementsMap.has(targetElement)) {
|
||||
return;
|
||||
}
|
||||
const { originalOutline, isHighlighted } = highlightedElementsMap.get(
|
||||
targetElement
|
||||
) as HighlightedElementData;
|
||||
const { isToggledOn } = this.props;
|
||||
if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
|
||||
const addHighlight = !isToggledOn && !isHighlighted;
|
||||
this.highlightRuleLocation(targetElement, addHighlight);
|
||||
this.saveElementDataToMap(targetElement, addHighlight, originalOutline);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
highlightRuleLocation(targetElement: HTMLElement, addHighlight: boolean): void {
|
||||
const { highlightedElementsMap, type } = this.props;
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (addHighlight) {
|
||||
setElementOutlineStyle(targetElement, `${colorsByType[type]} dotted 1px`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (highlightedElementsMap.has(targetElement)) {
|
||||
setElementOutlineStyle(
|
||||
targetElement,
|
||||
highlightedElementsMap.get(targetElement)!.originalOutline
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
saveElementDataToMap(
|
||||
targetElement: HTMLElement,
|
||||
isHighlighted: boolean,
|
||||
originalOutline: string
|
||||
): void {
|
||||
const { addElement: localAddElement } = this.props;
|
||||
const data: HighlightedElementData = { isHighlighted, originalOutline };
|
||||
const payload = { element: targetElement, highlightedElementData: data };
|
||||
localAddElement(payload);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { toggleId, elementsToHighlight, isToggledOn } = this.props;
|
||||
return (
|
||||
<Checkbox
|
||||
ref={this.checkBoxRef}
|
||||
id={toggleId}
|
||||
type="checkbox"
|
||||
aria-label="Highlight result"
|
||||
disabled={!elementsToHighlight.length}
|
||||
onChange={this.onToggle}
|
||||
checked={isToggledOn}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle);
|
||||
export default HighlightToggle;
|
||||
|
||||
@ -81,11 +81,7 @@ export const Item = (props: ItemProps) => {
|
||||
{item.description}
|
||||
</HeaderBar>
|
||||
<HighlightToggleElement>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
type={type}
|
||||
elementsToHighlight={item.nodes}
|
||||
/>
|
||||
<HighlightToggle toggleId={highlightToggleId} elementsToHighlight={item.nodes} />
|
||||
</HighlightToggleElement>
|
||||
</Wrapper>
|
||||
{open ? (
|
||||
|
||||
@ -1,355 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`HighlightToggle component should match snapshot 1`] = `
|
||||
.emotion-0 {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
<Provider
|
||||
store={
|
||||
Object {
|
||||
"dispatch": [Function],
|
||||
"getState": [Function],
|
||||
"replaceReducer": [Function],
|
||||
"subscribe": [Function],
|
||||
Symbol(observable): [Function],
|
||||
}
|
||||
}
|
||||
>
|
||||
<ThemedHighlightToggle>
|
||||
<ThemeProvider
|
||||
theme={
|
||||
Object {
|
||||
"addonActionsTheme": Object {
|
||||
"ARROW_ANIMATION_DURATION": "0",
|
||||
"ARROW_COLOR": "rgba(0,0,0,0.3)",
|
||||
"ARROW_FONT_SIZE": 8,
|
||||
"ARROW_MARGIN_RIGHT": 4,
|
||||
"BASE_BACKGROUND_COLOR": "transparent",
|
||||
"BASE_COLOR": "#333333",
|
||||
"BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
|
||||
"BASE_FONT_SIZE": 13,
|
||||
"BASE_LINE_HEIGHT": "18px",
|
||||
"HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
|
||||
"HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
|
||||
"HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
|
||||
"HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
|
||||
"HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
|
||||
"HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
|
||||
"HTML_TAG_COLOR": "rgb(168, 148, 166)",
|
||||
"OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
|
||||
"OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
|
||||
"OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
|
||||
"OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
|
||||
"OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
|
||||
"OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
|
||||
"OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
|
||||
"OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
|
||||
"OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
|
||||
"OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
|
||||
"OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
|
||||
"TABLE_BORDER_COLOR": "#aaa",
|
||||
"TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
|
||||
"TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
|
||||
"TABLE_SORT_ICON_COLOR": "#6e6e6e",
|
||||
"TABLE_TH_BACKGROUND_COLOR": "#eee",
|
||||
"TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
|
||||
"TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
|
||||
"TREENODE_FONT_SIZE": 13,
|
||||
"TREENODE_LINE_HEIGHT": "18px",
|
||||
"TREENODE_PADDING_LEFT": 12,
|
||||
},
|
||||
"animation": Object {
|
||||
"float": Object {
|
||||
"anim": 1,
|
||||
"name": "animation-6tolu8",
|
||||
"styles": "@keyframes animation-6tolu8{
|
||||
0% { transform: translateY(1px); }
|
||||
25% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-3px); }
|
||||
100% { transform: translateY(1px); }
|
||||
}",
|
||||
"toString": [Function],
|
||||
},
|
||||
"glow": Object {
|
||||
"anim": 1,
|
||||
"name": "animation-r0iffl",
|
||||
"styles": "@keyframes animation-r0iffl{
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .4; }
|
||||
}",
|
||||
"toString": [Function],
|
||||
},
|
||||
"hoverable": Object {
|
||||
"map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
|
||||
"name": "1o7rzh8-hoverable",
|
||||
"styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
|
||||
"toString": [Function],
|
||||
},
|
||||
"inlineGlow": Object {
|
||||
"map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
|
||||
"name": "x4tfcc-inlineGlow",
|
||||
"next": Object {
|
||||
"name": "animation-r0iffl",
|
||||
"next": undefined,
|
||||
"styles": "@keyframes animation-r0iffl{
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .4; }
|
||||
}",
|
||||
},
|
||||
"styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
|
||||
"toString": [Function],
|
||||
},
|
||||
"jiggle": Object {
|
||||
"anim": 1,
|
||||
"name": "animation-ynpq7w",
|
||||
"styles": "@keyframes animation-ynpq7w{
|
||||
0%, 100% { transform:translate3d(0,0,0); }
|
||||
12.5%, 62.5% { transform:translate3d(-4px,0,0); }
|
||||
37.5%, 87.5% { transform: translate3d(4px,0,0); }
|
||||
}",
|
||||
"toString": [Function],
|
||||
},
|
||||
"rotate360": Object {
|
||||
"anim": 1,
|
||||
"name": "animation-u07e3c",
|
||||
"styles": "@keyframes animation-u07e3c{
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}",
|
||||
"toString": [Function],
|
||||
},
|
||||
},
|
||||
"appBorderColor": "rgba(0,0,0,.1)",
|
||||
"appBorderRadius": 4,
|
||||
"background": Object {
|
||||
"app": "#F6F9FC",
|
||||
"bar": "#FFFFFF",
|
||||
"content": "#FFFFFF",
|
||||
"critical": "#FF4400",
|
||||
"gridCellSize": 10,
|
||||
"hoverable": "rgba(0,0,0,.05)",
|
||||
"negative": "#FEDED2",
|
||||
"positive": "#E1FFD4",
|
||||
"warning": "#FFF5CF",
|
||||
},
|
||||
"barBg": "#FFFFFF",
|
||||
"barSelectedColor": "#1EA7FD",
|
||||
"barTextColor": "#999999",
|
||||
"base": "light",
|
||||
"brand": Object {
|
||||
"image": undefined,
|
||||
"title": undefined,
|
||||
"url": undefined,
|
||||
},
|
||||
"code": Object {
|
||||
"language-json .token.boolean": Object {
|
||||
"color": "#0000ff",
|
||||
},
|
||||
"language-json .token.number": Object {
|
||||
"color": "#0000ff",
|
||||
},
|
||||
"language-json .token.property": Object {
|
||||
"color": "#2B91AF",
|
||||
},
|
||||
"namespace": Object {
|
||||
"opacity": 0.7,
|
||||
},
|
||||
"token": Object {
|
||||
"&.atrule": Object {
|
||||
"color": "#0000ff",
|
||||
},
|
||||
"&.attr-name": Object {
|
||||
"color": "#ff0000",
|
||||
},
|
||||
"&.attr-value": Object {
|
||||
"color": "#0000ff",
|
||||
},
|
||||
"&.bold": Object {
|
||||
"fontWeight": "bold",
|
||||
},
|
||||
"&.boolean": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.cdata": Object {
|
||||
"color": "#008000",
|
||||
"fontStyle": "italic",
|
||||
},
|
||||
"&.class-name": Object {
|
||||
"color": "#2B91AF",
|
||||
},
|
||||
"&.comment": Object {
|
||||
"color": "#008000",
|
||||
"fontStyle": "italic",
|
||||
},
|
||||
"&.constant": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.deleted": Object {
|
||||
"color": "#9a050f",
|
||||
},
|
||||
"&.directive.tag .tag": Object {
|
||||
"background": "#ffff00",
|
||||
"color": "#393A34",
|
||||
},
|
||||
"&.doctype": Object {
|
||||
"color": "#008000",
|
||||
"fontStyle": "italic",
|
||||
},
|
||||
"&.entity": Object {
|
||||
"color": "#ff0000",
|
||||
},
|
||||
"&.function": Object {
|
||||
"color": "#393A34",
|
||||
},
|
||||
"&.important": Object {
|
||||
"fontWeight": "bold",
|
||||
},
|
||||
"&.inserted": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.italic": Object {
|
||||
"fontStyle": "italic",
|
||||
},
|
||||
"&.keyword": Object {
|
||||
"color": "#0000ff",
|
||||
},
|
||||
"&.number": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.operator": Object {
|
||||
"color": "#393A34",
|
||||
},
|
||||
"&.prolog": Object {
|
||||
"color": "#008000",
|
||||
"fontStyle": "italic",
|
||||
},
|
||||
"&.property": Object {
|
||||
"color": "#ff0000",
|
||||
},
|
||||
"&.punctuation": Object {
|
||||
"color": "#393A34",
|
||||
},
|
||||
"&.regex": Object {
|
||||
"color": "#ff0000",
|
||||
},
|
||||
"&.selector": Object {
|
||||
"color": "#800000",
|
||||
},
|
||||
"&.string": Object {
|
||||
"color": "#A31515",
|
||||
},
|
||||
"&.symbol": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.tag": Object {
|
||||
"color": "#800000",
|
||||
},
|
||||
"&.url": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"&.variable": Object {
|
||||
"color": "#36acaa",
|
||||
},
|
||||
"WebkitFontSmoothing": "antialiased",
|
||||
"fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
|
||||
},
|
||||
},
|
||||
"color": Object {
|
||||
"ancillary": "#22a699",
|
||||
"border": "rgba(0,0,0,.1)",
|
||||
"critical": "#FFFFFF",
|
||||
"dark": "#666666",
|
||||
"darker": "#444444",
|
||||
"darkest": "#333333",
|
||||
"defaultText": "#333333",
|
||||
"gold": "#FFAE00",
|
||||
"green": "#66BF3C",
|
||||
"inverseText": "#FFFFFF",
|
||||
"light": "#F3F3F3",
|
||||
"lighter": "#F8F8F8",
|
||||
"lightest": "#FFFFFF",
|
||||
"medium": "#DDDDDD",
|
||||
"mediumdark": "#999999",
|
||||
"mediumlight": "#EEEEEE",
|
||||
"negative": "#FF4400",
|
||||
"orange": "#FC521F",
|
||||
"positive": "#66BF3C",
|
||||
"primary": "#FF4785",
|
||||
"purple": "#6F2CAC",
|
||||
"seafoam": "#37D5D3",
|
||||
"secondary": "#1EA7FD",
|
||||
"tertiary": "#FAFBFC",
|
||||
"ultraviolet": "#2A0481",
|
||||
"warning": "#E69D00",
|
||||
},
|
||||
"easing": Object {
|
||||
"rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
|
||||
},
|
||||
"input": Object {
|
||||
"background": "#FFFFFF",
|
||||
"border": "rgba(0,0,0,.1)",
|
||||
"borderRadius": 4,
|
||||
"color": "#333333",
|
||||
},
|
||||
"layoutMargin": 10,
|
||||
"typography": Object {
|
||||
"fonts": Object {
|
||||
"base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
|
||||
"mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
|
||||
},
|
||||
"size": Object {
|
||||
"code": 90,
|
||||
"l1": 32,
|
||||
"l2": 40,
|
||||
"l3": 48,
|
||||
"m1": 20,
|
||||
"m2": 24,
|
||||
"m3": 28,
|
||||
"s1": 12,
|
||||
"s2": 14,
|
||||
"s3": 16,
|
||||
},
|
||||
"weight": Object {
|
||||
"black": 900,
|
||||
"bold": 700,
|
||||
"regular": 400,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(HighlightToggle)>
|
||||
<HighlightToggle
|
||||
addElement={[Function]}
|
||||
elementsToHighlight={Array []}
|
||||
highlightedElementsMap={Map {}}
|
||||
indeterminate={false}
|
||||
isToggledOn={false}
|
||||
>
|
||||
<Styled(input)
|
||||
aria-label="Highlight result"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
>
|
||||
<input
|
||||
aria-label="Highlight result"
|
||||
checked={false}
|
||||
className="emotion-0"
|
||||
disabled={true}
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</Styled(input)>
|
||||
</HighlightToggle>
|
||||
</Connect(HighlightToggle)>
|
||||
</ThemeProvider>
|
||||
</ThemedHighlightToggle>
|
||||
</Provider>
|
||||
`;
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { Component, SyntheticEvent } from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
import { NodeResult, Result } from 'axe-core';
|
||||
import { SizeMe } from 'react-sizeme';
|
||||
import store, { clearElements } from '../redux-config';
|
||||
import HighlightToggle from './Report/HighlightToggle';
|
||||
import { RuleType } from './A11YPanel';
|
||||
import { useA11yContext } from './A11yContext';
|
||||
|
||||
// TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
|
||||
|
||||
@ -94,68 +94,55 @@ interface TabsProps {
|
||||
}[];
|
||||
}
|
||||
|
||||
interface TabsState {
|
||||
active: number;
|
||||
}
|
||||
|
||||
function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
|
||||
return items.reduce((acc, item) => acc.concat(item.nodes), [] as NodeResult[]);
|
||||
}
|
||||
|
||||
export class Tabs extends Component<TabsProps, TabsState> {
|
||||
state: TabsState = {
|
||||
active: 0,
|
||||
};
|
||||
export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
|
||||
const { tab: activeTab, setTab } = useA11yContext();
|
||||
|
||||
onToggle = (event: SyntheticEvent) => {
|
||||
this.setState({
|
||||
active: parseInt(event.currentTarget.getAttribute('data-index') || '', 10),
|
||||
});
|
||||
// removes all elements from the redux map in store from the previous panel
|
||||
store.dispatch(clearElements());
|
||||
};
|
||||
const handleToggle = React.useCallback(
|
||||
(event: React.SyntheticEvent) => {
|
||||
setTab(parseInt(event.currentTarget.getAttribute('data-index') || '', 10));
|
||||
},
|
||||
[setTab]
|
||||
);
|
||||
|
||||
render() {
|
||||
const { tabs } = this.props;
|
||||
const { active } = this.state;
|
||||
const highlightToggleId = `${tabs[active].type}-global-checkbox`;
|
||||
const highlightLabel = `Highlight results`;
|
||||
return (
|
||||
<SizeMe refreshMode="debounce">
|
||||
{({ size }: { size: any }) => (
|
||||
<Container>
|
||||
<List>
|
||||
<TabsWrapper>
|
||||
{tabs.map((tab, index) => (
|
||||
<Item
|
||||
/* eslint-disable-next-line react/no-array-index-key */
|
||||
key={index}
|
||||
data-index={index}
|
||||
active={active === index}
|
||||
onClick={this.onToggle}
|
||||
>
|
||||
{tab.label}
|
||||
</Item>
|
||||
))}
|
||||
</TabsWrapper>
|
||||
</List>
|
||||
{tabs[active].items.length > 0 ? (
|
||||
<GlobalToggle elementWidth={size.width}>
|
||||
<HighlightToggleLabel htmlFor={highlightToggleId}>
|
||||
{highlightLabel}
|
||||
</HighlightToggleLabel>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
type={tabs[active].type}
|
||||
elementsToHighlight={retrieveAllNodesFromResults(tabs[active].items)}
|
||||
label={highlightLabel}
|
||||
/>
|
||||
</GlobalToggle>
|
||||
) : null}
|
||||
{tabs[active].panel}
|
||||
</Container>
|
||||
)}
|
||||
</SizeMe>
|
||||
);
|
||||
}
|
||||
}
|
||||
const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
|
||||
const highlightLabel = `Highlight results`;
|
||||
return (
|
||||
<SizeMe refreshMode="debounce">
|
||||
{({ size }: { size: any }) => (
|
||||
<Container>
|
||||
<List>
|
||||
<TabsWrapper>
|
||||
{tabs.map((tab, index) => (
|
||||
<Item
|
||||
/* eslint-disable-next-line react/no-array-index-key */
|
||||
key={index}
|
||||
data-index={index}
|
||||
active={activeTab === index}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{tab.label}
|
||||
</Item>
|
||||
))}
|
||||
</TabsWrapper>
|
||||
</List>
|
||||
{tabs[activeTab].items.length > 0 ? (
|
||||
<GlobalToggle elementWidth={size.width}>
|
||||
<HighlightToggleLabel htmlFor={highlightToggleId}>
|
||||
{highlightLabel}
|
||||
</HighlightToggleLabel>
|
||||
<HighlightToggle
|
||||
toggleId={highlightToggleId}
|
||||
elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
|
||||
/>
|
||||
</GlobalToggle>
|
||||
) : null}
|
||||
{tabs[activeTab].panel}
|
||||
</Container>
|
||||
)}
|
||||
</SizeMe>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,11 +2,12 @@ export const ADDON_ID = 'storybook/a11y';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `a11y`;
|
||||
export const IFRAME = 'iframe';
|
||||
export const ADD_ELEMENT = 'ADD_ELEMENT';
|
||||
export const CLEAR_ELEMENTS = 'CLEAR_ELEMENTS';
|
||||
export const HIGHLIGHT_STYLE_ID = 'a11yHighlight';
|
||||
const RESULT = `${ADDON_ID}/result`;
|
||||
const REQUEST = `${ADDON_ID}/request`;
|
||||
const RUNNING = `${ADDON_ID}/running`;
|
||||
const ERROR = `${ADDON_ID}/error`;
|
||||
const MANUAL = `${ADDON_ID}/manual`;
|
||||
const HIGHLIGHT = `${ADDON_ID}/highlight`;
|
||||
|
||||
export const EVENTS = { RESULT, REQUEST, ERROR, MANUAL };
|
||||
export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL, HIGHLIGHT };
|
||||
|
||||
12
addons/a11y/src/highlight.ts
Normal file
12
addons/a11y/src/highlight.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const higlightStyle = (color: string) => `
|
||||
outline: 2px dashed ${color};
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
|
||||
}
|
||||
`;
|
||||
|
||||
export const highlightObject = (color: string) => ({
|
||||
outline: `2px dashed ${color}`,
|
||||
outlineOffset: 2,
|
||||
boxShadow: '0 0 0 6px rgba(255,255,255,0.6),',
|
||||
});
|
||||
@ -1,3 +1,5 @@
|
||||
export * from './highlight';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
14
addons/a11y/src/params.ts
Normal file
14
addons/a11y/src/params.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { ElementContext, Spec, RunOptions } from 'axe-core';
|
||||
|
||||
export interface Setup {
|
||||
element?: ElementContext;
|
||||
config: Spec;
|
||||
options: RunOptions;
|
||||
}
|
||||
|
||||
export interface A11yParameters {
|
||||
element?: ElementContext;
|
||||
config?: Spec;
|
||||
options?: RunOptions;
|
||||
manual?: boolean;
|
||||
}
|
||||
@ -3,5 +3,5 @@ export function managerEntries(entry: any[] = []) {
|
||||
}
|
||||
|
||||
export function config(entry: any[] = []) {
|
||||
return [...entry, require.resolve('./a11yRunner')];
|
||||
return [...entry, require.resolve('./a11yRunner'), require.resolve('./a11yHighlight')];
|
||||
}
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
import { createStore } from 'redux';
|
||||
import { ADD_ELEMENT, CLEAR_ELEMENTS } from './constants';
|
||||
import { HighlightedElementData } from './components/Report/HighlightToggle';
|
||||
|
||||
// actions
|
||||
|
||||
// add element is passed a HighlightedElementData object as the payload
|
||||
export function addElement(payload: { element: HTMLElement; data: HighlightedElementData }) {
|
||||
return { type: ADD_ELEMENT, payload };
|
||||
}
|
||||
|
||||
// clear elements is a function to remove elements from the map and reset elements to their original state
|
||||
export function clearElements() {
|
||||
return { type: CLEAR_ELEMENTS };
|
||||
}
|
||||
|
||||
// reducers
|
||||
const initialState = {
|
||||
highlightedElementsMap: new Map(),
|
||||
};
|
||||
|
||||
function rootReducer(state = initialState, action: any) {
|
||||
if (action.type === ADD_ELEMENT) {
|
||||
return {
|
||||
...state,
|
||||
highlightedElementsMap: state.highlightedElementsMap.set(
|
||||
action.payload.element,
|
||||
action.payload.highlightedElementData
|
||||
),
|
||||
};
|
||||
}
|
||||
if (action.type === CLEAR_ELEMENTS) {
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const key of Array.from(state.highlightedElementsMap.keys())) {
|
||||
key.style.outline = state.highlightedElementsMap.get(key).originalOutline;
|
||||
state.highlightedElementsMap.delete(key);
|
||||
}
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
// store
|
||||
const store = createStore(rootReducer);
|
||||
export default store;
|
||||
@ -5,6 +5,7 @@ import { addons, types } from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import { ColorBlindness } from './components/ColorBlindness';
|
||||
import { A11YPanel } from './components/A11YPanel';
|
||||
import { A11yContextProvider } from './components/A11yContext';
|
||||
|
||||
const Hidden = styled.div(() => ({
|
||||
'&, & svg': {
|
||||
@ -82,7 +83,7 @@ const PreviewWrapper: FunctionComponent<{}> = (p) => (
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
addons.register(ADDON_ID, (api) => {
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: '',
|
||||
type: types.TOOL,
|
||||
@ -93,7 +94,11 @@ addons.register(ADDON_ID, (api) => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'Accessibility',
|
||||
type: types.PANEL,
|
||||
render: ({ active = true, key }) => <A11YPanel key={key} api={api} active={active} />,
|
||||
render: ({ active = true, key }) => (
|
||||
<A11yContextProvider key={key} active={active}>
|
||||
<A11YPanel />
|
||||
</A11yContextProvider>
|
||||
),
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"],
|
||||
"types": ["webpack-env", "jest"],
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
@ -10,10 +10,6 @@
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/__tests__/**/*"]
|
||||
}
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { highlightObject } from '@storybook/addon-a11y';
|
||||
import { themes, convert, styled } from '@storybook/theming';
|
||||
|
||||
import Button from '../../components/addon-a11y/Button';
|
||||
|
||||
const text = 'Testing the a11y highlight';
|
||||
|
||||
export default {
|
||||
title: 'Addons/A11y/Highlight',
|
||||
component: Button,
|
||||
parameters: {
|
||||
options: { selectedPanel: 'storybook/a11y/panel' },
|
||||
},
|
||||
decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
|
||||
};
|
||||
|
||||
const PassesHighlight = styled.div(highlightObject(convert(themes.normal).color.positive));
|
||||
const IncompleteHighlight = styled.div(highlightObject(convert(themes.normal).color.warning));
|
||||
const ViolationsHighlight = styled.div(highlightObject(convert(themes.normal).color.negative));
|
||||
|
||||
export const Passes = () => <PassesHighlight>{text}</PassesHighlight>;
|
||||
export const Incomplete = () => <IncompleteHighlight>{text}</IncompleteHighlight>;
|
||||
export const Violations = () => <ViolationsHighlight>{text}</ViolationsHighlight>;
|
||||
39
yarn.lock
39
yarn.lock
@ -4152,14 +4152,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
|
||||
integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.0":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
|
||||
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
"@types/html-minifier-terser@^5.0.0":
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.0.0.tgz#7532440c138605ced1b555935c3115ddd20e8bef"
|
||||
@ -4421,16 +4413,6 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-redux@^7.0.6":
|
||||
version "7.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.7.tgz#12a0c529aba660696947384a059c5c6e08185c7a"
|
||||
integrity sha512-U+WrzeFfI83+evZE2dkZ/oF/1vjIYgqrb5dGgedkqVV8HEfDFujNgWCwHL89TDuWKb47U0nTBT6PLGq4IIogWg==
|
||||
dependencies:
|
||||
"@types/hoist-non-react-statics" "^3.3.0"
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
redux "^4.0.0"
|
||||
|
||||
"@types/react-select@^3.0.11":
|
||||
version "3.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-3.0.11.tgz#b69b6fe1999bedfb05bd7499327206e16a7fb00e"
|
||||
@ -24919,17 +24901,6 @@ react-popper@^1.3.7:
|
||||
typed-styles "^0.0.7"
|
||||
warning "^4.0.2"
|
||||
|
||||
react-redux@^7.0.2:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
|
||||
integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.7.2"
|
||||
react-is "^16.9.0"
|
||||
|
||||
react-scripts@3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"
|
||||
@ -25469,14 +25440,6 @@ redeyed@~1.0.0:
|
||||
dependencies:
|
||||
esprima "~3.0.0"
|
||||
|
||||
redux@^4.0.0, redux@^4.0.1:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
|
||||
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
symbol-observable "^1.2.0"
|
||||
|
||||
reflect-metadata@^0.1.12, reflect-metadata@^0.1.2:
|
||||
version "0.1.13"
|
||||
resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
|
||||
@ -28420,7 +28383,7 @@ svgo@^1.0.0, svgo@^1.2.2, svgo@^1.3.2:
|
||||
unquote "~1.1.1"
|
||||
util.promisify "~1.0.0"
|
||||
|
||||
symbol-observable@1.2.0, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
|
||||
symbol-observable@1.2.0, symbol-observable@^1.1.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
|
||||
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user