fix(accessibility): proper label for expand/collapse view (#288)

* fix(accessibility): proper label for expand/collapse view

Author: MailineN

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed an issue where aria-hidden stayed true on hover for tooltips.
 - Fixed an issue where collected data wasn't synced properly after going back online from offline mode.
+- Fixed an accessibility issue with collapse/expand buttons.
 
 ## [2.2.4](https://github.com/InseeFr/stromae-dsfr/releases/tag/2.2.4) - 2025-11-25
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stromae-dsfr",
   "private": true,
-  "version": "2.3.1-rc.2",
+  "version": "2.3.1-rc.expand-collapse-button",
   "type": "module",
   "scripts": {
     "prepare": "husky && vite-envs update-types",

src/components/orchestrator/Orchestrator.test.tsx

@@ -746,4 +746,78 @@ describe('Orchestrator', () => {
       surveyUnitCompositeName: 'RnJhbsOnYWlz',
     })
   })
+
+  it('has proper label when expanding/collapsing layout', async () => {
+    const user = userEvent.setup()
+
+    const sourceWithSequencePagination = {
+      componentType: 'Questionnaire',
+      components: [
+        {
+          componentType: 'Sequence',
+          page: '1',
+          id: 's1',
+          label: [{ type: 'VTL', value: '"Ma séquence"' }],
+        },
+        {
+          componentType: 'Question',
+          page: '2',
+          id: 'q1',
+          components: [
+            {
+              componentType: 'Input',
+              page: '2',
+              label: { value: 'my-question', type: 'TXT' },
+              id: 'i1',
+              response: { name: 'my-question-input' },
+            },
+          ],
+        },
+        {
+          componentType: 'Question',
+          page: '3',
+          id: 'q2',
+          components: [
+            {
+              componentType: 'Input',
+              page: '3',
+              label: { value: 'my-question-2', type: 'TXT' },
+              id: 'i2',
+              response: { name: 'my-question-2-input' },
+            },
+          ],
+        },
+      ],
+      variables: [],
+      maxPage: '3',
+      pagination: 'sequence' as const,
+    }
+
+    const interrogationWithLunaticPage = {
+      ...defaultInterrogation,
+      stateData: {
+        state: 'INIT' as QuestionnaireState,
+        date: 0,
+        currentPage: '1' as PageType,
+      },
+    }
+
+    const { getByText, getByRole } = renderWithRouter(
+      <OrchestratorTestWrapper
+        mode={MODE_TYPE.COLLECT}
+        source={sourceWithSequencePagination}
+        initialInterrogation={interrogationWithLunaticPage}
+      />,
+    )
+
+    await user.click(getByText('Start'))
+    const collapseButton = getByRole('button', { name: 'Collapse view' })
+    expect(collapseButton).toBeInTheDocument()
+    expect(collapseButton).toHaveAttribute('aria-pressed', 'true')
+
+    await user.click(collapseButton)
+    const expandButton = getByRole('button', { name: 'Expand view' })
+    expect(expandButton).toBeInTheDocument()
+    expect(expandButton).toHaveAttribute('aria-pressed', 'false')
+  })
 })

src/components/orchestrator/SurveyContainer.tsx

@@ -108,7 +108,10 @@ export function SurveyContainer(
                   }
                   priority="tertiary"
                   onClick={() => setIsLayoutExpanded((expanded) => !expanded)}
-                  title={t('button expand')}
+                  title={
+                    isLayoutExpanded ? t('button collapse') : t('button expand')
+                  }
+                  aria-pressed={isLayoutExpanded}
                 />
               </div>
             )}
@@ -175,6 +178,7 @@ const { i18n } = declareComponentKeys<
   | 'button previous title'
   | 'button previous label'
   | 'button expand'
+  | 'button collapse'
   | {
       K: 'button continue title'
       P: { currentPage: InternalPageType }

src/i18n/resources/en.tsx

@@ -123,6 +123,7 @@ export const translations: Translations<'en'> = {
     'button download data': 'Download data',
     'button download articulation': 'Download roundabout recap',
     'button expand': 'Expand view',
+    'button collapse': 'Collapse view',
     'button previous title': 'Return to the previous step',
     'button previous label': 'Previous',
   },

src/i18n/resources/fr.tsx

@@ -128,7 +128,8 @@ export const translations: Translations<'fr'> = {
     'button download articulation':
       'Télécharger le récapitulatif du rond-point',
 
-    'button expand': 'Étendre la vue',
+    'button expand': "Étendre l'affichage",
+    'button collapse': "Réduire l'affichage",
 
     'button previous title': "Revenir à l'étape précédente",
     'button previous label': 'Précédent',

src/i18n/resources/sq.tsx

@@ -123,6 +123,7 @@ export const translations: Translations<'sq'> = {
     'button download data': 'Shkarko të dhënat',
     'button download articulation': 'Shkarko tabelën e artikulimit',
     'button expand': 'Zgjero pamjen',
+    'button collapse': 'Tkurr pamjen',
     'button previous title': 'Kthehu në hapin e mëparshëm',
     'button previous label': 'I mëparshmi',
   },