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:
parent
6af844340c
commit
5a52913a90
2 changed files with 18 additions and 14 deletions
|
|
@ -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)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue