fix: dashboard a11y

components/dashboard/nav.tsx

@@ -28,7 +28,7 @@ export function DashboardNav({ items }: DashboardNavProps) {
               className={cn(
                 "group flex items-center rounded-md px-3 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100",
                 path === item.href ? "bg-slate-200" : "transparent",
-                item.disabled && "cursor-not-allowed opacity-50"
+                item.disabled && "cursor-not-allowed opacity-80"
               )}
             >
               <Icon className="mr-2 h-4 w-4" />

components/dashboard/post-operations.tsx

@@ -40,6 +40,7 @@ export function PostOperations({ post }: PostOperationsProps) {
       <DropdownMenu>
         <DropdownMenu.Trigger className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-slate-50">
           <Icons.ellipsis className="h-4 w-4" />
+          <span className="sr-only">Open</span>
         </DropdownMenu.Trigger>
         <DropdownMenu.Portal>
           <DropdownMenu.Content>

ui/avatar.tsx

@@ -1,6 +1,7 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@/lib/utils"
+import Image, { ImageProps } from "next/image"
 
 type AvatarProps = AvatarPrimitive.AvatarProps
 
@@ -16,10 +17,22 @@ export function Avatar({ className, ...props }: AvatarProps) {
   )
 }
 
-type AvatarImageProps = AvatarPrimitive.AvatarImageProps
-
-Avatar.Image = function AvatarImage({ className, ...props }: AvatarImageProps) {
-  return <AvatarPrimitive.Image className={cn("", className)} {...props} />
+Avatar.Image = function AvatarImage({
+  className,
+  alt,
+  width = 32,
+  height = 32,
+  ...props
+}: ImageProps) {
+  return (
+    <Image
+      className={cn("", className)}
+      alt={alt}
+      width={width}
+      height={height}
+      {...props}
+    />
+  )
 }
 
 Avatar.Fallback = function AvatarFallback({