@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { mdiChevronDown } from '@mdi/js'
+	import { computed, inject, type ComputedRef } from 'vue'
+	import { locales as defaultLocales, localesKey } from '../locales'
+	import { dateToString } from './utils'
+
+	const props = defineProps<{
+		modelValue: string | undefined
+		view: 'months' | 'years'
+		title: string
+		minYear: number
+		maxYear: number
+		id: string
+	}>()
+
+	const emits = defineEmits<{
+		(e: 'update:view', value: 'months' | 'years'): void
+	}>()
+
+	const localeDate = computed(() => {
+		const [month, year] = (props.modelValue || '').split('/').map(Number)
+		const isYearValid = year && !isNaN(year)
+		const isMonthValid = month && !isNaN(month) && month >= 1 && month <= 12
+		if (isMonthValid && isYearValid) {
+			return dateToString(new Date(year, month - 1))
+		}
+		else return dateToString(new Date())
+	})
+
+	const formatter = Intl.DateTimeFormat(navigator.language, { month: 'long' })
+
+	const locales = inject<ComputedRef<typeof defaultLocales>>(localesKey)!
+
+	const btnLabel = computed(() => {
+		if (props.view === 'months') {
+			return props.modelValue ? parseInt(props.modelValue.split('/')[1] || '', 10) : (new Date().getFullYear())
+		}
+		else {
+			const month = props.modelValue ? parseInt(props.modelValue.split('/')[0] || '', 10) : (new Date().getMonth() + 1)
+			return formatter.format(new Date(2000, month - 1))
+		}
+	})
+
+	const btnAriaLabel = computed(() => {
+		const labels = locales.value
+		if (props.view === 'months') {
+			const selectedYear = props.modelValue ? parseInt(props.modelValue.split('/')[1] || '', 10) : undefined
+			if (selectedYear && !isNaN(selectedYear) && selectedYear >= props.minYear && selectedYear <= props.maxYear) {
+				return labels.yearBtnLabelSelected(String(selectedYear))
+			}
+			else {
+				return labels.yearBtnLabelUnselected(String(new Date().getFullYear()))
+			}
+		}
+		else {
+			const selectedMonth = props.modelValue ? parseInt(props.modelValue.split('/')[0] || '', 10) : undefined
+			if (selectedMonth && !isNaN(selectedMonth)) {
+				const monthName = formatter.format(new Date(2000, selectedMonth - 1))
+				return labels.monthBtnLabelSelected(monthName)
+			}
+			else {
+				const currentMonthName = formatter.format(new Date())
+				return labels.monthBtnLabelUnselected(currentMonthName)
+			}
+		}
+	})
+
+</script>
+
+<template>
+	<div class="visual-picker-header">
+		<div
+			:id="`${props.id}-title`"
+			class="visual-picker-header__title"
+		>
+			{{ title }}
+		</div>
+		<div class="visual-picker-header__date">
+			{{ localeDate }}
+		</div>
+	</div>
+	<div
+		class="visual-picker-subheader"
+	>
+		<button
+			type="button"
+			class="visual-picker-year-btn"
+			:title="btnAriaLabel"
+			:aria-label="btnAriaLabel"
+			@click="emits('update:view', props.view === 'months' ? 'years' : 'months')"
+		>
+			{{ btnLabel }}
+			<SyIcon
+				:icon="mdiChevronDown"
+				decorative
+			/>
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.visual-picker-header {
+	padding-block: 16px;
+	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
+	color: #fff;
+}
+
+.visual-picker-header__title {
+	padding-inline: 24px 12px;
+	padding-bottom: 16px;
+	font-size: var(--v-typography-caption-font-size, 0.875rem);
+	font-weight: 400;
+	letter-spacing: 0.125rem;
+	line-height: 150%;
+}
+
+.visual-picker-header__date {
+	font-size: var(--v-typography-h3-font-size, 1.5rem);
+	font-weight: var(--v-typography-h3-font-weight, 700);
+	line-height: var(--v-typography-h3-line-height, 130%);
+	letter-spacing: var(--v-typography-h3-letter-spacing, 0%);
+	text-transform: capitalize;
+	margin-left: 20px;
+}
+
+.visual-picker-subheader {
+	height: 56px;
+	padding: 4px;
+	display: flex;
+	justify-content: center;
+}
+
+.visual-picker-year-btn {
+	display: flex;
+	gap: 4px;
+	margin: auto;
+	padding: 0.2rem 0.5rem;
+	border-radius: 99px;
+	font-size: var(--v-typography-body1-font-size, 1.125rem);
+	font-weight: bold;
+	cursor: pointer;
+
+	&:focus-visible {
+		/* stylelint-disable-next-line custom-property-pattern */
+		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	}
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/YearSelector.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+	import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+	import { useYearGrid } from './useYearGrid'
+	import { localesKey, type locales as defaultLocales } from '../locales'
+
+	const props = defineProps<{
+		min: number
+		max: number
+		order: 'asc' | 'desc'
+		modelValue?: number
+	}>()
+
+	const yearSelector = ref<HTMLElement | null>(null)
+
+	const emits = defineEmits<{
+		(event: 'update:modelValue', value: number): void
+	}>()
+
+	function getFocusedYear() {
+		if (props.modelValue && props.modelValue >= props.min && props.modelValue <= props.max) {
+			return props.modelValue
+		}
+		const currentYear = new Date().getFullYear()
+		if (currentYear >= props.min && currentYear <= props.max) {
+			return currentYear
+		}
+		else {
+			return props.order === 'asc' ? props.min : props.max
+		}
+	}
+
+	const {
+		activeYear,
+		selectNextYear,
+		selectPreviousYear,
+		selectNextRow,
+		selectPreviousRow,
+	} = useYearGrid(
+		yearSelector,
+		computed(() => props.min),
+		computed(() => props.max),
+		getFocusedYear(),
+	)
+
+	let focusTimeout: ReturnType<typeof setTimeout> | undefined
+
+	onMounted(() => {
+		const selectedYearElement = yearSelector.value!.querySelector<HTMLElement>(`.year-${getFocusedYear()}`)
+		selectedYearElement!.focus()
+
+		// When the menu opens, the transition can cause the focus to be lost, so we ensure it is set after the transition begins.
+		focusTimeout = setTimeout(() => {
+			selectedYearElement!.focus()
+		}, 0)
+	})
+
+	watch(() => props.order, () => {
+		const selectedYearElement = yearSelector.value!.querySelector<HTMLElement>(`.year-${getFocusedYear()}`)
+		selectedYearElement!.focus()
+	})
+
+	onUnmounted(() => {
+		clearTimeout(focusTimeout)
+	})
+
+	const locales = inject<typeof defaultLocales>(localesKey)!
+
+</script>
+
+<template>
+	<div
+		ref="yearSelector"
+		class="year-selector"
+		role="group"
+		:aria-label="locales.yearSelectorLabel"
+	>
+		<button
+			v-for="year of Array.from({ length: props.max - props.min + 1 }, (_, i) => props.order === 'asc' ? props.min + i : props.max - i)"
+			:key="year"
+			:tabindex="year === activeYear ? 0 : -1"
+			class="year-selector__year"
+			:class="[`year-${year}`, {
+				'year-selector__year--active': year === activeYear,
+				'year-selector__year--selected': year === props.modelValue,
+			}]"
+			:aria-pressed="year === props.modelValue"
+			@click="() => emits('update:modelValue', year)"
+			@keydown.left.prevent="props.order === 'asc' ? selectPreviousYear() : selectNextYear()"
+			@keydown.right.prevent="props.order === 'asc' ? selectNextYear() : selectPreviousYear()"
+			@keydown.up.prevent="props.order === 'asc' ? selectPreviousRow() : selectNextRow()"
+			@keydown.down.prevent="props.order === 'asc' ? selectNextRow() : selectPreviousRow()"
+			@keydown.enter.stop
+			@keydown.space.stop
+		>
+			{{ year }}
+		</button>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.year-selector {
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	max-height: 288px;
+	grid-gap: 0 24px;
+	padding-inline: 32px;
+	overflow: auto;
+}
+
+.year-selector__year {
+	height: 40px;
+	margin-block: 2px;
+	border: 2px solid #fff;
+	cursor: pointer;
+	text-align: center;
+	min-width: 33px;
+	font-size: var(--v-typography-body2-font-size, 1rem);
+	border-radius: 99px;
+	font-weight: bold;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-interactiveHover, 227, 234, 252));
+	}
+}
+
+.year-selector__year--selected {
+	/* stylelint-disable-next-line custom-property-pattern */
+	background-color: rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	color: white;
+
+	&:hover {
+		/* stylelint-disable-next-line custom-property-pattern */
+		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+	}
+}
+
+.year-selector__year--active:focus {
+	/* stylelint-disable-next-line custom-property-pattern */
+	outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+}
+</style>

package/src/components/MonthPicker/MonthPickerVisual/useMonthGrid.ts

@@ -0,0 +1,45 @@
+import { ref, type Ref } from 'vue'
+
+export function useMonthGrid(
+	monthSelector: Ref<HTMLElement | null>,
+	initialMonth: number = 0,
+) {
+	const monthsPerRow = 2
+	/**
+	 * Actual focused month, used for keyboard navigation. 1-based index (1 = January, 12 = December)
+	 */
+	const activeMonth = ref(initialMonth)
+
+	function selectNextMonth() {
+		selectMonth((activeMonth.value % 12) + 1)
+	}
+	function selectPreviousMonth() {
+		selectMonth((activeMonth.value - 2 + 12) % 12 + 1)
+	}
+	function selectNextRow() {
+		selectMonth(((activeMonth.value - 1 + monthsPerRow) % 12) + 1)
+	}
+	function selectPreviousRow() {
+		selectMonth(((activeMonth.value - 1 - monthsPerRow + 12) % 12) + 1)
+	}
+
+	function selectMonth(month: number) {
+		activeMonth.value = month
+		focusActiveMonth()
+	}
+
+	function focusActiveMonth() {
+		monthSelector.value!
+			.querySelector<HTMLElement>(`.month-${activeMonth.value}`)!
+			.focus()
+	}
+
+	return {
+		activeMonth,
+		selectMonth,
+		selectNextMonth,
+		selectPreviousMonth,
+		selectNextRow,
+		selectPreviousRow,
+	}
+}

package/src/components/MonthPicker/MonthPickerVisual/useYearGrid.ts

@@ -0,0 +1,45 @@
+import { ref, type Ref } from 'vue'
+
+export function useYearGrid(
+	yearSelector: Ref<HTMLElement | null>,
+	minYear: Ref<number>,
+	maxYear: Ref<number>,
+	initialYear?: number,
+) {
+	const yearsPerRow = 3
+	/**
+	 * Actual focused year, used for keyboard navigation. It can be outside of the min-max range to allow navigating to the first/last year by pressing up/down when the first/last year is focused.
+	 */
+	const activeYear = ref(initialYear || (new Date()).getFullYear())
+	function selectNextYear() {
+		selectYear(activeYear.value! + 1)
+	}
+	function selectPreviousYear() {
+		selectYear(activeYear.value! - 1)
+	}
+	function selectNextRow() {
+		selectYear(activeYear.value! + yearsPerRow)
+	}
+	function selectPreviousRow() {
+		selectYear(activeYear.value! - yearsPerRow)
+	}
+
+	function selectYear(year: number) {
+		activeYear.value = Math.min(Math.max(year, minYear.value), maxYear.value)
+		focusActiveYear()
+	}
+
+	function focusActiveYear() {
+		yearSelector.value!
+			.querySelector<HTMLElement>(`.year-${activeYear.value}`)!
+			.focus()
+	}
+
+	return {
+		activeYear,
+		selectNextYear,
+		selectPreviousYear,
+		selectNextRow,
+		selectPreviousRow,
+	}
+}

package/src/components/MonthPicker/MonthPickerVisual/utils.ts

@@ -0,0 +1,17 @@
+/**
+ * Formats a Date object into a string in the format "Month Year" (e.g., "January 2024") using the user's locale.
+ */
+export function dateToString(date: Date): string {
+	return new Intl.DateTimeFormat(navigator.language, { month: 'long', year: 'numeric' }).format(date)
+}
+
+/**
+ * Parses a string in the format "month/year" and returns a tuple of [month, year].
+ */
+export function parseMonthYearString(value: string | undefined): [number | undefined, number | undefined] {
+	if (!value) return [undefined, undefined]
+	const [monthStr, yearStr] = value.split('/')
+	const month = monthStr ? parseInt(monthStr, 10) : undefined
+	const year = yearStr ? parseInt(yearStr, 10) : undefined
+	return [month, year]
+}

package/src/components/MonthPicker/accessibilite/Accessibility.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, Primary } from '@storybook/addon-docs';
+import * as Stories from '../MonthPicker.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={Stories} />
+
+<AccessibilityGuideLayout
+    componentName="MonthPicker"
+    iconSrc={AccessibilityIcon}
+    apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/datepicker/examples/datepicker-month/"
+>
+    <CriteriaSection>
+        <CriteriaCard icon="🔤" title="Labels accessibles">
+            <ul>
+                <li><strong>Selection du mois</strong> : les boutons de selection de mois sont affichés sous forme de abrégé, une alternative complète est fournie pour les lecteurs d'écran.</li>
+                <li><strong>Bouton d'ouverture du picker</strong> : Le bouton toggle d'ouverture du picker affiché sous forme d'icône possède un label accessible décrivant son action.</li>
+            </ul>
+        </CriteriaCard>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Rôles ARIA appropriés</strong> : Utilisation de rôles <code>role="grid"</code> pour les grilles de sélection des mois et années.</li>
+                <li><strong>Relations entre éléments</strong> : Connexion entre le bouton d'ouverture et la grille de mois via <code>aria-expanded</code>, <code>aria-controls</code> et <code>aria-haspopup</code>.</li>
+
+            </ul>
+        </CriteriaCard>
+        <CriteriaCard icon="⌨️" title="Navigation clavier complète">
+            <ul>
+                <li><strong>Touches Espace et Entrée</strong> : Pour ouvrir/fermer le picker et sélectionner un mois, une année.</li>
+                <li><strong>Touches fléchées</strong> : Navigation entre les mois (↑, ↓, ←, →)</li>
+            </ul>
+        </CriteriaCard>
+
+        <DemoSection componentName="MonthPicker">
+            <Primary />
+        </DemoSection>
+
+        <BestPracticesSection>
+            <ul>
+                <li><strong>Labels clairs</strong> : Utiliser des labels explicites pour le champ afin de faciliter la compréhension de sa fonction.</li>
+                <li><strong>Gestion des erreurs</strong> : Fournir des messages d'erreur explicites en cas de sélection invalide.</li>
+            </ul>
+        </BestPracticesSection>
+
+        <ResourcesSection>
+            <ul>
+                <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/" target="_blank" rel="noopener noreferrer">Guide de conception de datepicker</a></li>
+                <li><a href="https://material.angular.dev/components/datepicker/overview" target="_blank" rel="noopener noreferrer">Exemple de datepicker</a></li>
+            </ul>
+        </ResourcesSection>
+    </CriteriaSection>
+</AccessibilityGuideLayout>

package/src/components/MonthPicker/locales.ts

@@ -0,0 +1,12 @@
+export const localesKey = Symbol('month-picker-locales')
+export const locales = {
+	btnLabel: 'Ouvrir le sélecteur de mois',
+	headerSelectYear: 'Sélectionner une année',
+	headerSelectMonth: 'Sélectionner un mois',
+	yearSelectorLabel: 'Sélectionner une année',
+	monthSelectorLabel: 'Sélectionner un mois',
+	yearBtnLabelSelected: (selectedYear: string) => `Sélectionner une année, l'année sélectionnée est ${selectedYear}`,
+	yearBtnLabelUnselected: (selectedYear: string) => `Sélectionner une année, nous sommes actuellement en ${selectedYear}`,
+	monthBtnLabelSelected: (selectedMonth: string) => `Sélectionner un mois, le mois sélectionné est ${selectedMonth}`,
+	monthBtnLabelUnselected: (selectedMonth: string) => `Sélectionner un mois, nous sommes actuellement en ${selectedMonth}`,
+}

package/src/components/MonthPicker/tests/MonthPicker.a11y.spec.ts

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import MonthPicker from '../MonthPicker.vue'
+
+describe('MonthPicker – accessibility (axe)', () => {
+	it('has no obvious axe violations modal closed', async () => {
+		const wrapper = mount(MonthPicker, {
+			props: {
+				label: 'Select month and year',
+				modelValue: undefined,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'MonthPicker – closed')
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations modal open', async () => {
+		const wrapper = mount(MonthPicker, {
+			props: {
+				label: 'Select month and year',
+				modelValue: '03/2023',
+			},
+			attachTo: document.body,
+		})
+
+		// Wait for the VMenu to resolve the differents ref used to find the activator element
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const toggleBtn = wrapper.find('.month-picker-input__toggle-btn')
+		await toggleBtn.trigger('click')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'MonthPicker – open')
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations on the year modal view', async () => {
+		const wrapper = mount(MonthPicker, {
+			props: {
+				label: 'Select month and year',
+				modelValue: '03/2023',
+			},
+			attachTo: document.body,
+		})
+
+		// Wait for the VMenu to resolve the differents ref used to find the activator element
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const toggleBtn = wrapper.find('.month-picker-input__toggle-btn')
+		await toggleBtn.trigger('click')
+
+		const headerBtn = wrapper.findComponent({ name: 'VisualPickerHeader' }).find('.visual-picker-header__date')
+		await headerBtn.trigger('click')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'MonthPicker – year view')
+
+		wrapper.unmount()
+	})
+})