Add discrepancy handling to A11yPanel #29661
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 79ad98c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
8 file(s) reviewed, 9 comment(s)
Edit PR Review Bot Settings | Greptile
| <> | ||
| <>Manually run the accessibility scan.</> | ||
| <ActionBar key="actionbar" actionItems={manualActionItems} /> |
There was a problem hiding this comment.
syntax: Unnecessary nested fragment (<>) inside another fragment. Remove the inner fragment.
| )} | ||
| {(status === 'ready' || status === 'ran') && ( | ||
| {discrepancy && <TestDiscrepancyMessage discrepancy={discrepancy} />} | ||
| {status === 'ready' || status === 'ran' ? ( | ||
| <> | ||
| <ScrollArea vertical horizontal> | ||
| <Tabs key="tabs" tabs={tabs} /> |
There was a problem hiding this comment.
style: key prop on Tabs is unnecessary since it's not in an array/iteration
| )} | ||
| {(status === 'ready' || status === 'ran') && ( | ||
| {discrepancy && <TestDiscrepancyMessage discrepancy={discrepancy} />} | ||
| {status === 'ready' || status === 'ran' ? ( | ||
| <> | ||
| <ScrollArea vertical horizontal> | ||
| <Tabs key="tabs" tabs={tabs} /> | ||
| </ScrollArea> | ||
| <ActionBar key="actionbar" actionItems={readyActionItems} /> |
There was a problem hiding this comment.
style: key prop on ActionBar is unnecessary since it's not in an array/iteration
| {status === 'manual' && ( | ||
| <> | ||
| <>Manually run the accessibility scan.</> | ||
| <ActionBar key="actionbar" actionItems={manualActionItems} /> |
There was a problem hiding this comment.
style: key prop on ActionBar is unnecessary since it's not in an array/iteration
| <br /> | ||
| {typeof error === 'string' ? error : JSON.stringify(error)} | ||
| ) : ( | ||
| <Centered style={{ marginTop: discrepancy ? '1em' : 0 }}> |
There was a problem hiding this comment.
style: Consider extracting inline style to a styled component for consistency with the rest of the codebase
| color: 'inherit', | ||
| margin: '0 0.2em', | ||
| padding: '0 0.2em', | ||
| background: 'rgba(255, 255, 255, 0.8)', |
There was a problem hiding this comment.
style: background color with alpha channel may not provide sufficient contrast with dark themes
| export const DOCUMENTATION_LINK = 'writing-tests/accessibility-testing'; | ||
| export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-results-in-multiple-environments`; |
There was a problem hiding this comment.
style: consider making this a full URL path rather than a relative path to ensure it works across different contexts
| const managerContext: any = { | ||
| state: {}, | ||
| api: { | ||
| getDocsUrl: fn().mockName('api::getDocsUrl'), | ||
| }, | ||
| }; |
There was a problem hiding this comment.
style: managerContext is typed as 'any' - consider creating a proper type for this mock object
| const managerContext: any = { | ||
| state: {}, | ||
| api: { | ||
| getDocsUrl: fn().mockName('api::getDocsUrl'), | ||
| }, | ||
| }; |
There was a problem hiding this comment.
style: managerContext type should be properly defined instead of using 'any'
valentinpalkovic
merged commit 6dfea64
into
valentin/unified-a11y-testing
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-29661-sha-2eebee12. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-29661-sha-2eebee12 sandboxor in an existing project withnpx storybook@0.0.0-pr-29661-sha-2eebee12 upgrade.More information
0.0.0-pr-29661-sha-2eebee12valentin/add-a11y-discrepancy-handling2eebee121732028709)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=29661Greptile Summary
Added discrepancy handling to the A11YPanel component to detect and display messages when accessibility test results differ between CLI and browser environments.
TestDiscrepancyMessagecomponent in/code/addons/a11y/src/components/TestDiscrepancyMessage.tsxto display environment-specific test result differencesdiscrepancyfield to A11yContext in/code/addons/a11y/src/components/A11yContext.tsxto track test result mismatches/code/addons/a11y/src/components/A11yContext.test.tsxfor discrepancy scenarios/code/addons/a11y/src/constants.tsfor explaining discrepancy cases/code/addons/a11y/template/stories/TestDiscrepancyMessage.stories.tsxto showcase different discrepancy states