docs: fixed various a11y issues

DuCanhGH · Jun 20, 2023 · 080b9b8 · 080b9b8
1 parent 41d8df7
commit 080b9b8
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/contributing/core/developing.md b/contributing/core/developing.md
@@ -17,7 +17,7 @@ To develop locally:
    ```bash
    pnpm install
    ```
-1. Start developing and watch for code changes (this is not working with Turborepo right now, needs help fixing!):
+1. Start developing and watch for code changes:
    ```bash
    pnpm dev
    ```

diff --git a/docs/src/app/docs/SidebarClient.tsx b/docs/src/app/docs/SidebarClient.tsx
@@ -69,7 +69,7 @@ export const SidebarClient = ({ children }: SidebarClientProps) => {
             "absolute md:[position:unset] max-md:[transform:translate(0,-100%)]"
         )}
       >
-        {children}
+        <ul>{children}</ul>
       </aside>
     </div>
   );
@@ -115,7 +115,10 @@ export const SidebarTextBox = ({
           />
         )}
         {hasChildTree && (
-          <button className="h-full pr-2 py-1.5">
+          <button
+            className="h-full pr-2 py-1.5"
+            aria-label={`${isChildOpened ? "Collapse" : "Expand"} section`}
+          >
             <IconChevronRight
               onClick={toggleChildOpened}
               className={clsx(

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -58,6 +58,12 @@ const RootLayout: LayoutComponent = ({ children }) => (
     </head>
     <body>
       <div id="root-container">
+        <a
+          className="z-[100] dark:text-white text-black underline absolute -top-full focus:top-0"
+          href="#main-content"
+        >
+          Skip to main content
+        </a>
         <RootClientLogic />
         <Navbar />
         <main id="main-content">{children}</main>

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -91,7 +91,7 @@ const Page = () => (
               <h2 className="mb-3 text-2xl font-semibold">
                 {feature.icon} {feature.label}
               </h2>
-              <p className="m-0 max-w-[30ch] text-sm opacity-50">
+              <p className="m-0 max-w-[30ch] text-sm opacity-80">
                 {feature.description}
               </p>
             </div>

diff --git a/docs/src/components/Link/classNames.ts b/docs/src/components/Link/classNames.ts
@@ -1,2 +1,2 @@
 export const linkUnderlineClassName =
-  "text-blue-500 dark:text-blue-500 underline";
+  "text-blue-800 dark:text-sky-300 underline";
diff --git a/docs/src/components/Navbar/index.tsx b/docs/src/components/Navbar/index.tsx
@@ -23,7 +23,7 @@ export interface MainLinkProps {
 }
 
 export const Navbar: FC = () => (
-  <nav className="transition-colors_opa sticky top-0 z-[9223372036854775806] h-fit max-h-screen border-b-[0.25px] border-neutral-300 bg-white duration-100 dark:border-gray-700 dark:bg-black">
+  <nav className="transition-colors_opa sticky top-0 z-[50] h-fit max-h-screen border-b-[0.25px] border-neutral-300 bg-white duration-100 dark:border-gray-700 dark:bg-black">
     <div className="mx-auto h-[var(--navbar-height)] max-w-7xl px-2 md:px-6 lg:px-8">
       <div className="relative flex h-16 items-center justify-between">
         <div className="absolute inset-y-0 left-0 flex items-center gap-[5px] md:hidden">