Merge branch 'LG-12800_axe-a11y-fixes' into 'main'

LG-12800 increase <code> contrast to meet WCAG 2.1-AA standards

See merge request lg/identity-design-system!2

.gitlab-ci.yml

@@ -1,113 +1,122 @@
-# Jobs defined here use the idp/ci docker image from ECR by default. 
+# Jobs defined here use the idp/ci docker image from ECR by default.
 # Images are built via the identity-devops GitLab pipeline.
 
 variables:
-  BUNDLER_VERSION: "2.3.13"
-  NVM_VERSION: "v0.39.0"
-  NODE_VERSION: "latest"
+  BUNDLER_VERSION: '2.3.13'
+  NVM_VERSION: 'v0.39.0'
+  NODE_VERSION: 'latest'
   ECR_REGISTRY: '${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com'
   IDP_WORKER_IMAGE_TAG: 'main'
   IDP_IMAGE_TAG: 'main'
   PKI_IMAGE_TAG: 'main'
 
-stages:
-  - lint
-  - test
-  - build
-  - snapshot
-  - visual_regression
-
-
-
 default:
   image: '${ECR_REGISTRY}/dashboard/ci:latest'
 
+.build_cache:
+  - &dependency_cache
+    key:
+      files:
+        - Gemfile.lock
+        - package-lock.json
+    paths:
+      - vendor/ruby
+      - .npm-cache/
+    policy: pull
 
-before_script:
+.bundle_npm_install: &bundle_npm_install
   - export BASH_ENV="$HOME/.bash.env"
-  - gem install bundler --version $BUNDLER_VERSION
   - wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/$NVM_VERSION/install.sh | bash
   - export NVM_DIR="$HOME/.nvm"
   - . "$NVM_DIR/nvm.sh" --install --latest-npm
   - echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
   - echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
-  - node -v
-
-
-cache:
-  key: "$CI_COMMIT_REF_SLUG"
-  paths:
-    - ~/.npm
-    - ~/.bundler
-
-before_cache:
-  script:
-    - rm -f .bundler/ruby/2.6.0/cache/*.gem
-
-.bundle-npm-install: &bundle_npm_install
   - gem install bundler --version $BUNDLER_VERSION
-  - bundle check --path ~/.bundler || bundle install --path ~/.bundler
-  - npm ci
+  - bundle check || bundle install --deployment --jobs=4 --retry=3 --without deploy development doc production --path vendor/ruby
+  - npm ci --cache .npm-cache --prefer-offline
 
-build-docs:
+install:
+  cache:
+    - <<: *dependency_cache
+      policy: pull-push
   script:
     - *bundle_npm_install
-    - make -j2 build-assets build-docs
-
 
 lints:
-  stage: lint
+  needs:
+    - install
+  cache:
+    - <<: *dependency_cache
   script:
     - *bundle_npm_install
     - make lint
 
 integration:
-  stage: test
+  needs:
+    - install
+  cache:
+    - <<: *dependency_cache
   script:
     - *bundle_npm_install
-    - npm test 
+    - npm test
   variables:
-    SKIP_VISUAL_REGRESSION_TEST: "true"
+    SKIP_VISUAL_REGRESSION_TEST: 'true'
 
 snapshot-main:
-  stage: snapshot
+  needs:
+    - install
+  cache:
+    - <<: *dependency_cache
   script:
-    - git clone -b main --single-branch https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.login.gov/lg/identity-design-system.git
+    - git clone -b main --depth 1 https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.login.gov/lg/identity-design-system.git
     - cd identity-design-system
     - *bundle_npm_install
     - make -j2 build-assets build-docs
     - scripts/snapshot.js
+    - mkdir -p ../tmp/screenshot/branches
+    - mv tmp/screenshot/branches/main ../tmp/screenshot/branches/main
   artifacts:
+    expire_in: 1h
     paths:
-      - tmp/screenshot/branches/main
+      - tmp/screenshot/branches/main/*.png
   except:
     - main
 
 snapshot-branch:
-  stage: snapshot
+  needs:
+    - install
+  cache:
+    - <<: *dependency_cache
   script:
     - *bundle_npm_install
     - make -j2 build-assets build-docs
     - scripts/snapshot.js
   artifacts:
+    expire_in: 1h
     paths:
-      - tmp/screenshot/branches
+      - tmp/screenshot/branches/$CI_COMMIT_REF_SLUG/*.png
   except:
     - main
 
 visual-regression:
-  stage: visual_regression
+  stage: test
+  cache:
+    - <<: *dependency_cache
+  needs:
+    - job: snapshot-main
+      artifacts: true
+    - job: snapshot-branch
+      artifacts: true
   script:
     - *bundle_npm_install
-    - mkdir tmp/screenshot/branches/main
-    - find tmp/screenshot/branches/ -mindepth 1 -maxdepth 1 -type d -exec cp -r {} tmp/screenshot/branches/main/ \;
-    - ls -la tmp/screenshot/branches/
-    - ls -la tmp/screenshot/branches/main
-    - npm test 
+    - npm test
   variables:
-    only_VISUAL_REGRESSION_TEST: "true"
+    ONLY_VISUAL_REGRESSION_TEST: 'true'
   except:
     - main
-  dependencies:
-    - snapshot-branch
-    - snapshot-main
+  artifacts:
+    expose_as: Visual regression
+    when: on_failure
+    expire_in: 30d
+    paths:
+      - tmp/screenshot

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### Bug Fixes
 
 - Improve compatibility of badge icon styling for inner Icon component. ([#445](https://github.com/18F/identity-design-system/pull/445))
+- Improve text contrast for code syntax highlighting. ([!2](https://gitlab.login.gov/lg/identity-design-system/-/merge_requests/2))
 
 ### Dependencies
 

Makefile

@@ -70,12 +70,15 @@ build-images:
 	cp -r node_modules/@uswds/uswds/dist/img $(OUTPUT_DIR)/assets
 	cp -r src/img $(OUTPUT_DIR)/assets
 
+create-snapshots:
+	node scripts/snapshot.js
+
 test:
 ifdef ONLY_VISUAL_REGRESSION_TEST
 	node --test test/screenshot.test.js
 else
 	make build
-	node --test test/
+	node --test "test"
 endif
 
 clean:

docs/_components/code-formatting.md

@@ -19,3 +19,14 @@ Output:
 ```html
 <div contenteditable>A HTML code sample.</div>
 ```
+
+A more complex block, which can be used for automated color-contrast checking:
+
+```json
+{
+  "text": "This is a string",
+  "integer": 12345,
+  "float": 12.345,
+  "literal": "This is a string ${literal}",
+}
+```

scripts/snapshot.js

@@ -11,7 +11,9 @@ import puppeteer from 'puppeteer';
 const exec = promisify(_exec);
 
 const paths = (await glob('dist/*/index.html')).map((path) => dirname(relative('dist', path)));
-const branch = (await exec('git branch --show-current')).stdout.trim();
+const branch =
+  process.env.CI_COMMIT_REF_SLUG ??
+  (await exec('git branch --show-current')).stdout.replace(/\W/g, '-');
 
 /**
  * @param {import('puppeteer').Page} page
@@ -24,13 +26,12 @@ async function getScreenshot(page, url) {
 
 const esbuildContext = await esbuild.context({});
 const { port } = await esbuildContext.serve({ servedir: 'dist' });
-const browser = await puppeteer.launch({ 
+const browser = await puppeteer.launch({
   args: ['--no-sandbox'],
   defaultViewport: {
     width: 1024,
     height: 768,
-  }
-
+  },
 });
 const localURL = `http://localhost:${port}/`;
 const outputDirectory = join('tmp/screenshot/branches', branch);

src/scss/packages/usa-code/src/_styles.scss

@@ -149,7 +149,7 @@ pre.highlight {
   color: color('secondary');
 } /* keyword.type */
 .highlight .m {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number */
 .highlight .s {
   color: color('secondary-dark');
@@ -194,19 +194,19 @@ pre.highlight {
   color: color('base-light');
 } /* text.whitespace */
 .highlight .mb {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.bin */
 .highlight .mf {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.float */
 .highlight .mh {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.hex */
 .highlight .mi {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.integer */
 .highlight .mo {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.oct */
 .highlight .sa {
   color: color('secondary-dark');
@@ -239,7 +239,7 @@ pre.highlight {
   color: color('secondary-dark');
 } /* literal.string.other */
 .highlight .sr {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.string.regex */
 .highlight .s1 {
   color: color('secondary-dark');
@@ -266,5 +266,5 @@ pre.highlight {
   color: color('secondary-dark');
 } /* name.variable.magic */
 .highlight .il {
-  color: color('accent-cool-dark');
+  color: color('accent-cool-darker');
 } /* literal.number.integer.long */

test/screenshot.test.js

@@ -11,7 +11,9 @@ import match from 'pixelmatch';
 
 const exec = promisify(_exec);
 
-const branch = (await exec('git branch --show-current')).stdout.trim();
+const branch =
+  process.env.CI_COMMIT_REF_SLUG ??
+  (await exec('git branch --show-current')).stdout.replace(/\W/g, '-');
 
 const DIFF_DIRECTORY = 'tmp/screenshot/diff';
 const SNAPSHOT_DIRECTORY = 'tmp/screenshot/branches';
@@ -42,13 +44,8 @@ describe('screenshot visual regression', { skip, concurrency: true }, async () =
         threshold: 0.2,
       });
       if (diffs > 0) {
-        const diffOutputBase = join(DIFF_DIRECTORY, path);
         await mkdir(DIFF_DIRECTORY, { recursive: true });
-        await Promise.all([
-          writeFile(`${diffOutputBase}-local.png`, PNG.sync.write(branchPNG)),
-          writeFile(`${diffOutputBase}-remote.png`, PNG.sync.write(mainPNG)),
-          writeFile(`${diffOutputBase}-diff.png`, PNG.sync.write(diff)),
-        ]);
+        await writeFile(join(DIFF_DIRECTORY, path), PNG.sync.write(diff));
       }
       assert.strictEqual(diffs, 0, `Expected "${path}" to visually match the main branch.`);
     });

tsconfig.json

@@ -11,5 +11,5 @@
     "target": "ESNext",
     "baseUrl": "."
   },
-  "exclude": ["build", "dist", "packages"]
+  "exclude": ["build", "dist", "packages", "vendor"]
 }