Kamil Furtak commited on
Commit
2056625
·
1 Parent(s): f94be5b

Enhance accessibility for ModelSelector dropdown

Browse files

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 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>