opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-21 20:51:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(site): use button instead of div role="button" (#22575)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-03 21:26:01 +00:00
committed by GitHub
parent f6b4b7edab
commit f98761ff67
5 changed files with 39 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/AgentDetail/ConversationTimeline.tsx
+4 -10
View File
@@ -61,18 +61,12 @@ const ReasoningDisclosure: FC<{
return (
<div className="w-full">
{hasText ? (
<div
role="button"
tabIndex={0}
<button
type="button"
aria-expanded={isOpen}
aria-controls={id}
className="flex items-center gap-2 text-content-secondary transition-colors hover:text-content-primary cursor-pointer"
className="flex items-center gap-2 bg-transparent border-0 p-0 text-content-secondary transition-colors hover:text-content-primary cursor-pointer"
onClick={() => setIsOpen((prev) => !prev)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
setIsOpen((prev) => !prev);
}
}}
>
{labelContent}
<ChevronDownIcon
@@ -81,7 +75,7 @@ const ReasoningDisclosure: FC<{
isOpen ? "rotate-0" : "-rotate-90",
)}
/>
</div>
</button>
) : (
<div className="flex items-center gap-2 text-content-secondary transition-colors hover:text-content-primary">
{labelContent}
site/src/pages/AgentsPage/ChatModelAdminPanel/ModelForm.tsx
+17 -68
View File
@@ -230,27 +230,14 @@ export const ModelForm: FC<ModelFormProps> = ({
if (!selectedProviderState || modelConfigsUnavailable) {
return (
<div>
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={onCancel}
onKeyDown={(e) => {
if (e.key === "Enter") {
onCancel();
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
onCancel();
e.stopPropagation();
}
}}
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
>
<ChevronLeftIcon className="h-4 w-4" />
Back
</div>{" "}
</button>{" "}
<h2 className="m-0 text-lg font-medium text-content-primary">
{isEditing ? "Edit Model" : "Add Model"}
</h2>
@@ -264,27 +251,14 @@ export const ModelForm: FC<ModelFormProps> = ({
if (!canManageModels && !isEditing) {
return (
<div>
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={onCancel}
onKeyDown={(e) => {
if (e.key === "Enter") {
onCancel();
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
onCancel();
e.stopPropagation();
}
}}
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
>
<ChevronLeftIcon className="h-4 w-4" />
Back
</div>
</button>
<h2 className="m-0 text-lg font-medium text-content-primary">
Add Model
</h2>{" "}
@@ -310,27 +284,15 @@ export const ModelForm: FC<ModelFormProps> = ({
return (
<div className="flex min-h-full flex-col">
{/* Back */}
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={onCancel}
onKeyDown={(e) => {
if (e.key === "Enter") {
onCancel();
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
onCancel();
e.stopPropagation();
}
}}
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
>
<ChevronLeftIcon className="h-4 w-4" />
Back
</div>
</button>
{/* Header — editable display name */}
<div className="flex items-center gap-3">
{selectedProviderState && (
@@ -439,23 +401,10 @@ export const ModelForm: FC<ModelFormProps> = ({
{/* Advanced — toggle */}
<div>
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={() => setShowAdvanced((v) => !v)}
onKeyDown={(e) => {
if (e.key === "Enter") {
setShowAdvanced((v) => !v);
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
setShowAdvanced((v) => !v);
e.stopPropagation();
}
}}
className="inline-flex cursor-pointer items-center gap-1 text-sm font-medium text-content-secondary transition-colors hover:text-content-primary"
className="inline-flex cursor-pointer items-center gap-1 bg-transparent border-0 p-0 text-sm font-medium text-content-secondary transition-colors hover:text-content-primary"
>
{showAdvanced ? (
<ChevronDownIcon className="h-4 w-4" />
@@ -463,7 +412,7 @@ export const ModelForm: FC<ModelFormProps> = ({
<ChevronRightIcon className="h-4 w-4" />
)}
Advanced
</div>{" "}
</button>{" "}
{showAdvanced && (
<div className="mt-4 space-y-5">
<div className="grid grid-cols-2 gap-3">
site/src/pages/AgentsPage/ChatModelAdminPanel/ModelsSection.tsx
+8 -35
View File
@@ -194,28 +194,15 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
{/* Star for default */}
<Tooltip>
<TooltipTrigger asChild>
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleSetDefault(modelConfig);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.stopPropagation();
handleSetDefault(modelConfig);
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
e.stopPropagation();
handleSetDefault(modelConfig);
}
}}
aria-disabled={isUpdating || modelConfig.is_default}
className={cn(
"flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors",
"flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-transparent border-0 p-0 transition-colors",
modelConfig.is_default
? "text-yellow-400"
: "cursor-pointer text-content-secondary/30 hover:text-content-secondary",
@@ -227,7 +214,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
modelConfig.is_default && "fill-current",
)}
/>
</div>
</button>
</TooltipTrigger>
<TooltipContent side="right">
{modelConfig.is_default
@@ -236,25 +223,11 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
</TooltipContent>
</Tooltip>
{/* Clickable row content */}
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={() => setView({ mode: "edit", model: modelConfig })}
onKeyDown={(e) => {
if (e.key === "Enter") {
setView({ mode: "edit", model: modelConfig });
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
setView({ mode: "edit", model: modelConfig });
e.stopPropagation();
}
}}
className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 transition-colors hover:opacity-80"
className="flex min-w-0 flex-1 cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 text-left transition-colors hover:opacity-80"
>
{" "}
<ProviderIcon
provider={modelConfig.provider}
className="h-8 w-8 shrink-0"
@@ -277,7 +250,7 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
</Badge>
)}
<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
</div>{" "}
</button>{" "}
</div>
))}
</div>
site/src/pages/AgentsPage/ChatModelAdminPanel/ProviderForm.tsx
+5 -17
View File
@@ -155,27 +155,15 @@ export const ProviderForm: FC<ProviderFormProps> = ({
return (
<div className="flex min-h-full flex-col">
{/* Back */}
<div
tabIndex={0}
role="button"
<button
type="button"
onClick={onBack}
onKeyDown={(e) => {
if (e.key === "Enter") {
onBack();
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
onBack();
e.stopPropagation();
}
}}
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 text-sm text-content-secondary transition-colors hover:text-content-primary"
className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
>
<ChevronLeftIcon className="h-4 w-4" />
Back
</div>
</button>
{/* Provider header — editable name */}
<div className="flex items-center gap-3">
<ProviderIcon provider={provider} className="h-8 w-8" />
site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx
+5 -26
View File
@@ -85,10 +85,9 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
)}
<div>
{providerStates.map((providerState, i) => (
<div
<button
type="button"
key={providerState.provider}
tabIndex={0}
role="button"
aria-label={providerState.label}
onClick={() => {
onSelectedProviderChange(providerState.provider);
@@ -97,28 +96,8 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
provider: providerState.provider,
});
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
onSelectedProviderChange(providerState.provider);
setView({
mode: "detail",
provider: providerState.provider,
});
e.stopPropagation();
}
}}
onKeyUp={(e) => {
if (e.key === " ") {
onSelectedProviderChange(providerState.provider);
setView({
mode: "detail",
provider: providerState.provider,
});
e.stopPropagation();
}
}}
className={cn(
"flex cursor-pointer items-center gap-3.5 px-3 py-3 transition-colors hover:bg-surface-secondary/30",
"flex w-full cursor-pointer items-center gap-3.5 bg-transparent border-0 p-0 px-3 py-3 text-left transition-colors hover:bg-surface-secondary/30",
i > 0 && "border-0 border-t border-solid border-border/50",
)}
>
@@ -126,7 +105,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
provider={providerState.provider}
className="h-8 w-8 shrink-0"
/>
<span className="min-w-0 flex-1 truncate text-[15px] font-medium text-content-primary">
<span className="min-w-0 flex-1 truncate text-[15px] font-medium text-content-primary text-left">
{providerState.label}
</span>
{providerState.hasEffectiveAPIKey ? (
@@ -135,7 +114,7 @@ export const ProvidersSection: FC<ProvidersSectionProps> = ({
<CircleIcon className="h-4 w-4 shrink-0 text-content-secondary opacity-40" />
)}
<ChevronRightIcon className="h-5 w-5 shrink-0 text-content-secondary" />
</div>
</button>
))}{" "}
</div>
</>