Skip to content

Commit 402cde0

Browse files
morinokamimorinokami
committed
Enhance Sidebar component accessibility
1 parent 3032a67 commit 402cde0

File tree

1 file changed

+48
-10
lines changed

1 file changed

+48
-10
lines changed

‎client/src/components/Sidebar.tsx

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,19 @@ const Sidebar = ({
103103
<div className="p-4 flex-1 overflow-auto">
104104
<div className="space-y-4">
105105
<div className="space-y-2">
106-
<label className="text-sm font-medium">Transport Type</label>
106+
<label
107+
className="text-sm font-medium"
108+
htmlFor="transport-type-select"
109+
>
110+
Transport Type
111+
</label>
107112
<Select
108113
value={transportType}
109114
onValueChange={(value: "stdio" | "sse") =>
110115
setTransportType(value)
111116
}
112117
>
113-
<SelectTrigger>
118+
<SelectTrigger id="transport-type-select">
114119
<SelectValue placeholder="Select transport type" />
115120
</SelectTrigger>
116121
<SelectContent>
@@ -123,17 +128,26 @@ const Sidebar = ({
123128
{transportType === "stdio" ? (
124129
<>
125130
<div className="space-y-2">
126-
<label className="text-sm font-medium">Command</label>
131+
<label className="text-sm font-medium" htmlFor="command-input">
132+
Command
133+
</label>
127134
<Input
135+
id="command-input"
128136
placeholder="Command"
129137
value={command}
130138
onChange={(e) => setCommand(e.target.value)}
131139
className="font-mono"
132140
/>
133141
</div>
134142
<div className="space-y-2">
135-
<label className="text-sm font-medium">Arguments</label>
143+
<label
144+
className="text-sm font-medium"
145+
htmlFor="arguments-input"
146+
>
147+
Arguments
148+
</label>
136149
<Input
150+
id="arguments-input"
137151
placeholder="Arguments (space-separated)"
138152
value={args}
139153
onChange={(e) => setArgs(e.target.value)}
@@ -144,8 +158,11 @@ const Sidebar = ({
144158
) : (
145159
<>
146160
<div className="space-y-2">
147-
<label className="text-sm font-medium">URL</label>
161+
<label className="text-sm font-medium" htmlFor="sse-url-input">
162+
URL
163+
</label>
148164
<Input
165+
id="sse-url-input"
149166
placeholder="URL"
150167
value={sseUrl}
151168
onChange={(e) => setSseUrl(e.target.value)}
@@ -157,6 +174,7 @@ const Sidebar = ({
157174
variant="outline"
158175
onClick={() => setShowBearerToken(!showBearerToken)}
159176
className="flex items-center w-full"
177+
aria-expanded={showBearerToken}
160178
>
161179
{showBearerToken ? (
162180
<ChevronDown className="w-4 h-4 mr-2" />
@@ -167,8 +185,14 @@ const Sidebar = ({
167185
</Button>
168186
{showBearerToken && (
169187
<div className="space-y-2">
170-
<label className="text-sm font-medium">Bearer Token</label>
188+
<label
189+
className="text-sm font-medium"
190+
htmlFor="bearer-token-input"
191+
>
192+
Bearer Token
193+
</label>
171194
<Input
195+
id="bearer-token-input"
172196
placeholder="Bearer Token"
173197
value={bearerToken}
174198
onChange={(e) => setBearerToken(e.target.value)}
@@ -187,6 +211,7 @@ const Sidebar = ({
187211
onClick={() => setShowEnvVars(!showEnvVars)}
188212
className="flex items-center w-full"
189213
data-testid="env-vars-button"
214+
aria-expanded={showEnvVars}
190215
>
191216
{showEnvVars ? (
192217
<ChevronDown className="w-4 h-4 mr-2" />
@@ -201,6 +226,7 @@ const Sidebar = ({
201226
<div key={idx} className="space-y-2 pb-4">
202227
<div className="flex gap-2">
203228
<Input
229+
aria-label={`Environment variable key ${idx + 1}`}
204230
placeholder="Key"
205231
value={key}
206232
onChange={(e) => {
@@ -243,6 +269,7 @@ const Sidebar = ({
243269
</div>
244270
<div className="flex gap-2">
245271
<Input
272+
aria-label={`Environment variable value ${idx + 1}`}
246273
type={shownEnvVars.has(key) ? "text" : "password"}
247274
placeholder="Value"
248275
value={value}
@@ -309,6 +336,7 @@ const Sidebar = ({
309336
onClick={() => setShowConfig(!showConfig)}
310337
className="flex items-center w-full"
311338
data-testid="config-button"
339+
aria-expanded={showConfig}
312340
>
313341
{showConfig ? (
314342
<ChevronDown className="w-4 h-4 mr-2" />
@@ -325,7 +353,10 @@ const Sidebar = ({
325353
return (
326354
<div key={key} className="space-y-2">
327355
<div className="flex items-center gap-1">
328-
<label className="text-sm font-medium text-green-600">
356+
<label
357+
className="text-sm font-medium text-green-600"
358+
htmlFor={`${configKey}-input`}
359+
>
329360
{configKey}
330361
</label>
331362
<Tooltip>
@@ -339,6 +370,7 @@ const Sidebar = ({
339370
</div>
340371
{typeof configItem.value === "number" ? (
341372
<Input
373+
id={`${configKey}-input`}
342374
type="number"
343375
data-testid={`${configKey}-input`}
344376
value={configItem.value}
@@ -365,7 +397,7 @@ const Sidebar = ({
365397
setConfig(newConfig);
366398
}}
367399
>
368-
<SelectTrigger>
400+
<SelectTrigger id={`${configKey}-input`}>
369401
<SelectValue />
370402
</SelectTrigger>
371403
<SelectContent>
@@ -375,6 +407,7 @@ const Sidebar = ({
375407
</Select>
376408
) : (
377409
<Input
410+
id={`${configKey}-input`}
378411
data-testid={`${configKey}-input`}
379412
value={configItem.value}
380413
onChange={(e) => {
@@ -448,14 +481,19 @@ const Sidebar = ({
448481

449482
{loggingSupported && connectionStatus === "connected" && (
450483
<div className="space-y-2">
451-
<label className="text-sm font-medium">Logging Level</label>
484+
<label
485+
className="text-sm font-medium"
486+
htmlFor="logging-level-select"
487+
>
488+
Logging Level
489+
</label>
452490
<Select
453491
value={logLevel}
454492
onValueChange={(value: LoggingLevel) =>
455493
sendLogLevelRequest(value)
456494
}
457495
>
458-
<SelectTrigger>
496+
<SelectTrigger id="logging-level-select">
459497
<SelectValue placeholder="Select logging level" />
460498
</SelectTrigger>
461499
<SelectContent>

0 commit comments

Comments
 (0)