-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TextField] Replace autocomplete off with nope (#4053)
* [TextField] Replace autocomplete off with nope * Add to UNRELEASED * Update the accessibility check to use the shared package * Adding package and bumping node version * Bump node version in workflows * Fix iframe path Co-authored-by: Alex Page <[email protected]>
- Loading branch information
Dominic McPhee
and
Alex Page
authored
Mar 12, 2021
1 parent
433525e
commit a4f6710
Showing
9 changed files
with
148 additions
and
117 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| v10.15.0 | ||
| v10.24.0 |
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
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 |
|---|---|---|
| @@ -1,107 +1,25 @@ | ||
| /* eslint-disable no-console */ | ||
| const os = require('os'); | ||
| const path = require('path'); | ||
|
|
||
| const puppeteer = require('puppeteer'); | ||
| const pMap = require('p-map'); | ||
| const chalk = require('chalk'); | ||
|
|
||
| // eslint-disable-next-line node/no-path-concat | ||
| const iframePath = `file://${__dirname}/../build/storybook/static/iframe.html`; | ||
| const concurrentCount = os.cpus().length; | ||
| const skippedStoryIds = ['playground-playground', 'all-examples']; | ||
|
|
||
| const getUrls = async (browser) => { | ||
| // Get the URLS from storybook | ||
| const page = await browser.newPage(); | ||
| await page.goto(iframePath); | ||
| const storyIds = await page.evaluate(() => | ||
| window.__STORYBOOK_CLIENT_API__.raw().map((story) => story.id), | ||
| ); | ||
| await page.close(); | ||
|
|
||
| const urls = storyIds.reduce((memo, storyId) => { | ||
| // If it is a story id that is not in excludedStoryIds | ||
| if (skippedStoryIds.every((id) => !storyId.includes(id))) { | ||
| const url = `${iframePath}?id=${storyId}`; | ||
| memo.push( | ||
| url, | ||
| // Dark mode has lots of errors. It is still very WIP so ignore for now | ||
| // `${url}&contexts=Color%20scheme%3DDark%20Mode`, | ||
| ); | ||
| } | ||
|
|
||
| return memo; | ||
| }, []); | ||
|
|
||
| return urls; | ||
| }; | ||
|
|
||
| const formatFailure = (fail) => { | ||
| return ` - ${fail.failureSummary.split('\n ')[1]}\n ${fail.html}`; | ||
| }; | ||
|
|
||
| const formatMessage = (id, violations) => { | ||
| const url = chalk.underline.blue( | ||
| `http://localhost:6006/iframe.html?id=all-components-${id}`, | ||
| ); | ||
| return violations | ||
| .map((fail) => { | ||
| const message = fail.nodes | ||
| .map((error) => formatFailure(error)) | ||
| .join('\n'); | ||
| return `${chalk.red(fail.impact)} => ${url}\n${message}`; | ||
| }) | ||
| .join('\n'); | ||
| }; | ||
| const {storybookA11yTest} = require('@shopify/storybook-a11y-test'); | ||
|
|
||
| (async () => { | ||
| try { | ||
| // Open a browser | ||
| console.log(chalk.bold(`🌐 Opening ${concurrentCount} tabs in chromium`)); | ||
| const browser = await puppeteer.launch(); | ||
|
|
||
| // Get the test ids from storybook | ||
| const testIds = await getUrls(browser); | ||
|
|
||
| console.log(chalk.bold(`🧪 Testing ${testIds.length} urls with axe`)); | ||
|
|
||
| // Test the pages with axe | ||
| const testPage = async (url) => { | ||
| const id = url.replace(`${iframePath}?id=all-components-`, ''); | ||
| console.log(` - ${id}`); | ||
|
|
||
| try { | ||
| const page = await browser.newPage(); | ||
| await page.goto(url); | ||
| const result = await page.evaluate(() => | ||
| window.axe.run(document.getElementById('root'), {}), | ||
| ); | ||
| await page.close(); | ||
|
|
||
| if (result.violations.length) { | ||
| return formatMessage(id, result.violations); | ||
| } | ||
| } catch (error) { | ||
| return `please retry => ${id}:\n - ${error.message}`; | ||
| } | ||
| }; | ||
|
|
||
| const results = await pMap(testIds, testPage, { | ||
| concurrency: concurrentCount, | ||
| }); | ||
| await browser.close(); | ||
|
|
||
| // Format the results and log them out | ||
| const messages = results.filter((x) => x); | ||
| if (messages.length) { | ||
| console.error(chalk.bold(`‼️ Test failures found`)); | ||
| console.log(messages.join('\n')); | ||
| process.exit(1); | ||
| } else { | ||
| console.log(chalk.bold('🧚♀️ Accessibility is all g')); | ||
| } | ||
| } catch (error) { | ||
| console.error(error.message); | ||
| const options = { | ||
| iframePath: path.join( | ||
| 'file://', | ||
| __dirname, | ||
| '../build/storybook/static/iframe.html', | ||
| ), | ||
| skippedStoryIds: ['playground-playground', 'all-examples'], | ||
| }; | ||
|
|
||
| const results = await storybookA11yTest(options); | ||
|
|
||
| if (results.length) { | ||
| console.error(`‼️ Test failures found`); | ||
| console.log(results.join('\n')); | ||
| process.exit(1); | ||
| } else { | ||
| console.log('🧚♀️ Accessibility is all g'); | ||
| } | ||
| })(); |
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
Oops, something went wrong.