Skip to content

Commit c100eb0

Browse files
committed
fix: improve accessibility and state management
1. **App.tsx**: Fix mobile sidebar overlay accessibility - Replace div with semantic button element for overlay - Remove redundant role and tabIndex attributes (implicit in button) - Add cursor-default to maintain visual consistency - Improves keyboard navigation and screen reader experience 2. **EntityDetailPanel.tsx**: Remove unnecessary key props - Remove key={entityId} from OperationsPanel, ConfigurationPanel, FaultsPanel - Previous behavior caused full component remount on entity change - This lost in-progress form state and execution history - Components now maintain state across entity selections when appropriate - More granular state management without losing user context
1 parent 04cdbb7 commit c100eb0

File tree

2 files changed

+6
-7
lines changed

2 files changed

+6
-7
lines changed

src/App.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,15 @@ function App() {
110110

111111
{/* Overlay for mobile when sidebar is open */}
112112
{sidebarOpen && (
113-
<div
114-
className="fixed inset-0 z-30 bg-black/50 md:hidden"
113+
<button
114+
type="button"
115+
className="fixed inset-0 z-30 bg-black/50 md:hidden cursor-default"
115116
onClick={() => setSidebarOpen(false)}
116117
onKeyDown={(event) => {
117118
if (event.key === 'Escape') {
118119
setSidebarOpen(false);
119120
}
120121
}}
121-
role="button"
122-
tabIndex={0}
123122
aria-label="Close sidebar"
124123
/>
125124
)}

src/components/EntityDetailPanel.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,11 @@ function ComponentTabContent({
126126
/>
127127
);
128128
case 'operations':
129-
return <OperationsPanel key={entityId} entityId={entityId} entityType={entityType} />;
129+
return <OperationsPanel entityId={entityId} entityType={entityType} />;
130130
case 'configurations':
131-
return <ConfigurationPanel key={entityId} entityId={entityId} entityType={entityType} />;
131+
return <ConfigurationPanel entityId={entityId} entityType={entityType} />;
132132
case 'faults':
133-
return <FaultsPanel key={entityId} entityId={entityId} entityType={entityType} />;
133+
return <FaultsPanel entityId={entityId} entityType={entityType} />;
134134
default:
135135
return null;
136136
}

0 commit comments

Comments
 (0)