From 60a2236062ed901105208c9165209e9300ca902b Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 8 Oct 2024 13:28:14 +0200 Subject: [PATCH] update contrast check --- .github/workflows/a11y-contrast.yml | 92 ++++++++++--------- .../a11y-contrast/prepare-check-results.js | 38 ++++++++ src/tokens/base/color/light/light.json5 | 2 +- 3 files changed, 89 insertions(+), 43 deletions(-) create mode 100644 .github/workflows/scripts/a11y-contrast/prepare-check-results.js diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml index 36aaeaea4..5c6997bb2 100644 --- a/.github/workflows/a11y-contrast.yml +++ b/.github/workflows/a11y-contrast.yml @@ -41,46 +41,11 @@ jobs: - name: Prepare check results id: check-results continue-on-error: true - uses: actions/github-script@v7 - with: - script: | - const results = require('./color-contrast-check.json'); - const faildChecks = results.reduce((acc, {failingContrast}) => acc + failingContrast, 0); - - // prepare outputs for all failed themes - const failedResults = results.filter(themeResults => themeResults.failingContrast > 0).map(({theme, failingContrast, markdownTable}) => ({ - title: `# ❌ \`${theme}\`: ${failingContrast} checks failed`, - body: `${markdownTable}` - })) - - // prepare summary body - const summaryMarkdown = '## Design Token Contrast Check\n\n' + - results.map(({theme, failingContrast, failedMarkdownTable}) => { - if(failingContrast === 0) { - return "### \\`"+theme+"\\`: " + `✅ all checks passed\n\n` - } - // if there are failing checks, return a summary with a details section - return "### \\`"+theme+"\\`: " + `❌ ${failingContrast} checks failed\n\n` + - '
' + - `Show results table for theme: ${theme}\n` + - " \n"+ - ` ${failedMarkdownTable}` + - '\n
' - }).join('\n\n') - - // set output - core.setOutput('summaryMarkdown', summaryMarkdown) - core.setOutput('failedResults', failedResults) - core.setOutput('faildChecks', faildChecks) - - // fail action if any contrast check fails - if (faildChecks > 0) { - core.setFailed(`\u001b[91;1m🛑 ${faildChecks} contrast checks failed. Please fix the failing checks and try again.\n\nCheck action summary for more details.`); - } - // success - else { - core.info('\u001b[32;1m✅ All contrast checks passed!') - } + run: | + node ${{ github.action_path }}/scripts/a11y-contrast/prepareCheckResults.js + shell: bash + - run: ls -la ${{ github.action_path }} + - run: ls -la ${{ github.workspace }} - name: Report check results as summary uses: actions/github-script@v7 @@ -110,9 +75,28 @@ jobs: repo: context.repo.repo }); + const possibleTitles = [ + '❌ `light`:', + '❌ `light_high_contrast`:', + '❌ `light_colorblind`:', + '❌ `light_tritanopia`:', + '❌ `dark`:', + '❌ `dark_dimmed`:', + '❌ `dark_high_contrast`:', + '❌ `dark_colorblind`:', + '❌ `dark_tritanopia`:' + ] + + // get comments of token issues + let currentComments = comments.filter(comment => possibleTitles.some(titleStart => comment.body.includes(titleStart))); + for (const {title, body} of results) { // get token issue - const tokenCheckComment = comments.filter(comment => comment.body.includes(title)); + const titleStart = title.substring(0, title.indexOf(':') + 1); + // remove from currentComments + currentComments = currentComments.filter(comment => !comment.body.includes(titleStart)); + // + const tokenCheckComment = comments.filter(comment => comment.body.includes(titleStart)); const outputBody = `${title}\n\n${body}\n\n→ Details` // if token issue exists, update it @@ -136,6 +120,18 @@ jobs: } } + // if token issue exists, update it + if(currentComments.length > 0) { + await currentComments.map(comment => { + console.log('deleting comment', comment.id, comment) + github.rest.issues.deleteComment({ + comment_id: comment.id, + owner: context.repo.owner, + repo: context.repo.repo, + }) + }) + } + Fail_action_on_contrast_failing: needs: build name: Fail action on contrast failing @@ -164,8 +160,20 @@ jobs: repo: context.repo.repo }); + const possibleTitles = [ + '❌ `light`:', + '❌ `light_high_contrast`:', + '❌ `light_colorblind`:', + '❌ `light_tritanopia`:', + '❌ `dark`:', + '❌ `dark_dimmed`:', + '❌ `dark_high_contrast`:', + '❌ `dark_colorblind`:', + '❌ `dark_tritanopia`:' + ] + // get token issue - const tokenCheckComment = comments.filter(comment => comment.body.includes('## Design Token Contrast Check')); + const tokenCheckComment = comments.filter(comment => possibleTitles.some(titleStart => comment.body.includes(titleStart))); // if token issue exists, update it if(tokenCheckComment.length > 0) { diff --git a/.github/workflows/scripts/a11y-contrast/prepare-check-results.js b/.github/workflows/scripts/a11y-contrast/prepare-check-results.js new file mode 100644 index 000000000..73942b942 --- /dev/null +++ b/.github/workflows/scripts/a11y-contrast/prepare-check-results.js @@ -0,0 +1,38 @@ +const core = require('@actions/core'); +const results = require('./color-contrast-check.json'); +const faildChecks = results.reduce((acc, {failingContrast}) => acc + failingContrast, 0); + +// prepare outputs for all failed themes +const failedResults = results.filter(themeResults => themeResults.failingContrast > 0).map(({theme, failingContrast, markdownTable}) => ({ + title: `# ❌ \`${theme}\`: ${failingContrast} checks failed`, + body: `${markdownTable}` +})) + +// prepare summary body +const summaryMarkdown = '## Design Token Contrast Check\n\n' + + results.map(({theme, failingContrast, failedMarkdownTable}) => { + if(failingContrast === 0) { + return "### \\`"+theme+"\\`: " + `✅ all checks passed\n\n` + } + // if there are failing checks, return a summary with a details section + return "### \\`"+theme+"\\`: " + `❌ ${failingContrast} checks failed\n\n` + + '
' + + `Show results table for theme: ${theme}\n` + + " \n"+ + ` ${failedMarkdownTable}` + + '\n
' + }).join('\n\n') + +// set output +core.setOutput('summaryMarkdown', summaryMarkdown) +core.setOutput('failedResults', failedResults) +core.setOutput('faildChecks', faildChecks) + +// fail action if any contrast check fails +if (faildChecks > 0) { + core.setFailed(`\u001b[91;1m🛑 ${faildChecks} contrast checks failed. Please fix the failing checks and try again.\n\nCheck action summary for more details.`); +} +// success +else { + core.info('\u001b[32;1m✅ All contrast checks passed!') +} \ No newline at end of file diff --git a/src/tokens/base/color/light/light.json5 b/src/tokens/base/color/light/light.json5 index 29e2e5230..f3a272fe7 100644 --- a/src/tokens/base/color/light/light.json5 +++ b/src/tokens/base/color/light/light.json5 @@ -6,7 +6,7 @@ base: { color: { black: { - $value: '#1f2328', + $value: '#fff', $type: 'color', $extensions: { 'org.primer.figma': {