Add navigation links to ReactHeader and add aria labels to buttons (#…

…124) * Add navigation links to `ReactHeader`, resolves BAS-43 * Add home page link to logo * Add `min-h-12` to avoid logo vertical layout shift * Add aria labels to `CommandMenu`, `SideMenu`, and `ReactHeadrer` buttons
AVGVSTVS96 · Apr 1, 2024 · 8f52189 · 8f52189
1 parent d7811d2
commit 8f52189
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/src/components/CommandMenu.tsx b/src/components/CommandMenu.tsx
@@ -67,6 +67,7 @@ export function CommandMenu({ buttonStyles, posts }: CommandMenuProps) {
   return (
     <>
       <Button
+        aria-label='Open command menu'
         variant="outline"
         className={cn(
           'relative hidden h-9 justify-between rounded-[0.5rem] bg-background pr-1.5 text-sm font-normal text-muted-foreground shadow-none sm:flex',

diff --git a/src/components/ReactHeader.astro b/src/components/ReactHeader.astro
@@ -7,24 +7,40 @@ import { CommandMenu } from '@components/CommandMenu';
 
 const allPosts = await Astro.glob('@pages/posts/*.md');
 
+const links = [
+  { href: '/', label: 'Home' },
+  { href: '/about', label: 'About' },
+  { href: '/blog', label: 'Blog' },
+];
 ---
 
 <header class="flex items-center border-b border-border/50 px-8 py-2">
-  <h1
-    class="flex items-center gap-x-2.5 text-xl font-bold text-foreground dark:text-muted-light">
-    <Icon name="shadlogo" size={20} />
-    bassim
-  </h1>
+  <a href="/">
+    <h1
+      class="flex items-center gap-x-2.5 text-xl font-bold text-foreground dark:text-muted-light">
+      <Icon name="shadlogo" size={20} />
+      bassim
+    </h1>
+  </a>
   <nav class="button-container flex w-full items-center justify-between pl-3">
-    <a href="/">
-      <Button
-        tabIndex={-1}
-        variant="link"
-        className="h-9 hidden sm:block  text-muted-dark hover:text-dark hover:no-underline dark:text-primary-400 dark:hover:text-muted-light/85">
-        Home
-      </Button>
-    </a>
-    <span class="flex gap-2 items-center">
+    <span class="flex gap-5 px-4">
+      {
+        links.map((link, index) => (
+          <a href={link.href}>
+            <Button
+              client:load
+              aria-label={link.label}
+              key={index}
+              tabIndex={-1}
+              variant="link"
+              className="hidden h-9 px-0 text-muted-foreground hover:text-foreground/80 hover:no-underline sm:block">
+              {link.label}
+            </Button>
+          </a>
+        ))
+      }
+    </span>
+    <span class="flex items-center gap-2">
       <CommandMenu client:load posts={allPosts} />
       <SideMenu client:load />
       <ModeToggle client:load />

diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
@@ -40,7 +40,7 @@ export function SideMenu() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" aria-label="Open sidebar menu">
           <HamburgerMenuIcon className="size-5" />
         </Button>
       </SheetTrigger>