From ff9905f53023e8108f7248f9ab89df8c6fac66d8 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 26 Sep 2024 13:10:34 +0200 Subject: [PATCH] trying to update action (#1067) --- .github/workflows/a11y-contrast.yml | 96 +++++++++++++++++------------ scripts/color-contrast.config.ts | 22 +++---- scripts/color-contrast.ts | 10 ++- 3 files changed, 77 insertions(+), 51 deletions(-) diff --git a/.github/workflows/a11y-contrast.yml b/.github/workflows/a11y-contrast.yml index b1c57bc72..36aaeaea4 100644 --- a/.github/workflows/a11y-contrast.yml +++ b/.github/workflows/a11y-contrast.yml @@ -47,19 +47,30 @@ jobs: const results = require('./color-contrast-check.json'); const faildChecks = results.reduce((acc, {failingContrast}) => acc + failingContrast, 0); - // prepare comment body - const resultsMarkdown = '## Design Token Contrast Check\n\n' + - results.map(({theme, failingContrast, markdownTable}) => - "### \\`"+theme+"\\`: " + `${failingContrast === 0 ? '✅ all checks passed' : `❌ ${failingContrast} checks failed`}\n\n` + + // 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"+ - ` ${markdownTable}` + + ` ${failedMarkdownTable}` + '\n
' - ).join('\n\n') + }).join('\n\n') // set output - core.setOutput('markdown', resultsMarkdown) + core.setOutput('summaryMarkdown', summaryMarkdown) + core.setOutput('failedResults', failedResults) core.setOutput('faildChecks', faildChecks) // fail action if any contrast check fails @@ -71,12 +82,26 @@ jobs: core.info('\u001b[32;1m✅ All contrast checks passed!') } + - name: Report check results as summary + uses: actions/github-script@v7 + with: + script: | + const resultsMarkdown = `${{ steps.check-results.outputs.summaryMarkdown }}` + + // output results to summary + core.summary.addRaw(resultsMarkdown, true) + core.summary.write({overwrite: true}) + - name: Report check results as comment if: github.event_name == 'pull_request' uses: actions/github-script@v7 + env: + GITHUB_REPOSITORY: ${{ github.repository }} + GITHUB_RUN_ID: ${{ github.run_id }} with: script: | - const resultsMarkdown = `${{ steps.check-results.outputs.markdown }}` + const results = ${{ steps.check-results.outputs.failedResults }} + const WORKFLOW_SUMMARY_URL = `https://github.com/${{env.GITHUB_REPOSITORY}}/actions/runs/${{env.GITHUB_RUN_ID}}` // get comments const {data: comments} = await github.rest.issues.listComments({ @@ -85,39 +110,32 @@ jobs: repo: context.repo.repo }); - // get token issue - const tokenCheckComment = comments.filter(comment => comment.body.includes('## Design Token Contrast Check')); - - // if token issue exists, update it - if(tokenCheckComment.length > 0) { - await github.rest.issues.updateComment({ - comment_id: tokenCheckComment[0].id, - owner: context.repo.owner, - repo: context.repo.repo, - body: resultsMarkdown - }) - } - - // if token issue does not exist, create it - else { - await github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: resultsMarkdown - }) + for (const {title, body} of results) { + // get token issue + const tokenCheckComment = comments.filter(comment => comment.body.includes(title)); + const outputBody = `${title}\n\n${body}\n\n→ Details` + + // if token issue exists, update it + if(tokenCheckComment.length > 0) { + await github.rest.issues.updateComment({ + comment_id: tokenCheckComment[0].id, + owner: context.repo.owner, + repo: context.repo.repo, + body: outputBody + }) + } + + // if token issue does not exist, create it + else { + await github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: outputBody + }) + } } - - name: Report check results as summary - uses: actions/github-script@v7 - with: - script: | - const resultsMarkdown = `${{ steps.check-results.outputs.markdown }}` - - // output results to summary - core.summary.addRaw(resultsMarkdown, true) - core.summary.write({overwrite: true}) - Fail_action_on_contrast_failing: needs: build name: Fail action on contrast failing diff --git a/scripts/color-contrast.config.ts b/scripts/color-contrast.config.ts index bd0dceb60..54d134e33 100644 --- a/scripts/color-contrast.config.ts +++ b/scripts/color-contrast.config.ts @@ -249,17 +249,6 @@ const setContrastRatios = ( ]) } -const defaultContrast: ContrastRequirement[] = setContrastRatios('default', [ - ...baseRequirements, - ...displayColorRequirements, -]) - -const highContrast: ContrastRequirement[] = setContrastRatios('highContrast', [ - ...baseRequirements, - ...displayColorRequirements, - // add high contrast overwrites or additions -]) - export const bgColors: string[] = ['bgColor-default', 'bgColor-muted'] export type ThemeName = @@ -273,6 +262,17 @@ export type ThemeName = | 'dark_colorblind' | 'dark_tritanopia' +const defaultContrast: ContrastRequirement[] = setContrastRatios('default', [ + ...baseRequirements, + ...displayColorRequirements, +]) + +const highContrast: ContrastRequirement[] = setContrastRatios('highContrast', [ + ...baseRequirements, + ...displayColorRequirements, + // add high contrast overwrites or additions +]) + export type ContrastRequirements = {[key in ThemeName]: ContrastRequirement[]} export const contrastRequirements: ContrastRequirements = { // default light mode diff --git a/scripts/color-contrast.ts b/scripts/color-contrast.ts index 17f55d3e7..eeadef495 100644 --- a/scripts/color-contrast.ts +++ b/scripts/color-contrast.ts @@ -106,7 +106,7 @@ const testContrast = ( } const checkContrastForThemes = async (themes: Theme[], contrastRequirementsObj: ContrastRequirements) => { - return await Promise.all( + const allResults = await Promise.all( themes.map(async ([themeName, tokens]) => { // run tests on all color pairs const results = runContrastTest(contrastRequirementsObj[themeName], tokens) @@ -123,10 +123,18 @@ const checkContrastForThemes = async (themes: Theme[], contrastRequirementsObj: 'contrastRatio', 'minimumContrastRatio', ]), + failedMarkdownTable: + failingContrast > 0 && + (await makeMarkdownTable( + results.filter(item => item.pass === '❌'), + ['contrastPair', 'pass', 'contrastRatio', 'minimumContrastRatio'], + )), results, } }), ) + // return results + return allResults } /**