Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon A11y: Create a11y test provider and revamp a11y addon #29643

Merged
merged 129 commits into from
Dec 9, 2024
Merged
Changes from 1 commit
Commits
Show all changes
129 commits
Select commit Hold shift + click to select a range
1f93e44
[addon-a11y] Simplify global highlight styles to avoid issues when fe…
JohannesFischer Nov 5, 2024
a913610
Implement afterEach
kasperpeulen Nov 11, 2024
af4c3d2
Merge branch 'next' into 24450-addon-a11y-highlight-visual-bug
JohannesFischer Nov 12, 2024
3065626
Test afterEach
kasperpeulen Nov 12, 2024
83af2a6
Add afterEach normalizers
kasperpeulen Nov 12, 2024
8029b37
Fix test
kasperpeulen Nov 12, 2024
b918869
Bump @storybook/csf
kasperpeulen Nov 12, 2024
312b25d
Make dedicated order-of-hooks test
kasperpeulen Nov 12, 2024
88a1ad2
Merge branch 'next' into 24450-addon-a11y-highlight-visual-bug
JohannesFischer Nov 14, 2024
e038e8b
Fix tests
kasperpeulen Nov 14, 2024
dd242dc
Merge remote-tracking branch 'origin/kasper/after-each' into valentin…
valentinpalkovic Nov 14, 2024
57a8cea
Core: Implement Story Completed
valentinpalkovic Nov 14, 2024
6d30bb9
Remove unhandledException from STORY_COMPLETED event
valentinpalkovic Nov 14, 2024
e49bc0f
Rename storyCompleted to storyFinished
valentinpalkovic Nov 14, 2024
b7c1d02
Update @storybook/csf
valentinpalkovic Nov 14, 2024
aa95d2a
Rename storyCompleted to storyFinished
valentinpalkovic Nov 14, 2024
08477ec
Refactor status of the story finished payload
valentinpalkovic Nov 14, 2024
c9c7249
Move afterEach after storyCompleted
valentinpalkovic Nov 15, 2024
d907091
Add StoryFinished payload test
valentinpalkovic Nov 15, 2024
96dad8c
Enhance Report interface to support generic result type
valentinpalkovic Nov 15, 2024
7668055
Remove redundant comments in Preview component for clarity
valentinpalkovic Nov 15, 2024
b80ee26
Refactor a11y addon to use afterEach and reporting API
valentinpalkovic Nov 15, 2024
c8647d4
Add tests
valentinpalkovic Nov 18, 2024
bc3da7a
Fix tests
valentinpalkovic Nov 18, 2024
a93ea7d
Fix E2E tests
valentinpalkovic Nov 19, 2024
d3923d2
Add stories for A11yPanel
valentinpalkovic Nov 19, 2024
2eebee1
Add discrepancy handling to A11yPanel
valentinpalkovic Nov 19, 2024
79ad98c
Fix tests
valentinpalkovic Nov 20, 2024
6dfea64
Merge pull request #29661 from storybookjs/valentin/add-a11y-discrepa…
valentinpalkovic Nov 20, 2024
667d403
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 20, 2024
003e808
Fix potential undefined issue
valentinpalkovic Nov 20, 2024
141de06
Fix tests
valentinpalkovic Nov 20, 2024
66931ce
Fix tests
valentinpalkovic Nov 20, 2024
9622763
Support new parameters and globals for a11y
valentinpalkovic Nov 21, 2024
cfae158
Use vitest-axe for formatting purposes instead
valentinpalkovic Nov 22, 2024
3f1ae4e
Fix environment usage in preview file
valentinpalkovic Nov 22, 2024
9ed6077
Fix environment usage in preview file
valentinpalkovic Nov 22, 2024
4f485f3
Fix tests
valentinpalkovic Nov 22, 2024
c4039e1
Merge pull request #29682 from storybookjs/valentin/support-new-param…
valentinpalkovic Nov 22, 2024
e4604d8
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 22, 2024
5d084d4
Merge branch 'next' into valentin/unified-a11y-testing
valentinpalkovic Nov 23, 2024
aae1bac
Merge pull request #29552 from JohannesFischer/24450-addon-a11y-highl…
valentinpalkovic Nov 25, 2024
02d020b
Merge branch 'next' into valentin/unified-a11y-testing
valentinpalkovic Nov 25, 2024
0791b02
Add docs and migration guide for addon-a11y
valentinpalkovic Nov 25, 2024
9fbe2cc
Update code/addons/a11y/README.md
valentinpalkovic Nov 25, 2024
3d18bd4
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Nov 25, 2024
80119bd
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Nov 25, 2024
1379771
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Nov 25, 2024
e19095d
Update code/addons/a11y/README.md
valentinpalkovic Nov 25, 2024
bd2ec3b
Update code/addons/a11y/README.md
valentinpalkovic Nov 25, 2024
1abb89d
Add automigration for addon-a11y in combination with addon-test
valentinpalkovic Nov 25, 2024
e8db191
Fix import
valentinpalkovic Nov 25, 2024
a083021
Implement backend for addon-a11y addon-test integration
valentinpalkovic Nov 25, 2024
4f96924
Fake frontend for addon-a11y in addon-test integration
valentinpalkovic Nov 25, 2024
32a95d9
Fix typing issues
valentinpalkovic Nov 25, 2024
95eb08b
Update @storybook/csf
valentinpalkovic Nov 25, 2024
9a3ec6d
Update type for reporting api
valentinpalkovic Nov 25, 2024
0661d68
Refactor condition for Vitest standalone run check in preview.tsx
valentinpalkovic Nov 25, 2024
91c07f1
Refactor Vitest standalone run check to use a function for improved e…
valentinpalkovic Nov 25, 2024
4a19887
Add error handling to transformSetupFile for missing setProjectAnnota…
valentinpalkovic Nov 25, 2024
033c26e
Update documentation link in addon-a11y-addon-test for addon test gui…
valentinpalkovic Nov 25, 2024
00e5104
Update MIGRATION.md
valentinpalkovic Nov 25, 2024
361932a
Update MIGRATION.md
valentinpalkovic Nov 25, 2024
337cda0
Move STORYBOOK environment variable to configOverride in VitestManager
valentinpalkovic Nov 26, 2024
ec7f512
Update afterEach tests to expect errors to be thrown
valentinpalkovic Nov 26, 2024
f7709a1
Refactor postInstall function to streamline addon detection and impro…
valentinpalkovic Nov 26, 2024
8289960
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 26, 2024
1915e36
Fix postinstall script in addon-test
valentinpalkovic Nov 26, 2024
7f596df
Enhance a11y documentation and update a11yRunner to disable 'region' …
valentinpalkovic Nov 26, 2024
7950a5b
Fix esm only import from vitest
valentinpalkovic Nov 26, 2024
ffcf9e3
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 27, 2024
7ec1e7e
Provide fix for Vitest 2.1.4 and above
valentinpalkovic Nov 27, 2024
3de56e9
Improve automigration message
valentinpalkovic Nov 27, 2024
8fb31f7
Add check for Vitest standalone run in global setup
valentinpalkovic Nov 27, 2024
2292b6e
Add a11y addon in automigration to the beginning of the project annot…
valentinpalkovic Nov 27, 2024
de6b1f2
Add tags support for addon-a11y
valentinpalkovic Nov 27, 2024
29bc6b0
Update documentation
valentinpalkovic Nov 27, 2024
5ab29c6
Refactor a11yRunner and utils for improved configuration handling and…
valentinpalkovic Nov 27, 2024
0437d77
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 27, 2024
0b796a4
Reorder import statements for project annotations in postInstall func…
valentinpalkovic Nov 27, 2024
45c9a76
Update environment variable handling for Vitest integration in Storybook
valentinpalkovic Nov 27, 2024
d2d4b78
Fix story interaction
valentinpalkovic Nov 28, 2024
dda7f13
Fix types
valentinpalkovic Nov 28, 2024
9fd3cd4
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 28, 2024
7798a49
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Nov 29, 2024
27424e6
Merge remote-tracking branch 'origin/jeppe/vitest-coverage-backend' i…
valentinpalkovic Nov 29, 2024
e52d1e6
refactor: update reporter API to use 'type' instead of 'id' and renam…
valentinpalkovic Nov 29, 2024
74a2bdc
feat: Add accessibility support in TestProviderRender and related com…
valentinpalkovic Nov 29, 2024
e6358ba
Merge remote-tracking branch 'origin/jeppe/vitest-coverage-backend' i…
valentinpalkovic Nov 29, 2024
ed794c8
Re-add ts-expect-error
valentinpalkovic Nov 29, 2024
39ac2bd
fix: Update message to clarify manual update instructions for vitest.…
valentinpalkovic Nov 29, 2024
9cd7e77
fix: Update accessibility configuration to use environment variable f…
valentinpalkovic Nov 29, 2024
c0d50cc
feat: Add initialGlobals for accessibility manual setting in preview.tsx
valentinpalkovic Nov 29, 2024
22987ff
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Dec 2, 2024
ceb454b
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Dec 2, 2024
6ebfab7
Update MIGRATION.md
valentinpalkovic Dec 2, 2024
490506d
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Dec 2, 2024
74b1af6
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Dec 2, 2024
e142500
Update docs/writing-tests/accessibility-testing.mdx
valentinpalkovic Dec 2, 2024
ccf53ef
Simplify @storybook/addon-a11y docs and reference Storybook docs
valentinpalkovic Dec 2, 2024
3d938ba
Fix documentation link
valentinpalkovic Dec 2, 2024
51915d7
Add accessibility addon test setup snippets and update documentation
valentinpalkovic Dec 2, 2024
941ba1b
Add Storybook snippets for disabling accessibility tests in stories
valentinpalkovic Dec 2, 2024
7a8ccfd
Add snippets for overriding accessibility test warning levels and upd…
valentinpalkovic Dec 2, 2024
d0cc243
Fix a11y addon in Vitest 2.1.4 and above
valentinpalkovic Dec 2, 2024
a0c12ae
Starting to address snippets and other minor items
jonniebigodes Dec 2, 2024
763f5ee
Removes extra spacing
jonniebigodes Dec 2, 2024
fdc8078
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
kasperpeulen Dec 6, 2024
45f9037
Update status API
kasperpeulen Dec 6, 2024
8ee5ed6
Merge branch 'next' into valentin/unified-a11y-testing
kasperpeulen Dec 6, 2024
96fbd29
move internal a11y stories to the right directory
yannbf Dec 2, 2024
320e605
add a11y addon to vitest sandboxes
yannbf Dec 2, 2024
f20dcb2
fix a11y annotations
yannbf Dec 2, 2024
fd475c5
CLI: Make colors on starter components more accessible
yannbf Dec 6, 2024
739c40d
Hide sidebarContext menu
kasperpeulen Dec 6, 2024
aa40afa
Fix CSF issues
kasperpeulen Dec 6, 2024
b86c24b
Merge branch 'valentin/unified-a11y-testing' into yann/add-a11y-addon…
kasperpeulen Dec 6, 2024
dd3f1df
Filter errors
kasperpeulen Dec 6, 2024
1294596
Merge branch 'valentin/unified-a11y-testing' into yann/add-a11y-addon…
kasperpeulen Dec 6, 2024
19468e4
Merge pull request #29764 from storybookjs/yann/add-a11y-addon-to-san…
kasperpeulen Dec 6, 2024
c5504d5
fix controls e2e test
yannbf Dec 7, 2024
ff35403
Merge remote-tracking branch 'origin/next' into valentin/unified-a11y…
valentinpalkovic Dec 9, 2024
b66f925
Update pretty-format dependency to use caret versioning
valentinpalkovic Dec 9, 2024
b9af42f
Add accessibility addon to Kitchen Sink React and update component te…
valentinpalkovic Dec 9, 2024
8237f9e
Refactor test status updates to use async/await for improved readabil…
valentinpalkovic Dec 9, 2024
1f93edf
Update a11y configuration logic in vitest-plugin to depend on VITEST_…
valentinpalkovic Dec 9, 2024
aef5c10
Fix optional chaining for ancestors and path properties in Interactio…
valentinpalkovic Dec 9, 2024
f409f1d
Fix label casing for 'Start Component Tests' and update expand button…
valentinpalkovic Dec 9, 2024
b20b03b
Remove accessibility addon from Storybook configuration in react kitc…
valentinpalkovic Dec 9, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[addon-a11y] Simplify global highlight styles to avoid issues when fe…
…tching results
  • Loading branch information
JohannesFischer committed Nov 5, 2024
commit 1f93e44d287d754614944c5e318bec17d03a8e84
60 changes: 27 additions & 33 deletions code/addons/a11y/src/components/Tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,21 @@ const HighlightToggleLabel = styled.label(({ theme }) => ({
color: theme.color.dark,
}));

const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
const maxWidthBeforeBreak = 450;
return {
cursor: 'pointer',
fontSize: 13,
lineHeight: '20px',
padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 10px 15px',
height: '40px',
border: 'none',
marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
display: 'flex',
alignItems: 'center',
width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,

input: {
marginLeft: 10,
marginRight: 0,
marginTop: -1,
marginBottom: 0,
},
};
});
const GlobalToggle = styled.div(() => ({
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
fontSize: 13,
height: 40,
padding: '0 15px',

input: {
marginBottom: 0,
marginLeft: 10,
marginRight: 0,
marginTop: -1,
},
}));

const Item = styled.button<{ active?: boolean }>(
({ theme }) => ({
Expand Down Expand Up @@ -82,6 +73,7 @@ const List = styled.div(({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
background: theme.background.app,
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
whiteSpace: 'nowrap',
}));
Expand Down Expand Up @@ -131,16 +123,18 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
</Item>
))}
</TabsWrapper>
{tabs[activeTab].items.length > 0 ? (
<GlobalToggle>
<HighlightToggleLabel htmlFor={highlightToggleId}>
{highlightLabel}
</HighlightToggleLabel>
<HighlightToggle
toggleId={highlightToggleId}
elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
/>
</GlobalToggle>
) : null}
</List>
{tabs[activeTab].items.length > 0 ? (
<GlobalToggle elementWidth={width || 0}>
<HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
<HighlightToggle
toggleId={highlightToggleId}
elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
/>
</GlobalToggle>
) : null}
{tabs[activeTab].panel}
</Container>
);
Expand Down
Loading