fix a11y issues

Author: davemooreuws

src/components/code/CodeWithTabs.tsx

@@ -7,6 +7,7 @@ import Pre from './Pre'
 import CodeContainer from './CodeContainer'
 import CODE_THEME from './theme'
 import { meta } from './meta'
+import { dash } from 'radash'
 
 export const Schema = Block.extend({ tabs: z.array(CodeBlock) })
 export async function CodeWithTabs(props: unknown) {
@@ -27,12 +28,12 @@ export function CodeTabs(props: {
 
   return (
     <CodeContainer>
-      <Tabs defaultValue={meta(tabs[0]).base}>
+      <Tabs defaultValue={dash(meta(tabs[0]).base)}>
         <TabsList className="relative mx-0 mt-auto h-12 w-full rounded-b-none bg-transparent p-0">
           {tabs.map((tab) => (
             <TabsTrigger
-              key={meta(tab).base}
-              value={meta(tab).base}
+              key={dash(meta(tab).base)}
+              value={dash(meta(tab).base)}
               className="group/tab relative h-12 hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
             >
               {meta(tab).base}
@@ -43,8 +44,8 @@ export function CodeTabs(props: {
         </TabsList>
         {tabs.map((tab, i) => (
           <TabsContent
-            key={meta(tab).base}
-            value={meta(tab).base}
+            key={dash(meta(tab).base)}
+            value={dash(meta(tab).base)}
             className="m-0"
           >
             <Pre

src/components/code/meta.ts

@@ -2,10 +2,10 @@ import { RawCode } from 'codehike/code'
 
 // extract meta from code block meta
 export const meta = (code: RawCode) => {
-  const [base, file] = code.meta.split('file:')
+  const [base, file] = code.meta.trim().split('file:')
 
   return {
-    base,
-    file,
+    base: base.trim(),
+    file: file ? file.trim() : null,
   }
 }

src/components/nav/Navigation.tsx

@@ -15,14 +15,16 @@ export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
       <ul role="list">
         {navigation.map((entry, groupIndex) =>
           'href' in entry ? (
-            <NavLink
-              className={cn('pl-2', groupIndex === 0 ? 'md:mt-0' : '')}
-              key={entry.title}
-              active={entry.href === pathname}
-              {...entry}
-            >
-              {entry.title}
-            </NavLink>
+            <li>
+              <NavLink
+                className={cn('pl-2', groupIndex === 0 ? 'md:mt-0' : '')}
+                key={entry.title}
+                active={entry.href === pathname}
+                {...entry}
+              >
+                {entry.title}
+              </NavLink>
+            </li>
           ) : (
             <NavigationGroup
               key={entry.title}