44 SheetHeader ,
55 SheetTitle ,
66 SheetTrigger ,
7+ SheetDescription ,
78} from "@/components/ui/sheet"
89import { Button } from "@/components/ui/button"
910import { Input } from "@/components/ui/input"
@@ -166,6 +167,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
166167 variant = "ghost"
167168 size = "sm"
168169 className = "h-10 w-10 rounded-none hover:bg-muted"
170+ aria-label = "Open Collections Panel"
169171 >
170172 < Folder className = "h-4 w-4" />
171173 </ Button >
@@ -176,6 +178,9 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
176178 >
177179 < SheetHeader >
178180 < SheetTitle className = "text-foreground" > Collections</ SheetTitle >
181+ < SheetDescription >
182+ Manage your saved API requests and collections
183+ </ SheetDescription >
179184 </ SheetHeader >
180185 < div className = "flex flex-col h-[calc(100vh-5rem)]" >
181186 < div className = "flex items-center justify-between py-6" >
@@ -192,6 +197,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
192197 className = "hidden"
193198 accept = ".json"
194199 onChange = { handleImport }
200+ aria-label = "Import Collections"
195201 />
196202 < DropdownMenu >
197203 < DropdownMenuTrigger asChild >
@@ -252,6 +258,11 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
252258 variant = "ghost"
253259 size = "sm"
254260 className = "h-6 w-6 p-0 hover:bg-muted/50"
261+ aria-label = {
262+ expandedCollections . has ( collection . id )
263+ ? `Collapse Collection ${ collection . name } `
264+ : `Expand Collection ${ collection . name } `
265+ }
255266 >
256267 { expandedCollections . has ( collection . id ) ? (
257268 < ChevronDown className = "h-4 w-4" />
@@ -264,6 +275,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
264275 onChange = { ( e ) => updateCollection ( collection . id , { name : e . target . value } ) }
265276 onClick = { ( e ) => e . stopPropagation ( ) }
266277 className = "h-8 bg-background text-foreground"
278+ aria-label = { `Collection Name ${ collection . name } ` }
267279 />
268280 </ div >
269281 < div className = "flex items-center gap-2" >
@@ -273,6 +285,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
273285 size = "sm"
274286 onClick = { ( ) => handleSaveCurrentRequest ( collection . id ) }
275287 className = "h-8"
288+ aria-label = "Save Current Request"
276289 >
277290 < Save className = "h-4 w-4" />
278291 </ Button >
@@ -306,6 +319,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
306319 } }
307320 className = "h-8"
308321 title = "Restore all requests"
322+ aria-label = "Restore All Requests"
309323 >
310324 < RotateCw className = "h-4 w-4" />
311325 </ Button >
@@ -314,6 +328,7 @@ export const CollectionsPanel = forwardRef<HTMLButtonElement, CollectionsPanelPr
314328 size = "sm"
315329 onClick = { ( ) => deleteCollection ( collection . id ) }
316330 className = "h-8 text-destructive-foreground hover:text-destructive-foreground hover:bg-destructive"
331+ aria-label = { `Delete Collection ${ collection . name } ` }
317332 >
318333 < Trash2 className = "h-4 w-4" />
319334 </ Button >
0 commit comments