Enhance Sidebar component accessibility

client/src/components/Sidebar.tsx

@@ -103,14 +103,19 @@ const Sidebar = ({
       <div className="p-4 flex-1 overflow-auto">
         <div className="space-y-4">
           <div className="space-y-2">
-            <label className="text-sm font-medium">Transport Type</label>
+            <label
+              className="text-sm font-medium"
+              htmlFor="transport-type-select"
+            >
+              Transport Type
+            </label>
             <Select
               value={transportType}
               onValueChange={(value: "stdio" | "sse") =>
                 setTransportType(value)
               }
             >
-              <SelectTrigger>
+              <SelectTrigger id="transport-type-select">
                 <SelectValue placeholder="Select transport type" />
               </SelectTrigger>
               <SelectContent>
@@ -123,8 +128,11 @@ const Sidebar = ({
           {transportType === "stdio" ? (
             <>
               <div className="space-y-2">
-                <label className="text-sm font-medium">Command</label>
+                <label className="text-sm font-medium" htmlFor="command-input">
+                  Command
+                </label>
                 <Input
+                  id="command-input"
                   placeholder="Command"
                   value={command}
                   onChange={(e) => setCommand(e.target.value)}
@@ -132,8 +140,14 @@ const Sidebar = ({
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">Arguments</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="arguments-input"
+                >
+                  Arguments
+                </label>
                 <Input
+                  id="arguments-input"
                   placeholder="Arguments (space-separated)"
                   value={args}
                   onChange={(e) => setArgs(e.target.value)}
@@ -144,8 +158,11 @@ const Sidebar = ({
           ) : (
             <>
               <div className="space-y-2">
-                <label className="text-sm font-medium">URL</label>
+                <label className="text-sm font-medium" htmlFor="sse-url-input">
+                  URL
+                </label>
                 <Input
+                  id="sse-url-input"
                   placeholder="URL"
                   value={sseUrl}
                   onChange={(e) => setSseUrl(e.target.value)}
@@ -157,6 +174,7 @@ const Sidebar = ({
                   variant="outline"
                   onClick={() => setShowBearerToken(!showBearerToken)}
                   className="flex items-center w-full"
+                  aria-expanded={showBearerToken}
                 >
                   {showBearerToken ? (
                     <ChevronDown className="w-4 h-4 mr-2" />
@@ -167,8 +185,14 @@ const Sidebar = ({
                 </Button>
                 {showBearerToken && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium">Bearer Token</label>
+                    <label
+                      className="text-sm font-medium"
+                      htmlFor="bearer-token-input"
+                    >
+                      Bearer Token
+                    </label>
                     <Input
+                      id="bearer-token-input"
                       placeholder="Bearer Token"
                       value={bearerToken}
                       onChange={(e) => setBearerToken(e.target.value)}
@@ -187,6 +211,7 @@ const Sidebar = ({
                 onClick={() => setShowEnvVars(!showEnvVars)}
                 className="flex items-center w-full"
                 data-testid="env-vars-button"
+                aria-expanded={showEnvVars}
               >
                 {showEnvVars ? (
                   <ChevronDown className="w-4 h-4 mr-2" />
@@ -201,6 +226,7 @@ const Sidebar = ({
                     <div key={idx} className="space-y-2 pb-4">
                       <div className="flex gap-2">
                         <Input
+                          aria-label={`Environment variable key ${idx + 1}`}
                           placeholder="Key"
                           value={key}
                           onChange={(e) => {
@@ -243,6 +269,7 @@ const Sidebar = ({
                       </div>
                       <div className="flex gap-2">
                         <Input
+                          aria-label={`Environment variable value ${idx + 1}`}
                           type={shownEnvVars.has(key) ? "text" : "password"}
                           placeholder="Value"
                           value={value}
@@ -309,6 +336,7 @@ const Sidebar = ({
               onClick={() => setShowConfig(!showConfig)}
               className="flex items-center w-full"
               data-testid="config-button"
+              aria-expanded={showConfig}
             >
               {showConfig ? (
                 <ChevronDown className="w-4 h-4 mr-2" />
@@ -325,7 +353,10 @@ const Sidebar = ({
                   return (
                     <div key={key} className="space-y-2">
                       <div className="flex items-center gap-1">
-                        <label className="text-sm font-medium text-green-600">
+                        <label
+                          className="text-sm font-medium text-green-600"
+                          htmlFor={`${configKey}-input`}
+                        >
                           {configKey}
                         </label>
                         <Tooltip>
@@ -339,6 +370,7 @@ const Sidebar = ({
                       </div>
                       {typeof configItem.value === "number" ? (
                         <Input
+                          id={`${configKey}-input`}
                           type="number"
                           data-testid={`${configKey}-input`}
                           value={configItem.value}
@@ -365,7 +397,7 @@ const Sidebar = ({
                             setConfig(newConfig);
                           }}
                         >
-                          <SelectTrigger>
+                          <SelectTrigger id={`${configKey}-input`}>
                             <SelectValue />
                           </SelectTrigger>
                           <SelectContent>
@@ -375,6 +407,7 @@ const Sidebar = ({
                         </Select>
                       ) : (
                         <Input
+                          id={`${configKey}-input`}
                           data-testid={`${configKey}-input`}
                           value={configItem.value}
                           onChange={(e) => {
@@ -448,14 +481,19 @@ const Sidebar = ({
 
             {loggingSupported && connectionStatus === "connected" && (
               <div className="space-y-2">
-                <label className="text-sm font-medium">Logging Level</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="logging-level-select"
+                >
+                  Logging Level
+                </label>
                 <Select
                   value={logLevel}
                   onValueChange={(value: LoggingLevel) =>
                     sendLogLevelRequest(value)
                   }
                 >
-                  <SelectTrigger>
+                  <SelectTrigger id="logging-level-select">
                     <SelectValue placeholder="Select logging level" />
                   </SelectTrigger>
                   <SelectContent>