paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-10-24 16:43:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Static Elements should not be interactive

Browse Source
This commit is contained in:
tigattack
2025-09-24 23:15:04 +01:00
parent 83ce7c64fd
commit a84da7c731
4 changed files with 163 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/DashboardSettingsModal.jsx
View File

@@ -257,9 +257,11 @@ const DashboardSettingsModal = ({ isOpen, onClose }) => {
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 bg-secondary-500 bg-opacity-75 transition-opacity"
<button
type="button"
className="fixed inset-0 bg-secondary-500 bg-opacity-75 transition-opacity cursor-default"
onClick={onClose}
aria-label="Close modal"
/>
<div className="inline-block align-bottom bg-white dark:bg-secondary-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">

6
frontend/src/components/Layout.jsx
View File

@@ -308,9 +308,11 @@ const Layout = ({ children }) => {
<div
className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? "block" : "hidden"}`}
>
<div
className="fixed inset-0 bg-secondary-600 bg-opacity-75"
<button
type="button"
className="fixed inset-0 bg-secondary-600 bg-opacity-75 cursor-default"
onClick={() => setSidebarOpen(false)}
aria-label="Close sidebar"
/>
<div className="relative flex w-full max-w-xs flex-col bg-white pb-4 pt-5 shadow-xl">
<div className="absolute right-0 top-0 -mr-12 pt-2">

169
frontend/src/pages/Dashboard.jsx
View File

@@ -342,9 +342,16 @@ const Dashboard = () => {
);
case "totalHosts":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleTotalHostsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleTotalHostsClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -359,14 +366,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "hostsNeedingUpdates":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleHostsNeedingUpdatesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleHostsNeedingUpdatesClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -381,14 +395,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "totalOutdatedPackages":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOutdatedPackagesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOutdatedPackagesClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -403,14 +424,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "securityUpdates":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleSecurityUpdatesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleSecurityUpdatesClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -425,14 +453,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "totalHostGroups":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleHostGroupsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleHostGroupsClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -447,14 +482,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "totalUsers":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleUsersClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleUsersClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -469,14 +511,21 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "totalRepos":
return (
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleRepositoriesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleRepositoriesClick();
}
}}
>
<div className="flex items-center">
<div className="flex-shrink-0">
@@ -491,18 +540,25 @@ const Dashboard = () => {
</p>
</div>
</div>
</div>
</button>
);
case "erroredHosts":
return (
<div
className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 ${
<button
type="button"
className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left ${
stats.cards.erroredHosts > 0
? "bg-danger-50 border-danger-200"
: "bg-success-50 border-success-200"
}`}
onClick={handleErroredHostsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleErroredHostsClick();
}
}}
>
<div className="flex">
<AlertTriangle
@@ -538,18 +594,25 @@ const Dashboard = () => {
)}
</div>
</div>
</div>
</button>
);
case "offlineHosts":
return (
<div
className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 ${
<button
type="button"
className={`border rounded-lg p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left ${
stats.cards.offlineHosts > 0
? "bg-warning-50 border-warning-200"
: "bg-success-50 border-success-200"
}`}
onClick={handleOfflineHostsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOfflineHostsClick();
}
}}
>
<div className="flex">
<WifiOff
@@ -583,14 +646,21 @@ const Dashboard = () => {
)}
</div>
</div>
</div>
</button>
);
case "osDistribution":
return (
<div
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOSDistributionClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOSDistributionClick();
}
}}
>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
@@ -598,14 +668,21 @@ const Dashboard = () => {
<div className="h-64">
<Pie data={osChartData} options={chartOptions} />
</div>
</div>
</button>
);
case "osDistributionBar":
return (
<div
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOSDistributionClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOSDistributionClick();
}
}}
>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
@@ -613,14 +690,21 @@ const Dashboard = () => {
<div className="h-64">
<Bar data={osBarChartData} options={barChartOptions} />
</div>
</div>
</button>
);
case "updateStatus":
return (
<div
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleUpdateStatusClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleUpdateStatusClick();
}
}}
>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
Update Status
@@ -631,14 +715,21 @@ const Dashboard = () => {
options={updateStatusChartOptions}
/>
</div>
</div>
</button>
);
case "packagePriority":
return (
<div
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handlePackagePriorityClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handlePackagePriorityClick();
}
}}
>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
Package Priority
@@ -649,7 +740,7 @@ const Dashboard = () => {
options={packagePriorityChartOptions}
/>
</div>
</div>
</button>
);
case "quickStats": {

37
frontend/src/pages/Hosts.jsx
View File

@@ -1559,8 +1559,9 @@ const Hosts = () => {
{/* Stats Summary */}
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
onClick={handleTotalHostsClick}
>
<div className="flex items-center">
@@ -1574,9 +1575,10 @@ const Hosts = () => {
</p>
</div>
</div>
</div>
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
</button>
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
onClick={handleUpToDateClick}
>
<div className="flex items-center">
@@ -1591,9 +1593,10 @@ const Hosts = () => {
</p>
</div>
</div>
</div>
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
</button>
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
onClick={handleNeedsUpdatesClick}
>
<div className="flex items-center">
@@ -1607,9 +1610,10 @@ const Hosts = () => {
</p>
</div>
</div>
</div>
<div
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
</button>
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
onClick={handleStaleClick}
>
<div className="flex items-center">
@@ -1623,7 +1627,7 @@ const Hosts = () => {
</p>
</div>
</div>
</div>
</button>
</div>
{/* Hosts List */}
@@ -2298,9 +2302,18 @@ const ColumnSettingsModal = ({
<div
key={column.id}
draggable
tabIndex={0}
role="button"
aria-label={`Drag to reorder ${column.label} column`}
onDragStart={(e) => handleDragStart(e, index)}
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, index)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
// Focus handling for keyboard users
}
}}
className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
draggedIndex === index
? "opacity-50"