From 2056625cbdfc6396dbdb804ce0b737caf635ed8a Mon Sep 17 00:00:00 2001
From: Kamil Furtak <kamil@fcomp.dev>
Date: Sat, 15 Feb 2025 16:55:55 +0100
Subject: [PATCH] Enhance accessibility for ModelSelector dropdown

Added keyboard support for toggling the dropdown using Enter or Space keys, improving accessibility. Also set appropriate focus properties by adding tabindex to the combobox element.
---
 app/components/chat/ModelSelector.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/components/chat/ModelSelector.tsx b/app/components/chat/ModelSelector.tsx
index 880f900f..4743199a 100644
--- a/app/components/chat/ModelSelector.tsx
+++ b/app/components/chat/ModelSelector.tsx
@@ -186,10 +186,17 @@ export const ModelSelector = ({
             isModelDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
           )}
           onClick={() => setIsModelDropdownOpen(!isModelDropdownOpen)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setIsModelDropdownOpen(!isModelDropdownOpen);
+            }
+          }}
           role="combobox"
           aria-expanded={isModelDropdownOpen}
           aria-controls="model-listbox"
           aria-haspopup="listbox"
+          tabIndex={0}
         >
           <div className="flex items-center justify-between">
             <div className="truncate">{modelList.find((m) => m.name === model)?.label || 'Select model'}</div>