-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #29661 from storybookjs/valentin/add-a11y-discrepa…
…ncy-handling Add discrepancy handling to A11yPanel
Showing
8 changed files
with
374 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
code/addons/a11y/src/components/TestDiscrepancyMessage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import React, { useMemo } from 'react'; | ||
|
||
import { Link } from 'storybook/internal/components'; | ||
import { useStorybookApi } from 'storybook/internal/manager-api'; | ||
import { styled } from 'storybook/internal/theming'; | ||
|
||
import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants'; | ||
|
||
const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({ | ||
textAlign: 'start', | ||
padding: '11px 15px', | ||
fontSize: `${typography.size.s2}px`, | ||
fontWeight: typography.weight.regular, | ||
lineHeight: '1rem', | ||
background: background.app, | ||
borderBottom: `1px solid ${color.border}`, | ||
color: color.defaultText, | ||
backgroundClip: 'padding-box', | ||
position: 'relative', | ||
code: { | ||
fontSize: `${typography.size.s1 - 1}px`, | ||
color: 'inherit', | ||
margin: '0 0.2em', | ||
padding: '0 0.2em', | ||
background: 'rgba(255, 255, 255, 0.8)', | ||
borderRadius: '2px', | ||
boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', | ||
}, | ||
})); | ||
|
||
export type TestDiscrepancy = | ||
| 'browserPassedCliFailed' | ||
| 'cliPassedBrowserFailed' | ||
| 'cliFailedButModeManual' | ||
| null; | ||
|
||
interface TestDiscrepancyMessageProps { | ||
discrepancy: TestDiscrepancy; | ||
} | ||
export const TestDiscrepancyMessage = ({ discrepancy }: TestDiscrepancyMessageProps) => { | ||
const api = useStorybookApi(); | ||
const docsUrl = api.getDocsUrl({ | ||
subpath: DOCUMENTATION_DISCREPANCY_LINK, | ||
versioned: true, | ||
renderer: true, | ||
}); | ||
|
||
const message = useMemo(() => { | ||
switch (discrepancy) { | ||
case 'browserPassedCliFailed': | ||
return 'Accessibility checks passed in this browser but failed in the CLI.'; | ||
case 'cliPassedBrowserFailed': | ||
return 'Accessibility checks passed in the CLI but failed in this browser.'; | ||
case 'cliFailedButModeManual': | ||
return 'Accessibility checks failed in the CLI. Run the tests manually to see the results.'; | ||
default: | ||
return null; | ||
} | ||
}, [discrepancy]); | ||
|
||
if (!message) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Wrapper> | ||
{message}{' '} | ||
<Link href={docsUrl} target="_blank" withArrow> | ||
Learn what could cause this | ||
</Link> | ||
</Wrapper> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
code/addons/a11y/template/stories/TestDiscrepancyMessage.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
|
||
import { ManagerContext } from 'storybook/internal/manager-api'; | ||
|
||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { fn } from '@storybook/test'; | ||
|
||
import { TestDiscrepancyMessage } from '../../src/components/TestDiscrepancyMessage'; | ||
|
||
type Story = StoryObj<typeof TestDiscrepancyMessage>; | ||
|
||
const managerContext: any = { | ||
state: {}, | ||
api: { | ||
getDocsUrl: fn().mockName('api::getDocsUrl'), | ||
}, | ||
}; | ||
|
||
export default { | ||
title: 'TestDiscrepancyMessage', | ||
component: TestDiscrepancyMessage, | ||
parameters: { | ||
layout: 'fullscreen', | ||
}, | ||
args: { | ||
storyId: 'story-id', | ||
}, | ||
decorators: [ | ||
(storyFn) => ( | ||
<ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider> | ||
), | ||
], | ||
} as Meta<typeof TestDiscrepancyMessage>; | ||
|
||
export const BrowserPassedCliFailed: Story = { | ||
args: { | ||
discrepancy: 'browserPassedCliFailed', | ||
}, | ||
}; | ||
|
||
export const CliPassedBrowserFailed: Story = { | ||
args: { | ||
discrepancy: 'cliPassedBrowserFailed', | ||
}, | ||
}; | ||
|
||
export const CliFailedButModeManual: Story = { | ||
args: { | ||
discrepancy: 'cliFailedButModeManual', | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters