表单行不再用 label 包 button 型控件

没有 for 的 label 会绑定内部第一个可关联控件。导入 ini 的「内容」行里
那是 DropFile 的按钮:悬停 textarea 会点亮投放区,点到行内空白处直接
弹出文件选择框。SelectBox 的开关按钮同理(InboundForm、RuleGroupForm、
ini 映射行),悬停整行都会点亮它。这些行改用 div,无障碍名换成控件
自己的 aria-label。ComboBox 的行保持 label——它第一个可关联控件是文本
输入框,label 转发过去正是想要的行为。
This commit is contained in:
2026-08-12 03:18:43 +08:00
parent 158dc9fca7
commit 25d60f9718
3 changed files with 39 additions and 16 deletions
+16 -6
View File
@@ -154,13 +154,15 @@ function submit() {
</span>
</label>
<label class="row">
<!-- SelectBox 的行不用 label 包:没有 for 的 label 绑定第一个可关联控件,
正好是它的开关按钮,悬停行内任何位置都会点亮它、点空白处会展开面板 -->
<div class="row">
<span class="k">类型</span>
<span class="v">
<SelectBox v-model="type" :options="typeOptions" />
<SelectBox v-model="type" :options="typeOptions" aria-label="类型" />
<span v-if="typeNote" class="note">{{ typeNote }}</span>
</span>
</label>
</div>
<label class="row">
<span class="k">端口</span>
@@ -178,7 +180,7 @@ function submit() {
</span>
</label>
<label v-for="f in requiredExtras" :key="f.key" class="row">
<div v-for="f in requiredExtras" :key="f.key" class="row">
<span class="k">{{ f.key }}</span>
<span class="v">
<SelectBox
@@ -186,11 +188,19 @@ function submit() {
v-model="extras[f.key]"
:options="f.enum.map((opt) => ({ value: String(opt) }))"
placeholder="请选择"
:aria-label="f.key"
/>
<input
v-else
v-model="extras[f.key]"
class="mono"
type="text"
autocomplete="off"
:aria-label="f.key"
/>
<input v-else v-model="extras[f.key]" class="mono" type="text" autocomplete="off" />
<span v-if="f.note" class="note">{{ f.note }}</span>
</span>
</label>
</div>
</div>
<footer class="dlg-foot">