Kamil Furtak
commited on
Commit
·
2056625
1
Parent(s):
f94be5b
Enhance accessibility for ModelSelector dropdown
Browse filesAdded 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
CHANGED
@@ -186,10 +186,17 @@ export const ModelSelector = ({
|
|
186 |
isModelDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
|
187 |
)}
|
188 |
onClick={() => setIsModelDropdownOpen(!isModelDropdownOpen)}
|
|
|
|
|
|
|
|
|
|
|
|
|
189 |
role="combobox"
|
190 |
aria-expanded={isModelDropdownOpen}
|
191 |
aria-controls="model-listbox"
|
192 |
aria-haspopup="listbox"
|
|
|
193 |
>
|
194 |
<div className="flex items-center justify-between">
|
195 |
<div className="truncate">{modelList.find((m) => m.name === model)?.label || 'Select model'}</div>
|
|
|
186 |
isModelDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
|
187 |
)}
|
188 |
onClick={() => setIsModelDropdownOpen(!isModelDropdownOpen)}
|
189 |
+
onKeyDown={(e) => {
|
190 |
+
if (e.key === 'Enter' || e.key === ' ') {
|
191 |
+
e.preventDefault();
|
192 |
+
setIsModelDropdownOpen(!isModelDropdownOpen);
|
193 |
+
}
|
194 |
+
}}
|
195 |
role="combobox"
|
196 |
aria-expanded={isModelDropdownOpen}
|
197 |
aria-controls="model-listbox"
|
198 |
aria-haspopup="listbox"
|
199 |
+
tabIndex={0}
|
200 |
>
|
201 |
<div className="flex items-center justify-between">
|
202 |
<div className="truncate">{modelList.find((m) => m.name === model)?.label || 'Select model'}</div>
|