Enhance Card component accessibility with ARIA attributes

Author: monayemislam

resources/js/components/ui/card/Card.vue

@@ -4,11 +4,18 @@ import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
     class?: HTMLAttributes['class'];
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 }>();
 </script>
 
 <template>
-    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)">
+    <div 
+        :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)"
+        role="region"
+        :aria-labelledby="props['aria-labelledby']"
+        :aria-describedby="props['aria-describedby']"
+    >
         <slot />
     </div>
 </template>