mgv-backoffice 1.24.0 → 1.25.0

package/src/components/BaseConfirmModal.vue

@@ -44,7 +44,7 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="[
           t.ghostButton,
           submitting ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
@@ -57,8 +57,9 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
         :class="[
+          variant === 'danger' ? 'focus-visible:ring-red-500' : 'focus-visible:ring-emerald-500',
           variant === 'danger'
             ? submitting ? 'bg-red-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 cursor-pointer'
             : submitting ? 'bg-emerald-400 cursor-not-allowed' : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer',

package/src/components/BaseCopyButton.vue

@@ -75,7 +75,7 @@ const ariaLabel = computed(() => (props.label ? `Copy ${props.label}` : 'Copy'))
 const buttonClass = computed(() => {
   if (props.variant === 'bordered') {
     const base =
-      'inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0'
+      'inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500'
     const state = copied.value
       ? isDark.value
         ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-400'
@@ -86,7 +86,7 @@ const buttonClass = computed(() => {
     return `${base} ${state}`
   }
   // ghost
-  const base = 'p-1 rounded transition-colors cursor-pointer'
+  const base = 'p-1 rounded transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500'
   const state = isDark.value
     ? 'text-gray-400 hover:text-emerald-300 hover:bg-emerald-500/10'
     : 'text-gray-500 hover:text-emerald-600 hover:bg-emerald-50'

package/src/components/BaseDropdown.vue

@@ -112,7 +112,7 @@ const triggerClass = computed(() => {
     'flex items-center justify-between gap-2 rounded-lg border text-left text-sm transition-colors ' +
     'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 ' +
     'hover:bg-slate-50 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ' +
-    'disabled:opacity-50 disabled:cursor-not-allowed ' +
+    'cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ' +
     padding
   )
 })
@@ -120,7 +120,7 @@ const triggerClass = computed(() => {
 function rowClass(opt: DropdownOption): string {
   const selected = opt.value === props.modelValue
   const base =
-    'block w-full px-4 py-2 text-left text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+    'block w-full px-4 py-2 text-left text-sm transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed'
   const fill = selected
     ? 'bg-emerald-500 text-white'
     : 'text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'

package/src/components/BaseEntityPickerModal.vue

@@ -55,10 +55,12 @@
 
     <!-- Item list -->
     <div v-if="!loading && !loadError" class="mt-3 max-h-64 overflow-y-auto">
-      <div
+      <button
         v-for="item in filteredItems"
         :key="item.id"
-        class="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors"
+        type="button"
+        :aria-pressed="selectedId === item.id"
+        class="w-full text-left flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
         :class="[
           selectedId === item.id
             ? palette.selectedRow
@@ -81,7 +83,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
           </svg>
         </div>
-      </div>
+      </button>
 
       <!-- Empty states -->
       <div v-if="items.length === 0" class="text-center py-6">
@@ -100,7 +102,7 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="t.ghostButton"
         @click="handleCancel"
       >
@@ -109,7 +111,7 @@
       <button
         type="button"
         :disabled="!selectedId || submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="!selectedId || submitting ? palette.confirmDisabled : palette.confirmActive"
         @click="handleConfirm"
       >

package/src/components/BaseInput.vue

@@ -11,7 +11,7 @@
   <input
     :value="modelValue"
     :type="type"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm"
+    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
     :class="[block ? 'w-full' : '', size === 'sm' ? 'px-2 py-1.5' : 'px-3 py-2']"
     @input="onInput"
   />

package/src/components/BaseNotFoundPage.vue

@@ -8,7 +8,7 @@
       <p class="text-lg mb-6" :class="t.dimTextAlt">{{ message }}</p>
       <button
         @click="goHome"
-        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors cursor-pointer"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="isDark ? 'bg-emerald-600 hover:bg-emerald-500' : 'bg-emerald-600 hover:bg-emerald-700'"
       >
         {{ homeLabel }}

package/src/components/BaseSegmentedControl.vue

@@ -75,12 +75,12 @@ const wrapClass = computed(() =>
 const buttonClass = computed(() => {
   if (props.variant === 'toolbar') {
     return (
-      'flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors ' +
+      'flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors cursor-pointer ' +
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500'
     )
   }
   const padding = props.variant === 'wide' ? 'px-4 py-2' : 'px-3 py-2'
-  return `${padding} text-sm font-medium transition-colors border-l first:border-l-0 border-slate-300 dark:border-slate-600`
+  return `${padding} text-sm font-medium transition-colors cursor-pointer border-l first:border-l-0 border-slate-300 dark:border-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500`
 })
 
 const activeFill = computed(() =>

package/src/components/BaseSelect.vue

@@ -7,7 +7,7 @@
   -->
   <select
     :value="modelValue"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm"
+    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
     :class="[block ? 'w-full' : '', size === 'md' ? 'px-3 py-2' : 'px-2 py-1.5']"
     @change="onChange"
   >

package/src/components/BaseSidebar.vue

@@ -94,7 +94,7 @@ function navigate(name: string) {
     <!-- Mobile top bar (hidden on desktop via scoped CSS to avoid flex/hidden conflict) -->
     <div class="mobile-topbar fixed top-0 inset-x-0 z-30 flex items-center justify-between px-4 py-3 border-b transition-colors"
       :class="isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'">
-      <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+      <button type="button" @click="goHome" class="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500" aria-label="Go to home">
         <!--
           `logo` slot: consumers drop their brand logo in here. Receives
           the current size hint so a logo component can scale to match.
@@ -104,7 +104,7 @@ function navigate(name: string) {
       <button
         type="button"
         @click="toggleMobile"
-        class="p-2 rounded-lg cursor-pointer"
+        class="p-2 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-600 hover:bg-gray-100'"
         :aria-label="mobileOpen ? 'Close navigation menu' : 'Open navigation menu'"
         :aria-expanded="mobileOpen"
@@ -138,7 +138,7 @@ function navigate(name: string) {
           class="px-5 pt-5 pb-4 flex items-center justify-center relative"
           :class="{ 'lg:px-2': isRail }"
         >
-          <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+          <button type="button" @click="goHome" class="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500" aria-label="Go to home">
             <slot name="logo" :size="isRail ? 36 : 52" />
           </button>
           <button

package/src/components/BaseTextInputModal.vue

@@ -53,7 +53,7 @@
     <template #footer>
       <button
         type="button"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="t.ghostButton"
         @click="handleCancel"
       >
@@ -62,7 +62,7 @@
       <button
         type="button"
         :disabled="!inputValue.trim() || submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="[
           !inputValue.trim() || submitting
             ? 'bg-emerald-400 cursor-not-allowed'

package/src/components/BaseToolbarButton.vue

@@ -21,7 +21,7 @@
     :type="type"
     :disabled="disabled"
     :title="title"
-    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
     :class="variantClass"
     @click="$emit('click', $event)"
   >

package/src/components/EuroAmount.vue

@@ -1,9 +1,9 @@
 <template>
-  <span v-if="hasAmount && shouldBeGreen" class="font-bold text-green-800">
+  <span v-if="hasAmount && shouldBeGreen" class="font-bold text-green-800 dark:text-green-400">
     {{ amount }} <span v-if="showCurrency">&euro;</span>
   </span>
 
-  <span v-if="hasAmount && !shouldBeGreen" :class="[baseClasses, shouldBeRed ? 'text-red-800' : 'text-gray-800']">
+  <span v-if="hasAmount && !shouldBeGreen" :class="[baseClasses, shouldBeRed ? 'text-red-800 dark:text-red-400' : 'text-gray-800 dark:text-gray-200']">
     {{ amount }} <span v-if="showCurrency">&euro;</span>
   </span>
 </template>

package/src/components/Pagination.test.ts

@@ -8,7 +8,7 @@ function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
 }
 
 async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
-  const link = wrapper.findAll('a').find(a => a.text().trim() === String(page))
+  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
   expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
   await link!.trigger('click')
 }
@@ -80,6 +80,6 @@ describe('Pagination', () => {
     await clickPage(wrapper, 7)
     await wrapper.setProps({ totalItems: 40 })
     expect(cellLabels(wrapper)).toEqual(['1', '2'])
-    expect(wrapper.find('a.active').text()).toBe('2')
+    expect(wrapper.find('button.active').text()).toBe('2')
   })
 })

package/src/components/Pagination.vue

@@ -1,20 +1,20 @@
 <template>
-  <div>
+  <nav aria-label="Pagination">
     <ul class="flex list-none p-0 m-0">
       <li v-for="(cell, index) in cells" :key="index" class="mr-1">
-        <a
+        <button
           v-if="cell !== 0"
-          role="button"
-          tabindex="0"
+          type="button"
+          :aria-current="cell === currentPage ? 'page' : undefined"
+          :aria-label="`Go to page ${cell}`"
           @click="changePage(cell)"
-          @keydown.enter="changePage(cell)"
-          class="inline-block border border-gray-300 rounded-lg p-3 no-underline text-black cursor-pointer hover:bg-gray-300"
-          :class="{ 'active font-bold bg-gray-200': cell === currentPage }"
-        >{{ cell }}</a>
-        <span v-else class="inline-block border border-gray-300 rounded-lg p-3 text-black cursor-not-allowed">...</span>
+          class="inline-block min-w-[44px] border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+          :class="{ 'active font-bold bg-gray-200 dark:bg-gray-700': cell === currentPage }"
+        >{{ cell }}</button>
+        <span v-else aria-hidden="true" class="inline-block border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-not-allowed">...</span>
       </li>
     </ul>
-  </div>
+  </nav>
 </template>
 
 <script lang="ts" setup>