@cnamts/synapse 1.0.16 → 1.0.18

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

@@ -0,0 +1,506 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import PageContainer from '../PageContainer.vue'
+
+// Scénario d’accessibilité : conteneur de page enveloppant un contenu principal.
+
+describe('PageContainer – accessibility (axe)', () => {
+	it('has no obvious axe violations with main content slot', async () => {
+		const wrapper = mount(PageContainer, {
+			slots: {
+				default: '<main><h1>Contenu principal</h1><p>Texte de la page.</p></main>',
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'PageContainer – main content', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
+	describe('PageContainer – accessibility with role="main"', () => {
+		it('has no axe violations with role="main"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+				},
+				slots: {
+					default: '<h1>Contenu principal</h1><p>Ceci est le contenu principal de la page.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="main"', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('has proper landmark role with role="main"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+				},
+				slots: {
+					default: '<p>Contenu principal</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('role')).toBe('main')
+			assertNoA11yViolations(await axe(element), 'PageContainer – main landmark')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with role="region"', () => {
+		it('has no axe violations with role="region" and aria-label', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'region',
+				},
+				attrs: {
+					'aria-label': 'Zone de contenu secondaire',
+				},
+				slots: {
+					default: '<h2>Section</h2><p>Contenu de la région.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="region" with aria-label')
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="region" and aria-labelledby', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'region',
+				},
+				attrs: {
+					'aria-labelledby': 'region-title',
+				},
+				slots: {
+					default: '<h2 id="region-title">Zone importante</h2><p>Contenu.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="region" with aria-labelledby')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with role="navigation"', () => {
+		it('has no axe violations with role="navigation"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'navigation',
+				},
+				slots: {
+					default: '<nav><ul><li><a href="#home">Accueil</a></li><li><a href="#about">À propos</a></li></ul></nav>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="navigation"', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="navigation" and aria-label', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'navigation',
+				},
+				attrs: {
+					'aria-label': 'Navigation principale',
+				},
+				slots: {
+					default: '<ul><li><a href="#home">Accueil</a></li></ul>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="navigation" with aria-label')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with role="contentinfo"', () => {
+		it('has no axe violations with role="contentinfo"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'contentinfo',
+				},
+				slots: {
+					default: '<footer><p>&copy; 2026 - Tous droits réservés</p></footer>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="contentinfo"', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with role="banner"', () => {
+		it('has no axe violations with role="banner"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'banner',
+				},
+				slots: {
+					default: '<header><h1>Logo</h1></header>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – role="banner"', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with uniqueId', () => {
+		it('has proper id structure with uniqueId prop', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					uniqueId: 'main-content',
+				},
+				slots: {
+					default: '<p>Contenu</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('main-content-container')
+
+			const vsheet = wrapper.findComponent({ name: 'VSheet' })
+			expect(vsheet.attributes('id')).toBe('main-content-content')
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="main" and uniqueId', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+					uniqueId: 'main-section',
+				},
+				slots: {
+					default: '<h1>Contenu principal</h1><p>Section principale.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('main-section-container')
+			expect(element.getAttribute('role')).toBe('main')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – role="main" with uniqueId')
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="region" and uniqueId', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'region',
+					uniqueId: 'sidebar',
+				},
+				attrs: {
+					'aria-label': 'Barre latérale',
+				},
+				slots: {
+					default: '<h2>Widgets</h2><p>Contenu latéral.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('sidebar-container')
+			expect(element.getAttribute('role')).toBe('region')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – role="region" with uniqueId')
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="navigation" and uniqueId', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'navigation',
+					uniqueId: 'main-nav',
+				},
+				slots: {
+					default: '<ul><li><a href="#home">Accueil</a></li><li><a href="#services">Services</a></li></ul>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('main-nav-container')
+			expect(element.getAttribute('role')).toBe('navigation')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – role="navigation" with uniqueId')
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="contentinfo" and uniqueId', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'contentinfo',
+					uniqueId: 'footer',
+				},
+				slots: {
+					default: '<footer><p>Informations de pied de page</p></footer>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('footer-container')
+			expect(element.getAttribute('role')).toBe('contentinfo')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – role="contentinfo" with uniqueId', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations with role="banner" and uniqueId', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'banner',
+					uniqueId: 'header',
+				},
+				slots: {
+					default: '<header><h1>En-tête</h1></header>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBe('header-container')
+			expect(element.getAttribute('role')).toBe('banner')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – role="banner" with uniqueId', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility with role and uniqueId combination', () => {
+		it('supports multiple landmark instances with different roles and uniqueIds', async () => {
+			// Premier instance: header
+			const header = mount(PageContainer, {
+				props: {
+					role: 'banner',
+					uniqueId: 'header',
+				},
+				slots: {
+					default: '<h1>Logo du site</h1>',
+				},
+				attachTo: document.body,
+			})
+
+			// Deuxième instance: navigation
+			const nav = mount(PageContainer, {
+				props: {
+					role: 'navigation',
+					uniqueId: 'main-nav',
+				},
+				slots: {
+					default: '<ul><li><a href="#home">Accueil</a></li></ul>',
+				},
+				attachTo: document.body,
+			})
+
+			// Troisième instance: main
+			const main = mount(PageContainer, {
+				props: {
+					role: 'main',
+					uniqueId: 'main-content',
+				},
+				slots: {
+					default: '<h2>Contenu</h2><p>Corps de la page</p>',
+				},
+				attachTo: document.body,
+			})
+
+			// Vérifier les IDs et rôles
+			expect((header.element as HTMLElement).getAttribute('id')).toBe('header-container')
+			expect((header.element as HTMLElement).getAttribute('role')).toBe('banner')
+
+			expect((nav.element as HTMLElement).getAttribute('id')).toBe('main-nav-container')
+			expect((nav.element as HTMLElement).getAttribute('role')).toBe('navigation')
+
+			expect((main.element as HTMLElement).getAttribute('id')).toBe('main-content-container')
+			expect((main.element as HTMLElement).getAttribute('role')).toBe('main')
+
+			// Vérifier qu'il n'y a pas de violations axe
+			const headerResults = await axe(header.element as HTMLElement)
+			const navResults = await axe(nav.element as HTMLElement)
+			const mainResults = await axe(main.element as HTMLElement)
+
+			assertNoA11yViolations(headerResults, 'Header landmark', { ignoreRules: ['region'] })
+			assertNoA11yViolations(navResults, 'Navigation landmark')
+			assertNoA11yViolations(mainResults, 'Main landmark', { ignoreRules: ['region'] })
+
+			header.unmount()
+			nav.unmount()
+			main.unmount()
+		})
+
+		it('has proper semantic structure for complete page layout', async () => {
+			// Simulation d'une page complète avec tous les landmarks
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+					uniqueId: 'page-main',
+				},
+				slots: {
+					default: `
+						<article>
+							<h1>Titre de l'article</h1>
+							<p>Contenu de l'article principal avec une bonne structure.</p>
+						</article>
+					`,
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('role')).toBe('main')
+			expect(element.getAttribute('id')).toBe('page-main-container')
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – complete semantic structure')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('PageContainer – accessibility edge cases', () => {
+		it('has no axe violations when uniqueId is not provided', async () => {
+			const wrapper = mount(PageContainer, {
+				slots: {
+					default: '<p>Contenu sans ID</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('id')).toBeNull()
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – without uniqueId', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('has no axe violations when role is not provided', async () => {
+			const wrapper = mount(PageContainer, {
+				slots: {
+					default: '<p>Contenu sans rôle</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const element = wrapper.element as HTMLElement
+			expect(element.getAttribute('role')).toBeNull()
+
+			const results = await axe(element)
+			assertNoA11yViolations(results, 'PageContainer – without role', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('has proper color contrast with different background colors', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+					color: 'surface',
+				},
+				slots: {
+					default: '<h1>Texte contrasté</h1><p>Paragraphe avec contraste de couleur.</p>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'PageContainer – color contrast', {
+				ignoreRules: ['region'],
+			})
+
+			wrapper.unmount()
+		})
+
+		it('maintains accessibility with different spacing values', async () => {
+			const spacings = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+			for (const spacing of spacings) {
+				const wrapper = mount(PageContainer, {
+					props: {
+						role: 'region',
+						spacing,
+					},
+					attrs: {
+						'aria-label': `Région avec spacing ${spacing}`,
+					},
+					slots: {
+						default: '<p>Contenu avec espacement</p>',
+					},
+					attachTo: document.body,
+				})
+
+				const results = await axe(wrapper.element as HTMLElement)
+				assertNoA11yViolations(results, `PageContainer – spacing=${spacing}`)
+
+				wrapper.unmount()
+			}
+		})
+	})
+})

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

@@ -39,4 +39,56 @@ describe('PageContainer', () => {
 
 		expect(wrapper.vm.containerSize).toBe(800)
 	})
+
+	describe('role prop', () => {
+		it('should render with role="main"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'main',
+				},
+			})
+
+			expect(wrapper.attributes('role')).toBe('main')
+		})
+
+		it('should render with role="region"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'region',
+				},
+			})
+
+			expect(wrapper.attributes('role')).toBe('region')
+		})
+
+		it('should render with role="navigation"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'navigation',
+				},
+			})
+
+			expect(wrapper.attributes('role')).toBe('navigation')
+		})
+
+		it('should render with role="contentinfo"', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: 'contentinfo',
+				},
+			})
+
+			expect(wrapper.attributes('role')).toBe('contentinfo')
+		})
+
+		it('should not render role attribute when role prop is undefined', async () => {
+			const wrapper = mount(PageContainer, {
+				props: {
+					role: undefined,
+				},
+			})
+
+			expect(wrapper.attributes('role')).toBeUndefined()
+		})
+	})
 })

package/src/components/PaginatedTable/Accessibilite.mdx

@@ -6,13 +6,8 @@ import '../../stories/styles/shared.css';
 
 <div className="header">
   <h1>Accessibilité</h1>
-  <p>Informations sur l'accessibilité du composant</p>
+  <p>Cette page sera bientôt disponible</p>
 </div>
 
 <Story of={AccessStories.Legende} />
 <br />
-
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-<Story of={AccessStories.AccessibilitePanel} />
-<br />