@cnamts/synapse 1.0.22 → 1.0.23

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()
+	})
+})