Files
snippet-pastebin/src/components/SnippetManagerRedux.tsx
johndoe6345789 e023b2da41 Add data-testid and accessibility improvements across components
Enhancements include:
- Added data-testid attributes to all interactive components for improved e2e testing
- Improved ARIA labels and semantic HTML attributes throughout
- Added aria-label, aria-hidden, aria-describedby, and aria-current where appropriate
- Enhanced form elements with proper aria-invalid and error associations
- Added role attributes to semantic containers
- Improved navigation accessibility with aria-expanded and aria-controls
- Added proper aria-pressed to toggle buttons

Modified components:
- Dialog components (SnippetDialog, CreateNamespaceDialog, DeleteNamespaceDialog)
- Navigation components (NavigationSidebar, Navigation toggle)
- Snippet display components (SnippetCard, SnippetCardActions)
- Snippet manager components (SnippetToolbar, SnippetGrid)
- Snippet editor components (SnippetFormFields, InputParameterList, InputParameterItem)
- Namespace management (NamespaceSelector)
- Layout components (PageLayout)

These changes improve both automated testing capabilities and accessibility for users with disabilities.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-01-20 18:12:59 +00:00

140 lines
4.0 KiB
TypeScript

import { SnippetDialog } from '@/components/features/snippet-editor/SnippetDialog'
import { SnippetViewer } from '@/components/features/snippet-viewer/SnippetViewer'
import { EmptyState } from '@/components/features/snippet-display/EmptyState'
import { NamespaceSelector } from '@/components/features/namespace-manager/NamespaceSelector'
import { SnippetTemplate } from '@/lib/types'
import templatesData from '@/data/templates.json'
import { useSnippetManager } from '@/hooks/useSnippetManager'
import { SnippetToolbar } from '@/components/snippet-manager/SnippetToolbar'
import { SelectionControls } from '@/components/snippet-manager/SelectionControls'
import { SnippetGrid } from '@/components/snippet-manager/SnippetGrid'
const templates = templatesData as SnippetTemplate[]
export function SnippetManagerRedux() {
const {
snippets,
filteredSnippets,
loading,
selectionMode,
selectedIds,
namespaces,
selectedNamespaceId,
dialogOpen,
viewerOpen,
editingSnippet,
viewingSnippet,
searchQuery,
handleSaveSnippet,
handleEditSnippet,
handleDeleteSnippet,
handleCopyCode,
handleViewSnippet,
handleMoveSnippet,
handleCreateNew,
handleCreateFromTemplate,
handleToggleSelectionMode,
handleToggleSnippetSelection,
handleSelectAll,
handleBulkMove,
handleNamespaceChange,
handleSearchChange,
handleDialogClose,
handleViewerClose,
} = useSnippetManager(templates)
if (loading) {
return (
<div className="text-center py-20" data-testid="snippet-manager-loading">
<p className="text-muted-foreground">Loading snippets...</p>
</div>
)
}
if (snippets.length === 0) {
return (
<>
<div className="mb-6">
<NamespaceSelector
selectedNamespaceId={selectedNamespaceId}
onNamespaceChange={handleNamespaceChange}
/>
</div>
<EmptyState
onCreateClick={handleCreateNew}
onCreateFromTemplate={handleCreateFromTemplate}
/>
<SnippetDialog
open={dialogOpen}
onOpenChange={handleDialogClose}
onSave={handleSaveSnippet}
editingSnippet={editingSnippet}
/>
</>
)
}
return (
<div className="space-y-6" data-testid="snippet-manager">
<NamespaceSelector
selectedNamespaceId={selectedNamespaceId}
onNamespaceChange={handleNamespaceChange}
/>
<SnippetToolbar
searchQuery={searchQuery}
onSearchChange={handleSearchChange}
selectionMode={selectionMode}
onToggleSelectionMode={handleToggleSelectionMode}
onCreateNew={handleCreateNew}
onCreateFromTemplate={handleCreateFromTemplate}
templates={templates}
/>
{selectionMode && (
<SelectionControls
selectedIds={selectedIds}
totalFilteredCount={filteredSnippets.length}
namespaces={namespaces}
currentNamespaceId={selectedNamespaceId}
onSelectAll={handleSelectAll}
onBulkMove={handleBulkMove}
/>
)}
{filteredSnippets.length === 0 && searchQuery && (
<div className="text-center py-20">
<p className="text-muted-foreground">No snippets found matching "{searchQuery}"</p>
</div>
)}
<SnippetGrid
snippets={filteredSnippets}
onView={handleViewSnippet}
onEdit={handleEditSnippet}
onDelete={handleDeleteSnippet}
onCopy={handleCopyCode}
onMove={handleMoveSnippet}
selectionMode={selectionMode}
selectedIds={selectedIds}
onToggleSelect={handleToggleSnippetSelection}
/>
<SnippetDialog
open={dialogOpen}
onOpenChange={handleDialogClose}
onSave={handleSaveSnippet}
editingSnippet={editingSnippet}
/>
<SnippetViewer
open={viewerOpen}
onOpenChange={handleViewerClose}
snippet={viewingSnippet}
onEdit={handleEditSnippet}
onCopy={handleCopyCode}
/>
</div>
)
}