mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-29 16:04:54 +00:00
johndoe6345789
e023b2da41
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>
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import { Plus } from '@phosphor-icons/react'
|
|
|
|
interface CreateNamespaceDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
namespaceName: string
|
|
onNamespaceNameChange: (name: string) => void
|
|
onCreateNamespace: () => void
|
|
loading: boolean
|
|
}
|
|
|
|
export function CreateNamespaceDialog({
|
|
open,
|
|
onOpenChange,
|
|
namespaceName,
|
|
onNamespaceNameChange,
|
|
onCreateNamespace,
|
|
loading,
|
|
}: CreateNamespaceDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
data-testid="create-namespace-trigger"
|
|
aria-label="Create new namespace"
|
|
>
|
|
<Plus weight="bold" aria-hidden="true" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent data-testid="create-namespace-dialog">
|
|
<DialogHeader>
|
|
<DialogTitle>Create Namespace</DialogTitle>
|
|
<DialogDescription>
|
|
Create a new namespace to organize your snippets
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<Input
|
|
placeholder="Namespace name"
|
|
value={namespaceName}
|
|
onChange={(e) => onNamespaceNameChange(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && onCreateNamespace()}
|
|
data-testid="namespace-name-input"
|
|
aria-label="Namespace name"
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => onOpenChange(false)}
|
|
data-testid="create-namespace-cancel-btn"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={onCreateNamespace}
|
|
disabled={loading}
|
|
data-testid="create-namespace-save-btn"
|
|
>
|
|
Create
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|