fix(a11y): fixed background contrast

src/components/Markdown/Markdown.scss

@@ -359,10 +359,31 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   a code {
     color: $text-color-highlight;
   }
-  a {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    text-decoration-thickness: 1px;
+  p a,
+  li a {
+    color: #1f5fbf;
+    text-decoration: none;
+    font-weight: 600;
+  }
+  p a:hover,
+  li a:hover {
+    color: #174ea6;
+  }
+
+  .dark p a,
+  .dark li a {
+    color: #58a6ff;
+  }
+
+  .dark p a:hover,
+  .dark li a:hover {
+    color: #79c0ff;
+  }
+
+  p a:focus-visible,
+  li a:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
   }
   pre {
     background-color: #2d3748;

src/components/Navigation/Navigation.jsx

@@ -240,7 +240,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 >
                   {link.children.map((child) => {
                     const classNames =
-                      "text-blue-400 dark:text-[#69a8ee] py-5 text-sm capitalize hover:text-black dark:hover:text-white";
+                      "text-blue-800 dark:text-blue-300 py-5 text-sm capitalize hover:text-blue-800 dark:hover:text-blwue-300";
                     const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink

src/components/Page/Page.jsx

@@ -25,13 +25,11 @@ export default function Page(props) {
   } = props;
 
   const isDynamicContent = props.content instanceof Promise;
-  const [dynamicContent, setContent] = useState(
-    isDynamicContent ? placeholderString() : null,
+  const [content, setContent] = useState(
+    isDynamicContent
+      ? placeholderString()
+      : () => props.content.default || props.content,
   );
-  const content = isDynamicContent
-    ? dynamicContent
-    : props.content.default || props.content;
-
   const [contentLoaded, setContentLoaded] = useState(!isDynamicContent);
 
   useEffect(() => {
@@ -46,7 +44,6 @@ export default function Page(props) {
   }, [props.content]);
 
   const { hash, pathname } = useLocation();
-  const isBlogIndex = pathname === "/blog/";
 
   useEffect(() => {
     let observer;
@@ -55,15 +52,13 @@ export default function Page(props) {
         const target = document.querySelector("#md-content");
         // two cases here
         // 1. server side rendered page, so hash target is already there
-        // Note: Why this change because we use getElementById instead of querySelector(hash) here because
-        // CSS selectors cannot start with a digit (e.g. #11-in-scope is invalid)
-        if (document.getElementById(hash.slice(1))) {
-          document.getElementById(hash.slice(1)).scrollIntoView();
+        if (document.querySelector(hash)) {
+          document.querySelector(hash).scrollIntoView();
         } else {
           // 2. dynamic loaded content
           // we need to observe the dom change to tell if hash exists
           observer = new MutationObserver(() => {
-            const element = document.getElementById(hash.slice(1));
+            const element = document.querySelector(hash);
             if (element) {
               element.scrollIntoView();
             }
@@ -104,12 +99,9 @@ export default function Page(props) {
     );
   }
   return (
-    <main id="main-content" className="page">
+    <section className="page">
       <Markdown>
         <h1>{title}</h1>
-        {rest.date && pathname.startsWith("/blog/") && !isBlogIndex && (
-          <div className="blog-post-date">{rest.date}</div>
-        )}
 
         {rest.thirdParty ? (
           <div className="italic my-[20px]">
@@ -122,27 +114,6 @@ export default function Page(props) {
 
         <div id="md-content">{contentRender}</div>
 
-        {rest.url === "/blog/" && (
-          <div className="blog-list">
-            {(props.pages || [])
-              .filter((post) => post.url !== "/blog/")
-              .map((post) => (
-                <div key={post.url} className="blog-post-item">
-                  <h2>
-                    <Link to={post.url}>{post.title}</Link>
-                  </h2>
-                  {post.date && (
-                    <div className="blog-post-date">{post.date}</div>
-                  )}
-                  <p>{post.teaser}</p>
-                  <Link to={post.url} className="read-more">
-                    Read More &rarr;
-                  </Link>
-                </div>
-              ))}
-          </div>
-        )}
-
         {loadRelated && (
           <div className="print:hidden">
             <h2>Further Reading</h2>
@@ -158,7 +129,7 @@ export default function Page(props) {
 
         <PageLinks page={rest} />
 
-        {!isBlogIndex && (previous || next) && (
+        {(previous || next) && (
           <AdjacentPages previous={previous} next={next} />
         )}
 
@@ -172,7 +143,7 @@ export default function Page(props) {
           </div>
         )}
       </Markdown>
-    </main>
+    </section>
   );
 }
 
@@ -182,7 +153,6 @@ Page.propTypes = {
   related: PropTypes.array,
   previous: PropTypes.object,
   next: PropTypes.object,
-  pages: PropTypes.array,
   content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

src/components/Sidebar/Sidebar.jsx

@@ -31,11 +31,7 @@ export default function Sidebar({ className = "", pages, currentPage }) {
     <nav className={`sidebar ${className}`}>
       <div className="sidebar__inner">
         <div className="relative z-0 bg-white dark:bg-gray-100 ">
-          <label htmlFor="docs-version" className="sr-only">
-            Select webpack version
-          </label>
           <select
-            id="docs-version"
             className="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"
             value={version}
             onChange={(event) => {

src/remark-plugins/remark-custom-asides/__snapshots__/index.test.mjs.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`customize blockquote should transform W> into aside of warning 1`] = `
-"<aside class="warning"><p class="warning__prefix">warning</p><p>hello world</p></aside>
+"<aside class="warning"><h6 class="warning__prefix">warning</h6><p>hello world</p></aside>
 "
 `;

src/remark-plugins/remark-custom-asides/index.mjs

@@ -37,11 +37,11 @@ export default function remarkCustomAsides(
         // remove custom characters from paragraph
         node.children = [
           {
-            type: "paragraph",
+            type: "heading",
+            depth: 6,
             data: {
               // see https://github.com/syntax-tree/mdast-util-to-hast#hname
               // add a className to heading
-              hName: "p",
               hProperties: {
                 className: `${className}__prefix`,
               },

src/remark-plugins/remark-custom-asides/index.test.mjs

@@ -20,7 +20,7 @@ W> hello world
         (err, { value: contents }) => {
           expect(err).toBeUndefined();
           expect(contents).toContain('<aside class="warning"');
-          expect(contents).toContain('<p class="warning__prefix"');
+          expect(contents).toContain('<h6 class="warning__prefix"');
           expect(contents).toContain("warning");
           expect(contents).toMatchSnapshot();
         },