Skip to content

Commit 3ffd123

Browse files
cardernecarderne
authored
fix(webapp): associate model administration labels (#4694)
## Summary Associate internal model administration labels with their form controls. The model editor, creator, and tester now use explicit `htmlFor` and `id` pairs. Section titles that do not label controls now use headings instead of label elements. Base: [#4693](#4693)
1 parent 4592fdf commit 3ffd123

3 files changed

Lines changed: 72 additions & 23 deletions

File tree

‎apps/webapp/app/routes/admin.llm-models.$modelId.tsx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,11 @@ export default function AdminLlmModelDetailRoute() {
230230
<div className="space-y-4">
231231
{/* Model fields */}
232232
<div className="space-y-2">
233-
<label className="text-xs font-medium text-text-dimmed">Model Name</label>
233+
<label htmlFor="modelName" className="text-xs font-medium text-text-dimmed">
234+
Model Name
235+
</label>
234236
<Input
237+
id="modelName"
235238
name="modelName"
236239
value={modelName}
237240
onChange={(e) => setModelName(e.target.value)}
@@ -241,8 +244,11 @@ export default function AdminLlmModelDetailRoute() {
241244
</div>
242245

243246
<div className="space-y-2">
244-
<label className="text-xs font-medium text-text-dimmed">Match Pattern (regex)</label>
247+
<label htmlFor="matchPattern" className="text-xs font-medium text-text-dimmed">
248+
Match Pattern (regex)
249+
</label>
245250
<Input
251+
id="matchPattern"
246252
name="matchPattern"
247253
value={matchPattern}
248254
onChange={(e) => setMatchPattern(e.target.value)}
@@ -254,9 +260,12 @@ export default function AdminLlmModelDetailRoute() {
254260

255261
{/* Test pattern */}
256262
<div className="space-y-2">
257-
<label className="text-xs font-medium text-text-dimmed">Test pattern match</label>
263+
<label htmlFor="testPattern" className="text-xs font-medium text-text-dimmed">
264+
Test pattern match
265+
</label>
258266
<div className="flex items-center gap-2">
259267
<Input
268+
id="testPattern"
260269
value={testInput}
261270
onChange={(e) => setTestInput(e.target.value)}
262271
placeholder="Type a model name to test..."
@@ -277,12 +286,15 @@ export default function AdminLlmModelDetailRoute() {
277286

278287
{/* Catalog metadata */}
279288
<div className="space-y-2 border-t border-grid-dimmed pt-4">
280-
<label className="text-sm font-medium text-text-bright">Catalog Metadata</label>
289+
<h3 className="text-sm font-medium text-text-bright">Catalog Metadata</h3>
281290

282291
<div className="grid grid-cols-2 gap-3">
283292
<div className="space-y-1">
284-
<label className="text-xs font-medium text-text-dimmed">Provider</label>
293+
<label htmlFor="provider" className="text-xs font-medium text-text-dimmed">
294+
Provider
295+
</label>
285296
<Input
297+
id="provider"
286298
name="provider"
287299
value={provider}
288300
onChange={(e) => setProvider(e.target.value)}
@@ -292,8 +304,11 @@ export default function AdminLlmModelDetailRoute() {
292304
/>
293305
</div>
294306
<div className="space-y-1">
295-
<label className="text-xs font-medium text-text-dimmed">Context Window</label>
307+
<label htmlFor="contextWindow" className="text-xs font-medium text-text-dimmed">
308+
Context Window
309+
</label>
296310
<Input
311+
id="contextWindow"
297312
name="contextWindow"
298313
value={contextWindow}
299314
onChange={(e) => setContextWindow(e.target.value)}
@@ -305,8 +320,11 @@ export default function AdminLlmModelDetailRoute() {
305320
</div>
306321

307322
<div className="space-y-1">
308-
<label className="text-xs font-medium text-text-dimmed">Description</label>
323+
<label htmlFor="description" className="text-xs font-medium text-text-dimmed">
324+
Description
325+
</label>
309326
<Input
327+
id="description"
310328
name="description"
311329
value={description}
312330
onChange={(e) => setDescription(e.target.value)}
@@ -318,8 +336,11 @@ export default function AdminLlmModelDetailRoute() {
318336

319337
<div className="grid grid-cols-2 gap-3">
320338
<div className="space-y-1">
321-
<label className="text-xs font-medium text-text-dimmed">Max Output Tokens</label>
339+
<label htmlFor="maxOutputTokens" className="text-xs font-medium text-text-dimmed">
340+
Max Output Tokens
341+
</label>
322342
<Input
343+
id="maxOutputTokens"
323344
name="maxOutputTokens"
324345
value={maxOutputTokens}
325346
onChange={(e) => setMaxOutputTokens(e.target.value)}
@@ -329,10 +350,11 @@ export default function AdminLlmModelDetailRoute() {
329350
/>
330351
</div>
331352
<div className="space-y-1">
332-
<label className="text-xs font-medium text-text-dimmed">
353+
<label htmlFor="capabilities" className="text-xs font-medium text-text-dimmed">
333354
Features (comma-separated)
334355
</label>
335356
<Input
357+
id="capabilities"
336358
name="capabilities"
337359
value={capabilities}
338360
onChange={(e) => setCapabilities(e.target.value)}
@@ -344,8 +366,11 @@ export default function AdminLlmModelDetailRoute() {
344366
</div>
345367

346368
<div className="space-y-1">
347-
<label className="text-xs font-medium text-text-dimmed">Pricing Unit</label>
369+
<label htmlFor="pricingUnit" className="text-xs font-medium text-text-dimmed">
370+
Pricing Unit
371+
</label>
348372
<select
373+
id="pricingUnit"
349374
name="pricingUnit"
350375
value={pricingUnit}
351376
onChange={(e) => setPricingUnit(e.target.value)}
@@ -374,7 +399,7 @@ export default function AdminLlmModelDetailRoute() {
374399
{/* Pricing tiers */}
375400
<div className="space-y-3">
376401
<div className="flex items-center justify-between">
377-
<label className="text-sm font-medium text-text-bright">Pricing Tiers</label>
402+
<h3 className="text-sm font-medium text-text-bright">Pricing Tiers</h3>
378403
<Button
379404
type="button"
380405
variant="tertiary/small"

‎apps/webapp/app/routes/admin.llm-models._index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,12 +223,13 @@ export default function AdminLlmModelsRoute() {
223223

224224
{/* Model tester */}
225225
<div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
226-
<label className="text-xs font-medium text-text-dimmed">
226+
<label htmlFor="modelString" className="text-xs font-medium text-text-dimmed">
227227
Test model string — paste a model name to see which pricing model matches
228228
</label>
229229
<testFetcher.Form method="post" className="flex items-center gap-2">
230230
<input type="hidden" name="_action" value="test" />
231231
<Input
232+
id="modelString"
232233
name="modelString"
233234
placeholder="e.g. anthropic/claude-haiku-4-5-20251001, gpt-4o-mini, mistral/mistral-large-3"
234235
variant="medium"

‎apps/webapp/app/routes/admin.llm-models.new.tsx‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,11 @@ export default function AdminLlmModelNewRoute() {
178178

179179
<div className="space-y-4">
180180
<div className="space-y-2">
181-
<label className="text-xs font-medium text-text-dimmed">Model Name</label>
181+
<label htmlFor="modelName" className="text-xs font-medium text-text-dimmed">
182+
Model Name
183+
</label>
182184
<Input
185+
id="modelName"
183186
name="modelName"
184187
value={modelName}
185188
onChange={(e) => setModelName(e.target.value)}
@@ -191,7 +194,7 @@ export default function AdminLlmModelNewRoute() {
191194

192195
<div className="space-y-2">
193196
<div className="flex items-center justify-between">
194-
<label className="text-xs font-medium text-text-dimmed">
197+
<label htmlFor="matchPattern" className="text-xs font-medium text-text-dimmed">
195198
Match Pattern (regex)
196199
</label>
197200
<button
@@ -203,6 +206,7 @@ export default function AdminLlmModelNewRoute() {
203206
</button>
204207
</div>
205208
<Input
209+
id="matchPattern"
206210
name="matchPattern"
207211
value={matchPattern}
208212
onChange={(e) => setMatchPattern(e.target.value)}
@@ -214,9 +218,12 @@ export default function AdminLlmModelNewRoute() {
214218
</div>
215219

216220
<div className="space-y-2">
217-
<label className="text-xs font-medium text-text-dimmed">Test pattern match</label>
221+
<label htmlFor="testPattern" className="text-xs font-medium text-text-dimmed">
222+
Test pattern match
223+
</label>
218224
<div className="flex items-center gap-2">
219225
<Input
226+
id="testPattern"
220227
value={testInput}
221228
onChange={(e) => setTestInput(e.target.value)}
222229
placeholder="Type a model name to test..."
@@ -237,12 +244,15 @@ export default function AdminLlmModelNewRoute() {
237244

238245
{/* Catalog metadata */}
239246
<div className="space-y-2 border-t border-grid-dimmed pt-4">
240-
<label className="text-sm font-medium text-text-bright">Catalog Metadata</label>
247+
<h3 className="text-sm font-medium text-text-bright">Catalog Metadata</h3>
241248

242249
<div className="grid grid-cols-2 gap-3">
243250
<div className="space-y-1">
244-
<label className="text-xs font-medium text-text-dimmed">Provider</label>
251+
<label htmlFor="provider" className="text-xs font-medium text-text-dimmed">
252+
Provider
253+
</label>
245254
<Input
255+
id="provider"
246256
name="provider"
247257
value={provider}
248258
onChange={(e) => setProvider(e.target.value)}
@@ -252,8 +262,11 @@ export default function AdminLlmModelNewRoute() {
252262
/>
253263
</div>
254264
<div className="space-y-1">
255-
<label className="text-xs font-medium text-text-dimmed">Context Window</label>
265+
<label htmlFor="contextWindow" className="text-xs font-medium text-text-dimmed">
266+
Context Window
267+
</label>
256268
<Input
269+
id="contextWindow"
257270
name="contextWindow"
258271
value={contextWindow}
259272
onChange={(e) => setContextWindow(e.target.value)}
@@ -265,8 +278,11 @@ export default function AdminLlmModelNewRoute() {
265278
</div>
266279

267280
<div className="space-y-1">
268-
<label className="text-xs font-medium text-text-dimmed">Description</label>
281+
<label htmlFor="description" className="text-xs font-medium text-text-dimmed">
282+
Description
283+
</label>
269284
<Input
285+
id="description"
270286
name="description"
271287
value={description}
272288
onChange={(e) => setDescription(e.target.value)}
@@ -278,8 +294,11 @@ export default function AdminLlmModelNewRoute() {
278294

279295
<div className="grid grid-cols-2 gap-3">
280296
<div className="space-y-1">
281-
<label className="text-xs font-medium text-text-dimmed">Max Output Tokens</label>
297+
<label htmlFor="maxOutputTokens" className="text-xs font-medium text-text-dimmed">
298+
Max Output Tokens
299+
</label>
282300
<Input
301+
id="maxOutputTokens"
283302
name="maxOutputTokens"
284303
value={maxOutputTokens}
285304
onChange={(e) => setMaxOutputTokens(e.target.value)}
@@ -289,10 +308,11 @@ export default function AdminLlmModelNewRoute() {
289308
/>
290309
</div>
291310
<div className="space-y-1">
292-
<label className="text-xs font-medium text-text-dimmed">
311+
<label htmlFor="capabilities" className="text-xs font-medium text-text-dimmed">
293312
Features (comma-separated)
294313
</label>
295314
<Input
315+
id="capabilities"
296316
name="capabilities"
297317
value={capabilities}
298318
onChange={(e) => setCapabilities(e.target.value)}
@@ -304,8 +324,11 @@ export default function AdminLlmModelNewRoute() {
304324
</div>
305325

306326
<div className="space-y-1">
307-
<label className="text-xs font-medium text-text-dimmed">Pricing Unit</label>
327+
<label htmlFor="pricingUnit" className="text-xs font-medium text-text-dimmed">
328+
Pricing Unit
329+
</label>
308330
<select
331+
id="pricingUnit"
309332
name="pricingUnit"
310333
value={pricingUnit}
311334
onChange={(e) => setPricingUnit(e.target.value)}
@@ -334,7 +357,7 @@ export default function AdminLlmModelNewRoute() {
334357
{/* Pricing tiers */}
335358
<div className="space-y-3">
336359
<div className="flex items-center justify-between">
337-
<label className="text-sm font-medium text-text-bright">Pricing Tiers</label>
360+
<h3 className="text-sm font-medium text-text-bright">Pricing Tiers</h3>
338361
<Button
339362
type="button"
340363
variant="tertiary/small"

0 commit comments

Comments
 (0)