From 8f80f6c0b2c1f2ca1a0954c551121a1fbbb9376d Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 5 May 2022 15:29:27 +0800
Subject: [PATCH] fix(website): fix multiple accessibility issues around color
 contrast (#7336)

* fix(website): darken breadcrumbs color to ensure contrast

* fix lighthouse

* fix more a11y

* more fix
---
 admin/scripts/format-lighthouse-score.mjs |  8 ++++----
 website/src/css/custom.css                | 11 +++++++++++
 website/src/utils/prismLight.mjs          |  8 +++++++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/admin/scripts/format-lighthouse-score.mjs b/admin/scripts/format-lighthouse-score.mjs
index b73595cdc3ad..38622370169a 100644
--- a/admin/scripts/format-lighthouse-score.mjs
+++ b/admin/scripts/format-lighthouse-score.mjs
@@ -18,12 +18,12 @@ const summaryKeys = {
   pwa: 'PWA',
 };
 
-/** @param {number} score */
-const scoreEntry = (score) => {
-  const normalizedScore = Math.round(score * 100);
+/** @param {number} rawScore */
+const scoreEntry = (rawScore) => {
+  const score = Math.round(rawScore * 100);
   // eslint-disable-next-line no-nested-ternary
   const scoreIcon = score >= 90 ? '🟢' : score >= 50 ? '🟠' : '🔴';
-  return `${scoreIcon} ${normalizedScore}`;
+  return `${scoreIcon} ${score}`;
 };
 
 /**
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index ccddea72eb7d..dfaf7962951b 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -19,6 +19,9 @@
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
   --site-color-feedback-background: #fff;
   --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
+  /* Use a darker color to ensure contrast, ideally we don't need important */
+  --ifm-breadcrumb-color-active: var(--ifm-color-primary-darker) !important;
+  --ifm-menu-color-active: var(--ifm-color-primary-darker) !important;
 }
 
 html[data-theme='dark'] {
@@ -28,6 +31,10 @@ html[data-theme='dark'] {
   --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
 }
 
+/*
+ * This selector will be dynamically replaced by the color generator. Don't put
+ * other properties here.
+ */
 [data-theme='light'] {
   --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%);
   --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
@@ -43,6 +50,10 @@ html[data-theme='dark'] {
   );
 }
 
+/*
+ * This selector will be dynamically replaced by the color generator. Don't put
+ * other properties here.
+ */
 [data-theme='dark'] {
   --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
   --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
diff --git a/website/src/utils/prismLight.mjs b/website/src/utils/prismLight.mjs
index c23a4aebc3c9..2336b194ca36 100644
--- a/website/src/utils/prismLight.mjs
+++ b/website/src/utils/prismLight.mjs
@@ -51,7 +51,7 @@ export default {
     {
       types: ['font-matter', 'string', 'attr-value'],
       style: {
-        color: '#E3116C',
+        color: '#C6105F',
       },
     },
     {
@@ -90,5 +90,11 @@ export default {
         color: '#E36209',
       },
     },
+    {
+      types: ['comment'],
+      style: {
+        color: '#6B6B6B',
+      },
+    },
   ],
 };