@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/Tables/common/tests/TableHeader.spec.ts

@@ -0,0 +1,272 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import TableHeader from '../TableHeader.vue'
+import type { SortOptions } from '../types'
+import type { VDataTable } from 'vuetify/components'
+
+describe('TableHeader', () => {
+	// Test for basic rendering
+	it('renders correctly with basic props', () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => false,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Test Column')
+		expect(wrapper.find('.v-data-table-header__sort-icon').exists()).toBe(true)
+	})
+
+	// Test for multi-sort priority indicators
+	it('displays sort order indicator when multi-sort is active', async () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [
+						{ key: 'other', order: 'asc' } as SortOptions,
+						{ key: 'test', order: 'asc' } as SortOptions,
+					],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+						{
+							key: 'other',
+							value: 'other',
+							title: 'Other Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check if the sort order indicator is displayed
+		expect(wrapper.find('.sort-order-indicator').exists()).toBe(true)
+		// Check if the sort order indicator shows the correct number (2 in this case)
+		expect(wrapper.find('.sort-order-indicator').text()).toBe('2')
+	})
+
+	// Test for no sort order indicator when only one column is sorted
+	it('does not display sort order indicator when only one column is sorted', async () => {
+		const column = {
+			title: 'Test Column',
+			key: 'test',
+			value: 'test',
+			sortable: true,
+		}
+
+		const wrapper = mount(TableHeader, {
+			props: {
+				column,
+				headerParams: {
+					sortBy: [
+						{ key: 'test', order: 'asc' } as SortOptions,
+					],
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns: [
+						{
+							key: 'test',
+							value: 'test',
+							title: 'Test Column',
+							sortable: true,
+						},
+					],
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check that the sort order indicator is not displayed
+		expect(wrapper.find('.sort-order-indicator').exists()).toBe(false)
+	})
+
+	// Test for correct sort order when multiple columns are sorted
+	it('displays correct sort order numbers for multiple sorted columns', async () => {
+		const columns = [
+			{
+				key: 'first',
+				value: 'first',
+				title: 'First Column',
+				sortable: true,
+			},
+			{
+				key: 'second',
+				value: 'second',
+				title: 'Second Column',
+				sortable: true,
+			},
+			{
+				key: 'third',
+				value: 'third',
+				title: 'Third Column',
+				sortable: true,
+			},
+		]
+
+		const sortBy: SortOptions[] = [
+			{ key: 'first', order: 'asc' },
+			{ key: 'second', order: 'desc' },
+			{ key: 'third', order: 'asc' },
+		]
+
+		// First column (sort order 1)
+		const firstColumn = {
+			title: 'First Column',
+			key: 'first',
+			value: 'first',
+			sortable: true,
+		}
+
+		const firstWrapper = mount(TableHeader, {
+			props: {
+				column: firstColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Second column (sort order 2)
+		const secondColumn = {
+			title: 'Second Column',
+			key: 'second',
+			value: 'second',
+			sortable: true,
+		}
+
+		const secondWrapper = mount(TableHeader, {
+			props: {
+				column: secondColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Third column (sort order 3)
+		const thirdColumn = {
+			title: 'Third Column',
+			key: 'third',
+			value: 'third',
+			sortable: true,
+		}
+
+		const thirdWrapper = mount(TableHeader, {
+			props: {
+				column: thirdColumn,
+				headerParams: {
+					sortBy,
+					getSortIcon: () => 'mdi-arrow-up',
+					toggleSort: () => {},
+					columns,
+					headers: [],
+					someSelected: false,
+					allSelected: false,
+					selectAll: () => {},
+					isSorted: () => true,
+				},
+				table: { $el: { offsetWidth: 800 } } as unknown as VDataTable,
+				resizableColumns: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check that each column shows the correct sort order number
+		expect(firstWrapper.find('.sort-order-indicator').text()).toBe('1')
+		expect(secondWrapper.find('.sort-order-indicator').text()).toBe('2')
+		expect(thirdWrapper.find('.sort-order-indicator').text()).toBe('3')
+	})
+})

package/src/components/Tables/common/types.ts

@@ -74,6 +74,8 @@ export type SyTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }
 
 export type SyServerTableProps = {
@@ -89,4 +91,6 @@ export type SyServerTableProps = {
 	enableColumnControls?: boolean
 	headers?: DataTableHeaders[]
 	showSelect?: boolean
+	multiSort?: boolean
+	mustSort?: boolean
 }

package/src/components/Tables/common/useTableAria.ts

@@ -0,0 +1,279 @@
+import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
+import type { VDataTable, VDataTableServer } from 'vuetify/components'
+import { locales } from './locales'
+import type { DataOptions } from './types'
+
+export interface UseTableAriaOptions {
+	table: Ref<VDataTable | VDataTableServer | undefined>
+	items: Ref<unknown[]>
+	totalItemsCount: Ref<number>
+	options: Ref<Partial<DataOptions>>
+	uniqueTableId: string
+}
+
+export function useTableAria({
+	table,
+	items,
+	totalItemsCount,
+	options,
+	uniqueTableId,
+}: UseTableAriaOptions) {
+	const statusRegionId = `${uniqueTableId}-status`
+	const statusMessage = ref('')
+
+	// Calculate the total row count including header rows
+	const totalRowCount = computed(() => {
+		// Add 1 for the main header row
+		let headerRows = 1
+
+		// Add 1 if filters are shown (filter row)
+		if (table.value?.$el?.querySelector('.filters')) {
+			headerRows++
+		}
+
+		// Add 1 if reset filter row is shown
+		if (table.value?.$el?.querySelector('.reset')) {
+			headerRows++
+		}
+
+		return totalItemsCount.value + headerRows
+	})
+
+	// Get the current sort state for aria-sort attribute
+	const getSortState = (columnKey: string): 'ascending' | 'descending' | 'other' | 'none' => {
+		const sortBy = options.value.sortBy
+		if (!sortBy || sortBy.length === 0) {
+			return 'none'
+		}
+
+		const sortItem = sortBy.find(item => item.key === columnKey)
+		if (!sortItem) {
+			return 'none'
+		}
+
+		if (sortItem.order === 'asc') {
+			return 'ascending'
+		}
+		else if (sortItem.order === 'desc') {
+			return 'descending'
+		}
+		else {
+			return 'other'
+		}
+	}
+
+	// Update ARIA attributes on the table element
+	const updateTableAria = async () => {
+		await nextTick()
+
+		const tableElement = table.value?.$el?.querySelector('table')
+		if (tableElement) {
+			tableElement.setAttribute('aria-rowcount', totalRowCount.value.toString())
+		}
+	}
+
+	// Update ARIA attributes on table rows
+	const updateRowAria = async () => {
+		await nextTick()
+
+		const tableElement = table.value?.$el?.querySelector('table')
+		if (!tableElement) return
+
+		// Update header rows
+		const headerRows = tableElement.querySelectorAll('thead tr')
+		headerRows.forEach((row, index) => {
+			row.setAttribute('aria-rowindex', (index + 1).toString())
+		})
+
+		// Update data rows - only visible/filtered rows should be counted
+		const dataRows = tableElement.querySelectorAll('tbody tr')
+		let rowIndex = headerRows.length + 1 // Start after header rows
+
+		dataRows.forEach((row) => {
+			// Skip empty state rows (no data message)
+			if (row.querySelector('td[colspan]')) {
+				// Remove aria-rowindex from empty state rows
+				row.removeAttribute('aria-rowindex')
+				return
+			}
+
+			// Skip hidden rows (display: none or visibility: hidden)
+			const computedStyle = window.getComputedStyle(row)
+			if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden') {
+				row.removeAttribute('aria-rowindex')
+				return
+			}
+
+			// Only assign aria-rowindex to visible data rows
+			row.setAttribute('aria-rowindex', rowIndex.toString())
+			rowIndex++
+		})
+	}
+
+	// Update ARIA sort attributes on header cells
+	const updateHeaderAria = async () => {
+		await nextTick()
+
+		const tableElement = table.value?.$el?.querySelector('table')
+		if (!tableElement) return
+
+		const headerCells = tableElement.querySelectorAll('thead tr.headers th')
+		headerCells.forEach((cell) => {
+			// Try to find column key from various sources
+			let columnKey = null
+
+			// Look for sort button or column identifier
+			const sortButton = cell.querySelector('button[data-column-key], .sortable[data-column-key]')
+			if (sortButton) {
+				columnKey = sortButton.getAttribute('data-column-key')
+			}
+
+			// Fallback: look for any element with data-column-key
+			if (!columnKey) {
+				const columnElement = cell.querySelector('[data-column-key]')
+				columnKey = columnElement?.getAttribute('data-column-key')
+			}
+
+			// If we found a column key, set the sort state
+			if (columnKey) {
+				const sortState = getSortState(columnKey)
+				cell.setAttribute('aria-sort', sortState)
+			}
+			else {
+				// Default to 'none' if no column key found
+				cell.setAttribute('aria-sort', 'none')
+			}
+
+			// Handle accessibility for header cell interactive elements
+			// Only apply to non-checkbox columns
+			if (!cell.querySelector('input[type="checkbox"]')) {
+				const interactiveElements = cell.querySelectorAll('button, [tabindex]:not([tabindex="-1"])')
+
+				// Remove existing event listeners to avoid duplicates
+				interactiveElements.forEach((element) => {
+					element.removeEventListener('focus', handleInteractiveElementFocus)
+					element.removeEventListener('blur', handleInteractiveElementBlur)
+				})
+
+				interactiveElements.forEach((element, index) => {
+					if (index === 0) {
+						// First interactive element (usually the sort button) should be accessible
+						element.removeAttribute('aria-hidden')
+					}
+					else {
+						// Other elements should be hidden initially
+						element.setAttribute('aria-hidden', 'true')
+					}
+
+					// Add event listeners
+					element.addEventListener('focus', handleInteractiveElementFocus)
+					element.addEventListener('blur', handleInteractiveElementBlur)
+				})
+			}
+		})
+	}
+
+	// Event handlers for interactive elements
+	const handleInteractiveElementFocus = (event: Event) => {
+		const element = event.target as HTMLElement
+		element.removeAttribute('aria-hidden')
+	}
+
+	const handleInteractiveElementBlur = (event: Event) => {
+		const element = event.target as HTMLElement
+		const cell = element.closest('th')
+		if (!cell) return
+
+		const interactiveElements = cell.querySelectorAll('button, [tabindex]:not([tabindex="-1"])')
+		const isPrimary = element === interactiveElements[0]
+
+		if (!isPrimary) {
+			element.setAttribute('aria-hidden', 'true')
+		}
+	}
+
+	// Update status message for screen readers
+	const updateStatusMessage = () => {
+		const count = items.value.length
+		statusMessage.value = locales.rowCountStatus(count)
+	}
+
+	// Ensure tabbable elements are never hidden from screen readers
+	const ensureTabbableElementsAccessible = async () => {
+		await nextTick()
+
+		const tableContainer = table.value?.$el
+		if (!tableContainer) return
+
+		// Find all tabbable elements within the table container
+		const tabbableElements = tableContainer.querySelectorAll(
+			'[tabindex]:not([tabindex="-1"]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="combobox"], [role="button"]',
+		)
+
+		tabbableElements.forEach((element: Element) => {
+			// Check if the element or any of its parents have aria-hidden="true"
+			let current = element as HTMLElement
+			while (current && current !== tableContainer) {
+				if (current.getAttribute('aria-hidden') === 'true') {
+					// Remove aria-hidden from tabbable elements and their containers
+					current.removeAttribute('aria-hidden')
+
+					// Add a data attribute to track that we modified this for accessibility
+					current.setAttribute('data-aria-accessible', 'true')
+				}
+				current = current.parentElement as HTMLElement
+			}
+
+			// Ensure the tabbable element itself is not hidden
+			if ((element as HTMLElement).getAttribute('aria-hidden') === 'true') {
+				(element as HTMLElement).removeAttribute('aria-hidden');
+				(element as HTMLElement).setAttribute('data-aria-accessible', 'true')
+			}
+		})
+	}
+
+	// Setup all ARIA attributes
+	const setupAria = async () => {
+		await updateTableAria()
+		await updateRowAria()
+		await updateHeaderAria()
+		await ensureTabbableElementsAccessible()
+		updateStatusMessage()
+	}
+
+	// Watch for changes that require ARIA updates
+	watch(() => items.value.length, () => {
+		updateStatusMessage()
+		updateRowAria()
+		updateTableAria()
+	})
+
+	watch(() => totalItemsCount.value, () => {
+		updateTableAria()
+	})
+
+	watch(() => options.value.sortBy, () => {
+		updateHeaderAria()
+	}, { deep: true })
+
+	watch(() => options.value.page, () => {
+		updateRowAria()
+	})
+
+	// Setup ARIA attributes when component is mounted
+	onMounted(() => {
+		setupAria()
+	})
+
+	return {
+		statusRegionId,
+		statusMessage,
+		totalRowCount,
+		getSortState,
+		setupAria,
+		updateTableAria,
+		updateRowAria,
+		updateHeaderAria,
+		updateStatusMessage,
+	}
+}

package/src/components/ToolbarContainer/ToolbarContainer.vue

@@ -17,7 +17,7 @@
 
 		const nextIndex = currentIndex < tools.length - 1 ? currentIndex + 1 : 0
 
-		const nextElem = tools.at(nextIndex)
+		const nextElem = tools[nextIndex]
 
 		e.target.setAttribute('tabindex', '-1')
 		nextElem?.setAttribute('tabindex', '0')
@@ -29,7 +29,7 @@
 
 		const prevIndex = currentIndex > 0 ? currentIndex - 1 : tools.length - 1
 
-		const nextElem = tools.at(prevIndex)
+		const nextElem = tools[prevIndex]
 
 		e.target.setAttribute('tabindex', '-1')
 		nextElem?.setAttribute('tabindex', '0')
@@ -37,7 +37,7 @@
 	}
 
 	function selectFirstElement() {
-		const firstElement = tools.at(0)
+		const firstElement = tools[0]
 		if (!firstElement) {
 			return
 		}
@@ -47,7 +47,7 @@
 	}
 
 	function selectLastElement() {
-		const lastElement = tools.at(-1)
+		const lastElement = tools[tools.length - 1]
 		if (!lastElement) {
 			return
 		}

package/src/components/UploadWorkflow/tests/__snapshots__/UploadWorkflow.spec.ts.snap

@@ -41,7 +41,11 @@ exports[`UploadWorkflow > render the upload list 1`] = `
                 v-icon
                 v-theme--light
               "
-              style="font-size: 24px; height: 24px; width: 24px;"
+              style="
+                font-size: 24px;
+                height: 24px;
+                width: 24px;
+              "
             ></i>
           </span>
           <div>
@@ -144,7 +148,11 @@ exports[`UploadWorkflow > render the upload list 1`] = `
                 v-icon
                 v-theme--light
               "
-              style="font-size: 24px; height: 24px; width: 24px;"
+              style="
+                font-size: 24px;
+                height: 24px;
+                width: 24px;
+              "
             ></i>
           </span>
           <div>
@@ -237,13 +245,13 @@ exports[`UploadWorkflow > render the upload list 1`] = `
         pa-4
         sy-file-upload
       "
-      for="file-upload-v-0"
+      for="file-upload-v-2"
       style="width: 100%;"
     >
       <input
         accept=".pdf, .jpg, .jpeg, .png"
         class="sy-file-upload-input"
-        id="file-upload-v-0"
+        id="file-upload-v-2"
         type="file"
       />
       <span class="sy-file-upload-placeholder">
@@ -311,7 +319,11 @@ exports[`UploadWorkflow > render the upload list 1`] = `
             v-icon
             v-theme--light
           "
-          style="font-size: 40px; height: 40px; width: 40px;"
+          style="
+            font-size: 40px;
+            height: 40px;
+            width: 40px;
+          "
         ></i>
         <span class="
           font-weight-medium

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 	import { computed } from 'vue'
-	import SyBtnSelect from '../Customs/SyBtnSelect/SyBtnSelect.vue'
+	import SyBtnSelect from '@/components/Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
 	import { useDisplay } from 'vuetify'
 	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'