refactor(c-table): added description on c-table for accessibility (#667)

src/ui/c-table/c-table.vue

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import type { HeaderConfiguration } from './c-table.types';
 
-const props = withDefaults(defineProps<{ data?: Record<string, unknown>[]; headers?: HeaderConfiguration ; hideHeaders?: boolean }>(), { data: () => [], headers: undefined, hideHeaders: false });
+const props = withDefaults(defineProps<{ data?: Record<string, unknown>[]; headers?: HeaderConfiguration ; hideHeaders?: boolean; description?: string }>(), { data: () => [], headers: undefined, hideHeaders: false, description: 'Data table' });
 const { data, headers: rawHeaders, hideHeaders } = toRefs(props);
 
 const headers = computed(() => {
@@ -38,7 +38,7 @@ const headers = computed(() => {
 
 <template>
   <div class="relative overflow-x-auto rounded">
-    <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400">
+    <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" :description="description" role="table">
       <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">