fix: address CodeRabbit review - keyboard accessibility and type validation

- Add role, tabIndex, and onKeyDown to CookbookCard for keyboard nav
- Wrap filter chips in <button> with aria-pressed for accessibility
- Handle unknown type query param values explicitly (filter returns empty)
- Add test for invalid type filter value

Author: bjcoombs

frontend/src/features/cookbook/components/catalogue-grid.tsx

@@ -37,8 +37,16 @@ function CookbookCard({ item }: { item: CookbookItem }) {
 
   return (
     <Card
-      className="cursor-pointer transition-colors hover:border-primary/50"
+      role="link"
+      tabIndex={0}
+      className="cursor-pointer transition-colors hover:border-primary/50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none"
       onClick={() => navigate(`/cookbook/${item.name}`)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          navigate(`/cookbook/${item.name}`)
+        }
+      }}
     >
       <CardHeader>
         <div className="flex items-start justify-between gap-2">

frontend/src/features/cookbook/components/filter-bar.test.ts

@@ -117,4 +117,9 @@ describe('applyFilters', () => {
     expect(result).toHaveLength(1)
     expect(result[0].name).toBe('energy-trading')
   })
+
+  it('filters out all items for unknown type value', () => {
+    const result = applyFilters(mockItems, { ...emptyFilters, type: 'invalid' })
+    expect(result).toHaveLength(0)
+  })
 })

frontend/src/features/cookbook/components/filter-bar.tsx

@@ -63,8 +63,9 @@ export function useFilterState(): [FilterState, (patch: Partial<FilterState>) =>
 export function applyFilters(items: CookbookItem[], filters: FilterState): CookbookItem[] {
   return items.filter((item) => {
     if (filters.type) {
-      const typeLabel = filters.type === 'pattern' ? 'registry:pattern' : 'registry:ui'
-      if (item.type !== typeLabel) return false
+      const typeMap: Record<string, string> = { pattern: 'registry:pattern', ui: 'registry:ui' }
+      const typeLabel = typeMap[filters.type]
+      if (!typeLabel || item.type !== typeLabel) return false
     }
 
     if (filters.category) {
@@ -163,17 +164,22 @@ interface FilterChipGroupProps {
 
 function FilterChipGroup({ label, options, value, onChange }: FilterChipGroupProps) {
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1" role="group" aria-label={`${label} filter`}>
       <span className="text-xs text-muted-foreground mr-1">{label}:</span>
       {options.map((opt) => (
-        <Badge
+        <button
           key={opt.value}
-          variant={value === opt.value ? 'default' : 'outline'}
-          className="cursor-pointer text-xs"
+          type="button"
+          aria-pressed={value === opt.value}
           onClick={() => onChange(value === opt.value ? '' : opt.value)}
         >
-          {opt.label}
-        </Badge>
+          <Badge
+            variant={value === opt.value ? 'default' : 'outline'}
+            className="cursor-pointer text-xs"
+          >
+            {opt.label}
+          </Badge>
+        </button>
       ))}
     </div>
   )