Make track cards, track links, and project filters keyboard-operable

src/pages/projects.astro

@@ -23,12 +23,16 @@ const types = [...new Set(projects.map((project) => project.data.type))];
         <SectionTitle Tag="h1">Recent Projects</SectionTitle>
         <div id="filter-tokens" class="my-8 space-y-2 space-x-2">
           <Token
+            as="button"
+            aria-pressed="true"
             class="filter-token !text-primary ring-primary bg-white ring-2 hover:cursor-pointer"
             data-type="all">All</Token
           >
           {
             types.map((type) => (
               <Token
+                as="button"
+                aria-pressed="false"
                 class="filter-token hover:cursor-pointer"
                 data-type={slugify(type)}
               >
@@ -70,14 +74,15 @@ const types = [...new Set(projects.map((project) => project.data.type))];
       const token = (e.target as Element).closest<HTMLElement>(".filter-token");
       if (!token) return;
 
-      tokens.forEach((t) =>
+      tokens.forEach((t) => {
         t.classList.remove(
           "bg-white",
           "!text-primary",
           "ring-primary",
           "ring-2"
-        )
-      );
+        );
+        t.setAttribute("aria-pressed", "false");
+      });
 
       token.classList.add(
         "bg-white",
@@ -85,6 +90,7 @@ const types = [...new Set(projects.map((project) => project.data.type))];
         "ring-primary",
         "ring-2"
       );
+      token.setAttribute("aria-pressed", "true");
 
       const type = token.dataset.type;