@cnamts/synapse 1.0.3 → 1.0.4

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

@@ -17,7 +17,11 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -67,22 +71,23 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -92,12 +97,10 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -117,16 +120,15 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -155,7 +157,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -237,7 +239,11 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -290,22 +296,23 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -315,12 +322,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -340,17 +345,16 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
                 disabled=""
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -435,7 +439,11 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -485,22 +493,23 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -510,12 +519,10 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -535,16 +542,15 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -573,7 +579,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -655,7 +661,11 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -705,22 +715,23 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -730,12 +741,10 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -755,16 +764,15 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -793,7 +801,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -875,7 +883,11 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
     v-toolbar--flat
   "
   minheight="56px"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -917,22 +929,23 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -942,12 +955,10 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -967,16 +978,15 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -1005,7 +1015,7 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>
@@ -1088,7 +1098,11 @@ exports[`TableToolbar > should render 1`] = `
   "
   minheight="56px"
   showaddbtn="true"
-  style="background-color: #FFFFFF; color: #000; caret-color: #000;"
+  style="
+    background-color: #FFFFFF;
+    color: #000;
+    caret-color: #000;
+  "
 >
   <!---->
   <div class="v-toolbar__content">
@@ -1138,22 +1152,23 @@ exports[`TableToolbar > should render 1`] = `
                   v-theme--light
                 "
                 role="progressbar"
-                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                style="
+                  top: 0px;
+                  height: 0px;
+                  --v-progress-linear-height: 2px;
+                "
               >
                 <!---->
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__background
-                  "
+                  class="v-progress-linear__background"
                   style="opacity: NaN;"
                 ></div>
                 <div
-                  class="
-                    bg-primary
-                    v-progress-linear__buffer
+                  class="v-progress-linear__buffer"
+                  style="
+                    opacity: NaN;
+                    width: 0%;
                   "
-                  style="opacity: NaN; width: 0%;"
                 ></div>
                 <transition-stub
                   appear="false"
@@ -1163,12 +1178,10 @@ exports[`TableToolbar > should render 1`] = `
                 >
                   <div class="v-progress-linear__indeterminate">
                     <div class="
-                      bg-primary
                       long
                       v-progress-linear__indeterminate
                     "></div>
                     <div class="
-                      bg-primary
                       short
                       v-progress-linear__indeterminate
                     "></div>
@@ -1188,16 +1201,15 @@ exports[`TableToolbar > should render 1`] = `
                   v-field-label
                   v-label
                 "
-                for="input-0"
+                for="input-v-0"
               >
                 <!---->
                 Rechercher
               </label>
               <!---->
               <input
-                aria-describedby="input-0-messages"
                 class="v-field__input"
-                id="input-0"
+                id="input-v-0"
                 size="1"
                 type="text"
               />
@@ -1226,7 +1238,7 @@ exports[`TableToolbar > should render 1`] = `
                     v-theme--light
                   "
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 ></i>
               </div>
             </transition-stub>

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, nextTick, onMounted, provide, ref, toRef, useAttrs, watch } from 'vue'
+	import { computed, nextTick, onMounted, onUnmounted, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTableServer } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
@@ -16,6 +16,7 @@
 	import { useTableItems } from '../common/useTableItems'
 	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableCheckbox } from '../common/useTableCheckbox'
+	import { useTableAria } from '../common/useTableAria'
 
 	const props = withDefaults(defineProps<SyServerTableProps>(), {
 		caption: '',
@@ -111,10 +112,16 @@
 	// Create a computed property for items to ensure reactivity
 	const tableItems = computed(() => props.items)
 
+	// Timeout management for cleanup
+	const timeouts = ref<ReturnType<typeof setTimeout>[]>([])
+
 	// Function to add accessibility attributes to row checkboxes
 	const accessibilityRowCheckboxes = () => {
 		nextTick(() => {
-			setTimeout(() => {
+			const timeoutId = setTimeout(() => {
+				// Check if document is available (for test environment)
+				if (typeof document === 'undefined') return
+
 				const tableElement = document.getElementById(uniqueTableId.value)
 				if (!tableElement) return
 
@@ -126,6 +133,9 @@
 					checkbox.setAttribute('title', rowLabel)
 				})
 			}, 100) // Small delay to ensure DOM is updated
+
+			// Track timeout for cleanup
+			timeouts.value.push(timeoutId)
 		})
 	}
 
@@ -137,6 +147,15 @@
 	// Apply accessibility attributes when component is mounted
 	onMounted(() => {
 		accessibilityRowCheckboxes()
+		setupAria()
+	})
+
+	// Clean up timeouts on unmount to prevent unhandled errors
+	onUnmounted(() => {
+		timeouts.value.forEach((timeoutId) => {
+			clearTimeout(timeoutId)
+		})
+		timeouts.value = []
 	})
 
 	const { getItemValue, toggleAllRows } = useTableCheckbox({
@@ -147,6 +166,19 @@
 		},
 	})
 
+	// Use the ARIA accessibility composable
+	const {
+		statusRegionId,
+		statusMessage,
+		setupAria,
+	} = useTableAria({
+		table,
+		items: itemsRef,
+		totalItemsCount: itemsLength,
+		options,
+		uniqueTableId: uniqueTableId.value,
+	})
+
 	defineExpose({ filterItems })
 
 	setupAccessibility()
@@ -203,6 +235,15 @@
 		:id="uniqueTableId"
 		:class="['sy-server-table', { 'sy-server-table--striped': props.striped }]"
 	>
+		<!-- ARIA status region for row count announcements -->
+		<div
+			:id="statusRegionId"
+			role="status"
+			aria-live="polite"
+			class="d-sr-only"
+		>
+			{{ statusMessage }}
+		</div>
 		<VDataTableServer
 			ref="table"
 			v-bind="propsFacade"

package/src/components/Tables/SyTable/SyTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, onMounted, nextTick, provide, ref, toRef, useAttrs, watch } from 'vue'
+	import { computed, onMounted, onUnmounted, nextTick, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTable } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
@@ -16,6 +16,7 @@
 	import { useTableHeaders } from '../common/useTableHeaders'
 	import { useTableItems } from '../common/useTableItems'
 	import { useTableCheckbox } from '../common/useTableCheckbox'
+	import { useTableAria } from '../common/useTableAria'
 
 	const props = withDefaults(defineProps<SyTableProps>(), {
 		caption: '',
@@ -104,22 +105,38 @@
 		emit,
 	})
 
-	// Create a computed property for items to ensure reactivity
-	const tableItems = computed(() => props.items)
-
 	// Use the table checkbox composable
-	const { getItemValue, toggleAllRows } = useTableCheckbox({
-		items: tableItems,
+	const { toggleAllRows, getItemValue } = useTableCheckbox({
+		items: filteredItems,
 		modelValue: model,
 		updateModelValue: (value) => {
 			model.value = value
 		},
 	})
 
+	// Use the ARIA accessibility composable
+	const {
+		statusRegionId,
+		statusMessage,
+		setupAria,
+	} = useTableAria({
+		table,
+		items: filteredItems,
+		totalItemsCount: itemsLength,
+		options,
+		uniqueTableId: uniqueTableId.value,
+	})
+
+	// Timeout management for cleanup
+	const timeouts = ref<ReturnType<typeof setTimeout>[]>([])
+
 	// Function to add accessibility attributes to row checkboxes
 	const accessibilityRowCheckboxes = () => {
 		nextTick(() => {
-			setTimeout(() => {
+			const timeoutId = setTimeout(() => {
+				// Check if document is available (for test environment)
+				if (typeof document === 'undefined') return
+
 				const tableElement = document.getElementById(uniqueTableId.value)
 				if (!tableElement) return
 
@@ -131,6 +148,9 @@
 					checkbox.setAttribute('title', rowLabel)
 				})
 			}, 100) // Small delay to ensure DOM is updated
+
+			// Track timeout for cleanup
+			timeouts.value.push(timeoutId)
 		})
 	}
 
@@ -142,6 +162,15 @@
 	// Apply accessibility attributes when component is mounted
 	onMounted(() => {
 		accessibilityRowCheckboxes()
+		setupAria()
+	})
+
+	// Clean up timeouts on unmount to prevent unhandled errors
+	onUnmounted(() => {
+		timeouts.value.forEach((timeoutId) => {
+			clearTimeout(timeoutId)
+		})
+		timeouts.value = []
 	})
 
 	setupAccessibility()
@@ -198,6 +227,15 @@
 		:id="uniqueTableId"
 		:class="['sy-table', { 'sy-table--striped': props.striped }]"
 	>
+		<!-- ARIA status region for row count announcements -->
+		<div
+			:id="statusRegionId"
+			role="status"
+			aria-live="polite"
+			class="d-sr-only"
+		>
+			{{ statusMessage }}
+		</div>
 		<VDataTable
 			ref="table"
 			v-model="model"