fix: improve form accessibility with proper label associations

Added missing htmlFor attributes to labels and corresponding IDs to form elements throughout the web UI to enhance accessibility. This ensures screen readers can correctly identify form controls and improves browser autofill functionality. Changes include:

- Fixed label associations in login form
- Added proper IDs to form elements in Settings component
- Replaced decorative labels with semantic headings in PropertiesView
- Added screen reader accessible labels in RetrievalTesting
- Improved checkbox accessibility in QuerySettings
This commit is contained in:
yangdx
2025-04-07 05:20:12 +08:00
parent 01fc513621
commit 46ffb6afa4
5 changed files with 168 additions and 108 deletions

View File

@@ -147,13 +147,19 @@ export default function RetrievalTesting() {
<EraserIcon />
{t('retrievePanel.retrieval.clear')}
</Button>
<Input
className="flex-1"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder={t('retrievePanel.retrieval.placeholder')}
disabled={isLoading}
/>
<div className="flex-1 relative">
<label htmlFor="query-input" className="sr-only">
{t('retrievePanel.retrieval.placeholder')}
</label>
<Input
id="query-input"
className="w-full"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder={t('retrievePanel.retrieval.placeholder')}
disabled={isLoading}
/>
</div>
<Button type="submit" variant="default" disabled={isLoading} size="sm">
<SendIcon />
{t('retrievePanel.retrieval.send')}