Skip to content

Commit e7dc6c4

Browse files
danmarshalldanmarshall
committed
a11y for model dialog
1 parent 46051e5 commit e7dc6c4

File tree

1 file changed

+38
-31
lines changed

1 file changed

+38
-31
lines changed

‎src/views/ModelSelectionDialog.tsx

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,12 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
118118
onClick={() => {setTempSelectedMode(undefined)}}
119119
>
120120
<TableCell align="right">
121-
<Radio checked={tempSelectedModel == undefined} name="radio-buttons" />
121+
<Radio checked={tempSelectedModel == undefined} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}}/>
122122
</TableCell>
123123
<TableCell align="left">
124124
<FormControl sx={{width: 100 }} size="small">
125125
<Select
126+
title='key type'
126127
value={newKeyType}
127128
input={<OutlinedInput sx={{fontSize: '0.875rem'}}/>}
128129
onChange={(event: SelectChangeEvent) => {
@@ -135,7 +136,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
135136
</FormControl>
136137
</TableCell>
137138
<TableCell component="th" scope="row">
138-
{newKeyType == "openai" ? <Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography> : <TextField size="small" type="text" fullWidth
139+
{newKeyType == "openai" ? <Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography> : <TextField size="small" type="text" fullWidth
139140
disabled={newKeyType == "openai"}
140141
InputProps={{ style: { fontSize: "0.875rem" } }}
141142
value={newEndpoint} onChange={(event: any) => { setNewEndpoint(event.target.value); }}
@@ -163,6 +164,10 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
163164
//label={modelExists ? "endpoint and model exists" : ""}
164165
{...params}
165166
InputProps={{ ...params.InputProps, style: { fontSize: "0.875rem" } }}
167+
inputProps={{
168+
...params.inputProps, // Spread params.inputProps to preserve existing functionality
169+
'aria-label': 'Select or enter a model', // Apply aria-label directly to inputProps
170+
}}
166171
size="small"
167172
onChange={(event: any) => { setNewModel(event.target.value); }}
168173
/>
@@ -234,21 +239,19 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
234239

235240
let message = status == "unknown" ? "Status unknown, click the status icon to test again." :
236241
(testedModels.find(m => m.model === oaiModel.model && m.endpoint === oaiModel.endpoint)?.message || "Unknown error");
237-
const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed lightgray' : undefined;
242+
const borderStyle = ['error', 'unknown'].includes(status) ? '1px dashed text.secondary' : undefined;
238243
const noBorderStyle = ['error', 'unknown'].includes(status) ? 'none' : undefined;
239244

240245
return (
241246
<>
242247
<TableRow
243-
role="checkbox"
244-
aria-checked={isItemSelected}
245248
selected={isItemSelected}
246249
key={`${oaiModel.endpoint}-${oaiModel.model}`}
247250
onClick={() => { setTempSelectedMode({model: oaiModel.model, endpoint: oaiModel.endpoint}) }}
248251
sx={{ cursor: 'pointer'}}
249252
>
250253
<TableCell align="right" sx={{ borderBottom: noBorderStyle }}>
251-
<Radio checked={isItemSelected} name="radio-buttons" />
254+
<Radio checked={isItemSelected} name="radio-buttons" inputProps={{'aria-label': 'Select this model'}} />
252255
</TableCell>
253256
<TableCell align="left" sx={{ borderBottom: noBorderStyle }}>
254257
{oaiModel.endpoint == 'openai' ? 'openai' : 'azure openai'}
@@ -258,37 +261,41 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
258261
</TableCell>
259262
<TableCell align="left" sx={{ borderBottom: borderStyle }}>
260263
{oaiModel.key != "" ?
261-
(showKeys ? (oaiModel.key || <Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography>) : "************") :
262-
<Typography sx={{color: "lightgray"}} fontSize='inherit'>N/A</Typography>
264+
(showKeys ? (oaiModel.key || <Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography>) : "************") :
265+
<Typography sx={{color: "text.secondary"}} fontSize='inherit'>N/A</Typography>
263266
}
264267
</TableCell>
265268
<TableCell align="left" sx={{ borderBottom: borderStyle }}>{oaiModel.model}</TableCell>
266269
<TableCell sx={{fontWeight: 'bold', borderBottom: borderStyle}} align="right">
267-
<IconButton
268-
onClick ={() => { testModel(oaiModel.endpoint, oaiModel.key, oaiModel.model) }}
269-
>
270-
{statusIcon}
271-
</IconButton>
270+
<Tooltip title={message}>
271+
<IconButton
272+
onClick ={() => { testModel(oaiModel.endpoint, oaiModel.key, oaiModel.model) }}
273+
>
274+
{statusIcon}
275+
</IconButton>
276+
</Tooltip>
272277
</TableCell>
273278
<TableCell sx={{ borderBottom: borderStyle }} align="right">
274-
<IconButton disabled={oaiModel.endpoint=="default"}
275-
onClick={()=>{
276-
dispatch(dfActions.removeModel({model: oaiModel.model, endpoint: oaiModel.endpoint}));
277-
if ((tempSelectedModel)
278-
&& tempSelectedModel.endpoint == oaiModel.endpoint
279-
&& tempSelectedModel.model == oaiModel.model) {
280-
if (oaiModels.length == 0) {
281-
setTempSelectedMode(undefined);
282-
} else {
283-
let chosenModel = oaiModels[oaiModels.length - 1];
284-
setTempSelectedMode({
285-
model: chosenModel.model, endpoint: chosenModel.endpoint
286-
})
279+
<Tooltip title="remove model">
280+
<IconButton disabled={oaiModel.endpoint=="default"}
281+
onClick={()=>{
282+
dispatch(dfActions.removeModel({model: oaiModel.model, endpoint: oaiModel.endpoint}));
283+
if ((tempSelectedModel)
284+
&& tempSelectedModel.endpoint == oaiModel.endpoint
285+
&& tempSelectedModel.model == oaiModel.model) {
286+
if (oaiModels.length == 0) {
287+
setTempSelectedMode(undefined);
288+
} else {
289+
let chosenModel = oaiModels[oaiModels.length - 1];
290+
setTempSelectedMode({
291+
model: chosenModel.model, endpoint: chosenModel.endpoint
292+
})
293+
}
287294
}
288-
}
289-
}}>
290-
<ClearIcon/>
291-
</IconButton>
295+
}}>
296+
<ClearIcon/>
297+
</IconButton>
298+
</Tooltip>
292299
</TableCell>
293300
</TableRow>
294301
{['error', 'unknown'].includes(status) && (
@@ -304,7 +311,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
304311
>
305312
<TableCell colSpan={2} align="right" ></TableCell>
306313
<TableCell colSpan={5}>
307-
<Typography variant="caption" color="error">
314+
<Typography variant="caption" color="#c82c2c">
308315
{message}
309316
</Typography>
310317
</TableCell>

0 commit comments

Comments
 (0)