fix: Resolve TypeScript errors and add ARIA accessibility

- Fixed type mismatches in ProxmoxAgentNodesPanel (prop signatures)
- Fixed temperatureTransports type (array vs single object)
- Added ARIA attributes to SetupWizard for screen reader support
- All tsc --noEmit checks pass
This commit is contained in:
rcourtman 2025-12-13 15:49:37 +00:00
parent 6af844340c
commit 5a52913a90
2 changed files with 18 additions and 14 deletions

View file

@ -54,7 +54,7 @@ interface ProxmoxAgentNodesPanelProps {
// Temperature monitoring // Temperature monitoring
temperatureMonitoringEnabled: Accessor<boolean>; temperatureMonitoringEnabled: Accessor<boolean>;
temperatureTransports?: Accessor<TemperatureTransportInfo[]>; temperatureTransports?: Accessor<TemperatureTransportInfo | null>;
// Discovery settings // Discovery settings
discoveryEnabled: Accessor<boolean>; discoveryEnabled: Accessor<boolean>;
@ -70,9 +70,9 @@ interface ProxmoxAgentNodesPanelProps {
handleDiscoveryEnabledChange: (enabled: boolean) => Promise<boolean>; handleDiscoveryEnabledChange: (enabled: boolean) => Promise<boolean>;
triggerDiscoveryScan: (opts: { quiet: boolean }) => Promise<void>; triggerDiscoveryScan: (opts: { quiet: boolean }) => Promise<void>;
loadDiscoveredNodes: () => Promise<void>; loadDiscoveredNodes: () => Promise<void>;
testNodeConnection: (node: NodeConfig) => Promise<void>; testNodeConnection: (nodeId: string) => void;
requestDeleteNode: (node: NodeConfig) => void; requestDeleteNode: (node: NodeConfig) => void;
refreshClusterNodes?: (clusterId: string, sampleNodeId: string) => Promise<void>; refreshClusterNodes?: (nodeId: string) => void;
// Modal controls // Modal controls
setEditingNode: Setter<NodeConfigWithStatus | null>; setEditingNode: Setter<NodeConfigWithStatus | null>;
@ -163,7 +163,7 @@ export const ProxmoxAgentNodesPanel: Component<ProxmoxAgentNodesPanelProps> = (p
}, 50); }, 50);
} else { } else {
// PVE and PBS pre-fill the node object // PVE and PBS pre-fill the node object
const baseNode: NodeConfigWithStatus = { const baseNode = {
id: '', id: '',
type: props.agentType, type: props.agentType,
name: server.hostname || `${props.agentType}-${server.ip}`, name: server.hostname || `${props.agentType}-${server.ip}`,
@ -172,8 +172,8 @@ export const ProxmoxAgentNodesPanel: Component<ProxmoxAgentNodesPanelProps> = (p
tokenName: '', tokenName: '',
tokenValue: '', tokenValue: '',
verifySSL: false, verifySSL: false,
status: 'pending', status: 'pending' as const,
}; } as NodeConfigWithStatus;
if (props.agentType === 'pve') { if (props.agentType === 'pve') {
Object.assign(baseNode, { Object.assign(baseNode, {
@ -207,14 +207,14 @@ export const ProxmoxAgentNodesPanel: Component<ProxmoxAgentNodesPanelProps> = (p
stateNodes={props.stateNodes ?? []} stateNodes={props.stateNodes ?? []}
stateHosts={props.stateHosts ?? []} stateHosts={props.stateHosts ?? []}
globalTemperatureMonitoringEnabled={props.temperatureMonitoringEnabled()} globalTemperatureMonitoringEnabled={props.temperatureMonitoringEnabled()}
temperatureTransports={props.temperatureTransports?.() ?? []} temperatureTransports={props.temperatureTransports?.() ?? null}
onTestConnection={props.testNodeConnection} onTestConnection={props.testNodeConnection}
onEdit={(node) => { onEdit={(node) => {
props.setEditingNode(node as NodeConfigWithStatus); props.setEditingNode(node as NodeConfigWithStatus);
props.setCurrentNodeType('pve'); props.setCurrentNodeType('pve');
props.setShowNodeModal(true); props.setShowNodeModal(true);
}} }}
onDelete={props.requestDeleteNode} onDelete={(node) => props.requestDeleteNode(node)}
onRefreshCluster={props.refreshClusterNodes} onRefreshCluster={props.refreshClusterNodes}
/> />
); );
@ -230,7 +230,7 @@ export const ProxmoxAgentNodesPanel: Component<ProxmoxAgentNodesPanelProps> = (p
props.setCurrentNodeType('pbs'); props.setCurrentNodeType('pbs');
props.setShowNodeModal(true); props.setShowNodeModal(true);
}} }}
onDelete={props.requestDeleteNode} onDelete={(node) => props.requestDeleteNode(node)}
/> />
); );
} else { } else {
@ -246,7 +246,7 @@ export const ProxmoxAgentNodesPanel: Component<ProxmoxAgentNodesPanelProps> = (p
props.setModalResetKey((prev) => prev + 1); props.setModalResetKey((prev) => prev + 1);
props.setShowNodeModal(true); props.setShowNodeModal(true);
}} }}
onDelete={props.requestDeleteNode} onDelete={(node) => props.requestDeleteNode(node)}
/> />
); );
} }

View file

@ -68,9 +68,13 @@ export const SetupWizard: Component<SetupWizardProps> = (props) => {
}; };
return ( return (
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 flex flex-col"> <div
class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 flex flex-col"
role="main"
aria-label="Pulse Setup Wizard"
>
{/* Background decoration */} {/* Background decoration */}
<div class="fixed inset-0 overflow-hidden pointer-events-none"> <div class="fixed inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl" /> <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/20 rounded-full blur-3xl" />
<div class="absolute top-1/2 -left-40 w-80 h-80 bg-indigo-500/20 rounded-full blur-3xl" /> <div class="absolute top-1/2 -left-40 w-80 h-80 bg-indigo-500/20 rounded-full blur-3xl" />
<div class="absolute -bottom-40 right-1/3 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl" /> <div class="absolute -bottom-40 right-1/3 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl" />
@ -78,7 +82,7 @@ export const SetupWizard: Component<SetupWizardProps> = (props) => {
{/* Step indicator - only show after welcome */} {/* Step indicator - only show after welcome */}
<Show when={currentStep() !== 'welcome' && currentStep() !== 'complete'}> <Show when={currentStep() !== 'welcome' && currentStep() !== 'complete'}>
<div class="relative z-10 pt-8 px-4"> <div class="relative z-10 pt-8 px-4" role="navigation" aria-label="Setup progress">
<StepIndicator <StepIndicator
steps={['Security', 'Connect', 'Features']} steps={['Security', 'Connect', 'Features']}
currentStep={currentStepIndex() - 1} currentStep={currentStepIndex() - 1}
@ -88,7 +92,7 @@ export const SetupWizard: Component<SetupWizardProps> = (props) => {
{/* Main content */} {/* Main content */}
<div class="flex-1 flex items-center justify-center p-4 relative z-10"> <div class="flex-1 flex items-center justify-center p-4 relative z-10">
<div class="w-full max-w-2xl"> <div class="w-full max-w-2xl" role="region" aria-live="polite">
<Show when={currentStep() === 'welcome'}> <Show when={currentStep() === 'welcome'}>
<WelcomeStep <WelcomeStep
onNext={nextStep} onNext={nextStep}