From dc2211d0576892275c7bf69954e99bb76d67c5f5 Mon Sep 17 00:00:00 2001
From: monayemislam <monayemislam@gmail.com>
Date: Wed, 26 Feb 2025 01:50:51 +0600
Subject: [PATCH] Enhance Card component accessibility with ARIA attributes

---
 resources/js/components/ui/card/Card.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/card/Card.vue b/resources/js/components/ui/card/Card.vue
index d0581cdd..79bc4249 100644
--- a/resources/js/components/ui/card/Card.vue
+++ b/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>