Fix website accessibility (#1153)

* fix light theme accessibility * fix dark theme * fix format * Fix formatting --------- Co-authored-by: Davor Runje <[email protected]> Co-authored-by: Chi Wang <[email protected]>
microsoft · Jan 18, 2024 · 0f59322 · 0f59322
1 parent 73c7522
commit 0f59322
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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,15 +98,15 @@ 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;
   transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
 }
 
 .tag:hover {
-  background-color: #1890ff;
+  background-color: #1273ce;
   color: white;
 }
diff --git a/website/static/js/custom.js 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
+});