shivam + claude changes

components/mdx/MobileTableOfContents.tsx

@@ -17,6 +17,8 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
         <div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
             <button
                 onClick={() => setIsOpen(!isOpen)}
+                aria-expanded={isOpen}
+                aria-controls="mobile-toc"
                 className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
             >
                 <span>Table of Contents</span>
@@ -26,7 +28,7 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
             </button>
 
             {isOpen && (
-                <ul className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                <ul id="mobile-toc" className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
                     {headings.map((heading) => (
                         <li
                             key={heading.id}