feat: enhance button accessibility by adding cursor-pointer class and type attributes in CreatePipelinePage and AddDataSource component

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-04-25 18:54:45 +07:00
parent 6a48f4f234
commit 616cfabd70
3 changed files with 21 additions and 8 deletions

View File

@ -8,7 +8,7 @@ export default function CreatePipelinePage() {
<div className="container mx-auto p-6"> <div className="container mx-auto p-6">
<div className="mt-6"> <div className="mt-6">
<Link href="/data-pipeline"> <Link href="/data-pipeline">
<Button variant="outline" className="mb-6"> <Button variant="outline" className="mb-6 cursor-pointer">
<ArrowLeft className="mr-2 h-4 w-4" /> <ArrowLeft className="mr-2 h-4 w-4" />
Back to Pipelines Back to Pipelines
</Button> </Button>

View File

@ -48,7 +48,7 @@ export default function DataPipelinePage() {
<div className="flex justify-end mt-4"> <div className="flex justify-end mt-4">
<Link href="/data-pipeline/create"> <Link href="/data-pipeline/create">
<Button className="gap-2"> <Button className="gap-2 cursor-pointer">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Pipeline Create Pipeline
</Button> </Button>

View File

@ -78,6 +78,7 @@ export function AddDataSource() {
variant="outline" variant="outline"
size="sm" size="sm"
className="text-destructive" className="text-destructive"
type="button"
> >
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Remove Source Remove Source
@ -106,9 +107,7 @@ export function AddDataSource() {
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Drag and drop your file here, or click to browse Drag and drop your file here, or click to browse
</p> </p>
<Button variant="outline" className="mt-2"> <Input type="file" className="mt-2 cursor-pointer" />
Select File
</Button>
</div> </div>
</div> </div>
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-1">
@ -121,6 +120,7 @@ export function AddDataSource() {
variant="outline" variant="outline"
size="sm" size="sm"
className="text-destructive" className="text-destructive"
type="button"
> >
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Remove Source Remove Source
@ -167,6 +167,7 @@ export function AddDataSource() {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
type="button"
className="text-destructive" className="text-destructive"
> >
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
@ -179,15 +180,27 @@ export function AddDataSource() {
</Accordion> </Accordion>
<div className="flex flex-col gap-2 mt-4"> <div className="flex flex-col gap-2 mt-4">
<Button variant="outline" className="w-full justify-start gap-2"> <Button
variant="outline"
type="button"
className="w-full justify-start gap-2"
>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add Website Source Add Website Source
</Button> </Button>
<Button variant="outline" className="w-full justify-start gap-2"> <Button
variant="outline"
type="button"
className="w-full justify-start gap-2"
>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add File Upload Source Add File Upload Source
</Button> </Button>
<Button variant="outline" className="w-full justify-start gap-2"> <Button
variant="outline"
type="button"
className="w-full justify-start gap-2"
>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add API Source Add API Source
</Button> </Button>