public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Corentin Thomasset 2023-10-15 23:41:55 +02:00
parent 88b881880c
commit b408df82c1
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/c-table/c-table.vue
View File

@ -2,7 +2,7 @@
import _ from 'lodash'; import _ from 'lodash';
import type { HeaderConfiguration } from './c-table.types'; 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 { data, headers: rawHeaders, hideHeaders } = toRefs(props);
const headers = computed(() => { const headers = computed(() => {
@ -38,7 +38,7 @@ const headers = computed(() => {
<template> <template>
<div class="relative overflow-x-auto rounded"> <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" role="table" :aria-label="description">
<thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400"> <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400">
<tr> <tr>
<th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs"> <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">