From 0f59322bc3640952985c8db31ba11eb76595c02c Mon Sep 17 00:00:00 2001
From: cheng-tan <chengtan2013@gmail.com>
Date: Wed, 17 Jan 2024 23:42:45 -0500
Subject: [PATCH] Fix website accessibility (#1153)

* fix light theme accessibility

* fix dark theme

* fix format

* Fix formatting

---------

Co-authored-by: Davor Runje <davor@airt.ai>
Co-authored-by: Chi Wang <wang.chi@microsoft.com>
---
 website/docusaurus.config.js          |  9 +++++-
 website/src/components/GalleryPage.js |  3 +-
 website/src/css/custom.css            | 44 ++++++++++++++-------------
 website/static/js/custom.js           | 27 ++++++++++++++++
 4 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 website/static/js/custom.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index cf258d5fab7..092224a34b5 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -12,6 +12,13 @@ module.exports = {
   favicon: "img/ag.ico",
   organizationName: "Microsoft", // Usually your GitHub org/user name.
   projectName: "AutoGen", // Usually your repo name.
+  scripts: [
+    {
+      src: '/autogen/js/custom.js',
+      async: true,
+      defer: true,
+    },
+  ],
   markdown: {
     format: 'detect', // Support for MD files with .md extension
   },
@@ -103,7 +110,7 @@ module.exports = {
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} AutoGen Authors |  <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy and Cookies</a>`,
+      copyright: `Copyright © ${new Date().getFullYear()} AutoGen Authors |  <a target="_blank" style="color:#10adff" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy and Cookies</a>`,
     },
   },
   presets: [
diff --git a/website/src/components/GalleryPage.js b/website/src/components/GalleryPage.js
index 5ab7c8fa3fc..312ebffdc51 100644
--- a/website/src/components/GalleryPage.js
+++ b/website/src/components/GalleryPage.js
@@ -61,6 +61,7 @@ const GalleryPage = () => {
         style={{ width: "100%", marginBottom: 16 }}
         value={selectedTags}
         onChange={handleTagChange}
+        aria-label="Filter by tags"
       >
         {allTags.map((tag) => (
           <Option key={tag} value={tag}>
@@ -119,7 +120,7 @@ const GalleryPage = () => {
                   style={{
                     // fontSize: "0.8rem",
                     fontWeight: "normal",
-                    color: "grey",
+                    color: "#727272",
                   }}
                 >
                   {item.description ? item.description : item.title}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 52b9ae78194..f1179bd53c6 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -13,6 +13,7 @@
   --ifm-color-emphasis-300: #1064d3;
   --ifm-link-color: #1064d3;
   --ifm-menu-color-active: #1064d3;
+  --ifm-navbar-search-input-placeholder-color: #6e7174;
 }
 
 .docusaurus-highlight-code-line {
@@ -21,9 +22,6 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
-html[data-theme="dark"] .docusaurus-highlight-code-line {
-  background-color: rgb(0, 0, 0, 0.3);
-}
 
 .admonition-content a {
   text-decoration: underline;
@@ -39,34 +37,38 @@ blockquote {
   /* samsung blue with lots of transparency */
   background-color: #0c4da224;
 }
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ifm-hero-text-color: white;
+
+html[data-theme="dark"] {
+  --ifm-hero-text-color: white;
+  --ifm-navbar-search-input-placeholder-color: #8a8d91;
+  --ifm-navbar-link-hover-color: #0c90ff;
+  --ifm-menu-color-active: #0c90ff;
+  --ifm-link-color: #1084ff/*#107eff*/;
+
+  .table-of-contents__link--active {
+    color: #0c7eff;
   }
-}
-@media (prefers-color-scheme: dark) {
+
   .hero.hero--primary {
     --ifm-hero-text-color: white;
   }
-}
 
-@media (prefers-color-scheme: dark) {
   blockquote {
     --ifm-color-emphasis-300: var(--ifm-color-primary);
-    /* border-left: 6px solid var(--ifm-color-emphasis-300); */
   }
-}
-@media (prefers-color-scheme: dark) {
-  code {
-    /* background-color: rgb(41, 45, 62); */
+
+  a code {
+    color: #10a5ff;
   }
-}
 
-/* Docusaurus still defaults to their green! */
-@media (prefers-color-scheme: dark) {
+  /* Docusaurus still defaults to their green! */
   .react-toggle-thumb {
     border-color: var(--ifm-color-primary) !important;
   }
+
+  .docusaurus-highlight-code-line {
+    background-color: rgb(0, 0, 0, 0.3);
+  }
 }
 
 .header-github-link:hover {
@@ -96,8 +98,8 @@ html[data-theme="dark"] .header-github-link:before {
 
 .tag {
   padding: 2px 8px;
-  border: 1px solid #1890ff;
-  color: #1890ff;
+  border: 1px solid #1273ce;
+  color: #1273ce;
   border-radius: 4px;
   font-size: 0.75rem;
   cursor: pointer;
@@ -105,6 +107,6 @@ html[data-theme="dark"] .header-github-link:before {
 }
 
 .tag:hover {
-  background-color: #1890ff;
+  background-color: #1273ce;
   color: white;
 }
diff --git a/website/static/js/custom.js b/website/static/js/custom.js
new file mode 100644
index 00000000000..0a54989a7bd
--- /dev/null
+++ b/website/static/js/custom.js
@@ -0,0 +1,27 @@
+const fixColorContrast = (selector, color) => {
+  const elements = document.querySelectorAll(selector);
+  if (elements.length > 0) {
+    elements.forEach(element => {
+      element.style.color = color;
+    });
+  }
+}
+
+const observer = new MutationObserver(() => {
+  const hashLinks = document.querySelectorAll('.hash-link[title="Direct link to heading"]');
+  if (hashLinks.length > 0) {
+    hashLinks.forEach(link => {
+      link.setAttribute('tabindex', '-1');
+    });
+  }
+
+  fixColorContrast('.token.comment', '#8a93c8')
+  fixColorContrast('.token.boolean', '#ff5c79')
+  fixColorContrast('blockquote a', '#0d55b4')
+  fixColorContrast('.ant-select-selection-placeholder', '#747474')
+});
+
+observer.observe(document, {
+  childList: true,
+  subtree: true
+});