From eaa2126c7ea4326868fda33096e57757ced4c8d1 Mon Sep 17 00:00:00 2001
From: MayaChat <mayarchambault@spatulaa.com>
Date: Sun, 23 Nov 2025 23:57:03 -0500
Subject: [PATCH] Add keyboard navigation for service cards

---
 index.html | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/index.html b/index.html
index 9dd3a91..3f7d0e8 100644
--- a/index.html
+++ b/index.html
@@ -162,6 +162,45 @@
             }
           });
 
+          // Keyboard navigation for service cards
+          let selectedIndex = -1;
+          const selectCard = (index) => {
+            const visibleCards = allServices.filter(card => card.style.display !== 'none');
+            if(visibleCards.length === 0) return;
+            
+            // Remove previous selection
+            visibleCards.forEach(card => card.classList.remove('selected'));
+            
+            // Update index
+            if(index < 0) index = visibleCards.length - 1;
+            if(index >= visibleCards.length) index = 0;
+            selectedIndex = index;
+            
+            // Add selection
+            visibleCards[selectedIndex].classList.add('selected');
+            visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+          };
+
+          document.addEventListener('keydown', (e) => {
+            if(document.activeElement === searchInput) return;
+            
+            const visibleCards = allServices.filter(card => card.style.display !== 'none');
+            
+            if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
+              e.preventDefault();
+              selectCard(selectedIndex + 1);
+            } else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
+              e.preventDefault();
+              selectCard(selectedIndex - 1);
+            } else if(e.key === 'Enter' && selectedIndex >= 0){
+              e.preventDefault();
+              visibleCards[selectedIndex].click();
+            } else if(e.key === 'Escape'){
+              visibleCards.forEach(card => card.classList.remove('selected'));
+              selectedIndex = -1;
+            }
+          });
+
         }catch(err){
           console.error(err);
           grid.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';