@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -87,14 +87,14 @@ exports[`ErrorPage > renders correctly 1`] = `
           v-col-sm-12
         ">
           <!-- v-if -->
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Something went wrong
-          </h2>
+          </h1>
           <p>
             Error message
           </p>
@@ -206,14 +206,14 @@ exports[`ErrorPage > renders correctly with undefined route 1`] = `
             </span>
             501
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Error
-          </h2>
+          </h1>
           <p>
             Error message
           </p>

package/src/components/ExternalLinks/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/FileList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilePreview/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 ]

package/src/components/FileUpload/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 ]

package/src/components/FilterInline/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilterSideBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-	import { computed, ref, toRef } from 'vue'
+	import { computed, ref, toRef, watch } from 'vue'
 	import { locales as defaultLocales } from './locales'
 	import { mdiFilterVariant } from '@mdi/js'
 	import ChipList from '../ChipList/ChipList.vue'
 	import type { FilterProp } from '@/composables/useFilterable/useFilterable'
 	import useFilterable from '@/composables/useFilterable/useFilterable'
+	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
@@ -37,6 +38,9 @@
 		}, 0)
 	})
 
+	const drawerRef = ref<VNavigationDrawer | null>(null)
+	const drawerBtnRef = ref<VBtn | null>(null)
+
 	function toggleDrawer(): void {
 		drawer.value = !drawer.value
 	}
@@ -46,11 +50,20 @@
 		drawer.value = false
 	}
 
+	watch(drawer, (e) => {
+		if (e) {
+			drawerRef!.value!.$el.nextElementSibling.focus()
+		}
+		else {
+			drawerBtnRef.value!.$el.focus()
+		}
+	})
 </script>
 
 <template>
 	<div class="sy-filters-side-bar">
 		<VBtn
+			ref="drawerBtnRef"
 			class="px-8 py-3"
 			:class="{ 'v-btn--active': drawer }"
 			color="primary"
@@ -76,100 +89,105 @@
 				{{ mdiFilterVariant }}
 			</VIcon>
 		</VBtn>
-
-		<VNavigationDrawer
-			:model-value="drawer"
-			sticky
-			temporary
-			location="right"
-			rounded="0"
-			:scrim="false"
-			rail
-			rail-width="395"
-			disable-resize-watcher
-			class="elevation-6"
+		<Teleport
+			to="body"
 		>
-			<VExpansionPanels variant="accordion">
-				<VExpansionPanel
-					v-for="filter in filters"
-					:key="filter.name"
-					:class="`vd-filter-${filter.name}`"
-					tile
-					elevation="0"
-				>
-					<VExpansionPanelTitle class="text-subtitle-2">
-						{{ filter.title }}
-
-						<span
-							v-if="getFilterCount(filter)"
-							class="ml-1"
-						>
-							({{ getFilterCount(filter) }})
-						</span>
-					</VExpansionPanelTitle>
-
-					<VExpansionPanelText>
-						<ChipList
-							:items="getChips(filter)"
-							:overflow-limit="filter.chipOverflowLimit"
-							class="mb-5"
-							:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
-							@remove="removeChip(filter, $event)"
-							@reset="resetFilter(filter)"
-						/>
-
-						<slot
-							:name="`${formatFilterName(filter.name)}`"
-							:props="{
-								modelValue: filter.value as any,
-								'onUpdate:modelValue': (value: unknown) =>
-									(filter.value = value),
-							}"
-						/>
-					</VExpansionPanelText>
-				</VExpansionPanel>
-			</VExpansionPanels>
-
-			<VSpacer />
-
-			<div class="px-4 pb-4 pt-10">
-				<VBtn
-					color="primary"
-					block
-					size="large"
-					variant="outlined"
-					class="mb-4"
-					@click="drawer = false"
-				>
-					{{ locales.close }}
-				</VBtn>
-
-				<VBtn
-					color="primary"
-					block
-					size="large"
-					variant="outlined"
-					class="mb-4"
-					@click.stop="resetAllFilters"
-				>
-					{{ locales.reset }}
-				</VBtn>
-
-				<VBtn
-					block
-					size="large"
-					color="primary"
-					@click.stop="applyFilters"
-				>
-					{{ locales.apply }}
-				</VBtn>
-			</div>
-		</VNavigationDrawer>
+			<VNavigationDrawer
+				ref="drawerRef"
+				:model-value="drawer"
+				sticky
+				temporary
+				location="right"
+				rounded="0"
+				:scrim="false"
+				rail
+				rail-width="395"
+				disable-resize-watcher
+				tabindex="0"
+				class="sy-filters-side-bar__content elevation-6 bg-white"
+			>
+				<VExpansionPanels variant="accordion">
+					<VExpansionPanel
+						v-for="filter in filters"
+						:key="filter.name"
+						:class="`vd-filter-${filter.name}`"
+						tile
+						elevation="0"
+					>
+						<VExpansionPanelTitle class="text-subtitle-2">
+							{{ filter.title }}
+
+							<span
+								v-if="getFilterCount(filter)"
+								class="ml-1"
+							>
+								({{ getFilterCount(filter) }})
+							</span>
+						</VExpansionPanelTitle>
+
+						<VExpansionPanelText>
+							<ChipList
+								:items="getChips(filter)"
+								:overflow-limit="filter.chipOverflowLimit"
+								class="mb-5"
+								:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
+								@remove="removeChip(filter, $event)"
+								@reset="resetFilter(filter)"
+							/>
+
+							<slot
+								:name="`${formatFilterName(filter.name)}`"
+								:props="{
+									modelValue: filter.value as any,
+									'onUpdate:modelValue': (value: unknown) =>
+										(filter.value = value),
+								}"
+							/>
+						</VExpansionPanelText>
+					</VExpansionPanel>
+				</VExpansionPanels>
+
+				<VSpacer />
+
+				<div class="px-4 pb-4 pt-10">
+					<VBtn
+						color="primary"
+						block
+						size="large"
+						variant="outlined"
+						class="mb-4"
+						@click="drawer = false"
+					>
+						{{ locales.close }}
+					</VBtn>
+
+					<VBtn
+						color="primary"
+						block
+						size="large"
+						variant="outlined"
+						class="mb-4"
+						@click.stop="resetAllFilters"
+					>
+						{{ locales.reset }}
+					</VBtn>
+
+					<VBtn
+						block
+						size="large"
+						color="primary"
+						@click.stop="applyFilters"
+					>
+						{{ locales.apply }}
+					</VBtn>
+				</div>
+			</VNavigationDrawer>
+		</Teleport>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.sy-filters-side-bar :deep() {
+.sy-filters-side-bar__content :deep() {
 	.v-navigation-drawer {
 		&__content {
 			display: flex;

package/src/components/FilterSideBar/tests/FilterSideBar.spec.ts

@@ -53,6 +53,9 @@ describe('FilterSideBar', () => {
 		const wrapper = mount(TestComponent, {
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 			props: {
 				modelValue: [],
@@ -75,6 +78,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -103,6 +109,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -122,6 +131,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -154,6 +166,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -172,6 +187,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -204,6 +222,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -247,6 +268,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 
@@ -290,6 +314,9 @@ describe('FilterSideBar', () => {
 			},
 			global: {
 				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
 			},
 		})
 

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

@@ -48,120 +48,125 @@ exports[`FilterSideBar > renders correctly 1`] = `
         <!---->
         <!---->
       </button>
-      <nav
-        class="
-          elevation-6
-          rounded-0
-          v-navigation-drawer
-          v-navigation-drawer--mobile
-          v-navigation-drawer--rail
-          v-navigation-drawer--right
-          v-navigation-drawer--temporary
-          v-theme--light
-        "
-        style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;"
-      >
-        <!---->
-        <!---->
-        <div class="v-navigation-drawer__content">
-          <div class="
-            v-expansion-panels
-            v-expansion-panels--variant-accordion
+      <teleport-stub to="body">
+        <nav
+          class="
+            bg-white
+            elevation-6
+            rounded-0
+            sy-filters-side-bar__content
+            v-navigation-drawer
+            v-navigation-drawer--mobile
+            v-navigation-drawer--rail
+            v-navigation-drawer--right
+            v-navigation-drawer--temporary
             v-theme--light
-          "></div>
-          <div class="v-spacer"></div>
-          <div class="
-            pb-4
-            pt-10
-            px-4
-          ">
-            <button
-              class="
-                mb-4
-                text-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--size-large
-                v-btn--variant-outlined
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+          "
+          style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;"
+          tabindex="0"
+        >
+          <!---->
+          <!---->
+          <div class="v-navigation-drawer__content">
+            <div class="
+              v-expansion-panels
+              v-expansion-panels--variant-accordion
+              v-theme--light
+            "></div>
+            <div class="v-spacer"></div>
+            <div class="
+              pb-4
+              pt-10
+              px-4
+            ">
+              <button
+                class="
+                  mb-4
+                  text-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--size-large
+                  v-btn--variant-outlined
+                  v-theme--light
+                "
+                type="button"
               >
-                Fermer
-              </span>
-              <!---->
-              <!---->
-            </button>
-            <button
-              class="
-                mb-4
-                text-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--size-large
-                v-btn--variant-outlined
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Fermer
+                </span>
+                <!---->
+                <!---->
+              </button>
+              <button
+                class="
+                  mb-4
+                  text-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--size-large
+                  v-btn--variant-outlined
+                  v-theme--light
+                "
+                type="button"
               >
-                Réinitialiser
-              </span>
-              <!---->
-              <!---->
-            </button>
-            <button
-              class="
-                bg-primary
-                v-btn
-                v-btn--block
-                v-btn--density-default
-                v-btn--elevated
-                v-btn--size-large
-                v-btn--variant-elevated
-                v-theme--light
-              "
-              type="button"
-            >
-              <span class="v-btn__overlay"></span>
-              <span class="v-btn__underlay"></span>
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Réinitialiser
+                </span>
+                <!---->
+                <!---->
+              </button>
+              <button
+                class="
+                  bg-primary
+                  v-btn
+                  v-btn--block
+                  v-btn--density-default
+                  v-btn--elevated
+                  v-btn--size-large
+                  v-btn--variant-elevated
+                  v-theme--light
+                "
+                type="button"
               >
-                Appliquer
-              </span>
-              <!---->
-              <!---->
-            </button>
+                <span class="v-btn__overlay"></span>
+                <span class="v-btn__underlay"></span>
+                <!---->
+                <span
+                  class="v-btn__content"
+                  data-no-activator=""
+                >
+                  Appliquer
+                </span>
+                <!---->
+                <!---->
+              </button>
+            </div>
           </div>
-        </div>
-        <!---->
-      </nav>
-      <transition-stub
-        appear="false"
-        css="true"
-        name="fade-transition"
-        persisted="false"
-      >
-        <!---->
-      </transition-stub>
+          <!---->
+        </nav>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade-transition"
+          persisted="false"
+        >
+          <!---->
+        </transition-stub>
+      </teleport-stub>
     </div>
   </div>
 </div>

package/src/components/FooterBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/FooterBar/FooterBar.vue

@@ -228,7 +228,7 @@
 
 				<li
 					v-if="props.version"
-					class="text-primary my-3 mx-4"
+					class="my-3 mx-4"
 				>
 					{{ locales.versionLabel }} {{ props.version }}
 				</li>
@@ -311,6 +311,7 @@ a {
 
 // Use deep selector to style user content as well
 .vd-footer-bar.v-theme--dark :deep() {
+	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
 		color: $white;
 	}

package/src/components/FranceConnectBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [