feat: enhance accessibility by adding ARIA attributes and focus styles; improve canvas and button elements

view/LayersSheet.tsx

@@ -28,7 +28,9 @@ export function LayersSheet({ document, selection, maskEdit, open, dispatch, doc
 
   return (
     <aside
+      id="layers-sheet"
       aria-hidden={!open}
+      aria-label="Layers"
       className={`pointer-events-auto absolute bottom-6 right-4 top-24 z-20 flex w-[28rem] flex-col overflow-hidden rounded-[2.5rem] px-4 text-sm text-white backdrop-blur-xl transition-all duration-200 ${
         open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-8 opacity-0"
       }`}
@@ -380,6 +382,7 @@ function RenameInput({ value, onChange, onCommit, onCancel }: { value: string; o
   return (
     <input
       autoFocus
+      aria-label="Rename item"
       className="min-w-0 flex-1 rounded-full bg-white px-3 py-1.5 font-medium text-black outline-none ring-1 ring-black/10 focus:ring-sky-300/50"
       value={value}
       onChange={(event) => onChange(event.target.value)}