chore: more accessible and lessen the indentation

Author: SeanCassiere

app/components/TocMobile.tsx

@@ -21,24 +21,28 @@ export function TocMobile({ headings }: TocMobileProps) {
   return (
     <div className="lg:hidden flex -mx-2 -mt-2 md:-mx-6 md:-mt-6 pb-3 md:pb-5">
       <details className="w-full" onToggle={handleToggle}>
-        <summary className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20">
+        <summary
+          className="px-4 py-3 text-sm font-medium w-full flex content-start items-center gap-2 bg-white/50 dark:bg-black/60 backdrop-blur-lg border-b border-gray-500 border-opacity-20"
+          aria-expanded={isOpen}
+        >
           <span>{isOpen ? <FaCaretDown /> : <FaCaretRight />}</span>
           <span>On this page</span>
         </summary>
         <div className="px-2 py-2">
           <ul className="list-none grid gap-2">
             {headings.map((heading) => (
               <li
-                key={heading.id}
+                key={`mobile-toc-${heading.id}`}
                 style={{
-                  paddingLeft: `${(heading.level - 1) * 1.5}rem`,
+                  paddingLeft: `${(heading.level - 1) * 0.7}rem`,
                 }}
               >
                 <Link
                   to="."
                   className="text-sm"
                   hash={heading.id}
                   dangerouslySetInnerHTML={{ __html: heading.text }}
+                  aria-label={heading.text.replace(/<\/?[^>]+(>|$)/g, '')}
                 />
               </li>
             ))}