add accessible labels to select input settings

Author: jankuca

src/webviews/webview-side/selectInputSettings/SelectInputSettingsPanel.tsx

@@ -179,8 +179,12 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
                                 ))}
 
                                 <div className="add-option-form">
+                                    <label htmlFor="addOptionInput" className="visually-hidden">
+                                        Option name
+                                    </label>
                                     <input
                                         type="text"
+                                        id="addOptionInput"
                                         value={newOption}
                                         onChange={(e) => setNewOption(e.target.value)}
                                         onKeyDown={(e) => {
@@ -190,6 +194,7 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
                                             }
                                         }}
                                         placeholder={getLocString('addOptionPlaceholder', 'Add option...')}
+                                        aria-label="Option name"
                                     />
                                     <button type="button" onClick={handleAddOption}>
                                         {getLocString('addButton', 'Add')}
@@ -218,13 +223,20 @@ export const SelectInputSettingsPanel: React.FC<ISelectInputSettingsPanelProps>
                         </div>
 
                         {settings.selectType === 'from-variable' && (
-                            <input
-                                type="text"
-                                className="variable-input"
-                                value={settings.selectedVariable}
-                                onChange={handleVariableChange}
-                                placeholder={getLocString('variablePlaceholder', 'Variable name...')}
-                            />
+                            <>
+                                <label htmlFor="variableNameInput" className="visually-hidden">
+                                    Variable name
+                                </label>
+                                <input
+                                    type="text"
+                                    id="variableNameInput"
+                                    className="variable-input"
+                                    value={settings.selectedVariable}
+                                    onChange={handleVariableChange}
+                                    placeholder={getLocString('variablePlaceholder', 'Variable name...')}
+                                    aria-label="Variable name"
+                                />
+                            </>
                         )}
                     </div>
                 </label>

src/webviews/webview-side/selectInputSettings/selectInputSettings.css

@@ -4,6 +4,18 @@
     margin: 0 auto;
 }
 
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
 .select-input-settings-panel h1 {
     font-size: 24px;
     margin-bottom: 20px;