[open-formulieren/open-forms#3450] Fixed scrolling in mobile version,…

…added aria-labelledby to nav
open-formulieren · Nov 22, 2023 · b6895ec · b6895ec
1 parent a565209
commit b6895ec
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 5 deletions.
diff --git a/src/components/App.stories.js b/src/components/App.stories.js
@@ -201,3 +201,93 @@ export const ActiveSubmission = {
     await userEvent.click(beginButton);
   },
 };
+
+export const SeveralStepsInMobileViewport = {
+  render,
+  args: {
+    title: 'Progress',
+    formTitle: 'Formulier',
+    steps: [
+      {
+        uuid: '9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5',
+        slug: 'step-1',
+        formDefinition: 'Step 1',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '71fa50c1-53db-4179-9fe7-eb3378ef39ee',
+        slug: 'step-2',
+        formDefinition: 'Step 2',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/71fa50c1-53db-4179-9fe7-eb3378ef39ee`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'f4f82113-ac83-429b-a17b-c1b145831fa9',
+        slug: 'step-3',
+        formDefinition: 'Step 3',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/f4f82113-ac83-429b-a17b-c1b145831fa9`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'ae5af44e-004f-4d2f-be75-d46a22577244',
+        slug: 'step-4',
+        formDefinition: 'Step 4',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/ae5af44e-004f-4d2f-be75-d46a22577244`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'cae11cf8-2773-4d70-80f4-71e5828b6fe3',
+        slug: 'step-5',
+        formDefinition: 'Step 5',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/cae11cf8-2773-4d70-80f4-71e5828b6fe3`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '3b14f4f5-2283-4a81-adf1-03848672c83b',
+        slug: 'step-6',
+        formDefinition: 'Step 6',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/3b14f4f5-2283-4a81-adf1-03848672c83b`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '3f0a2763-74de-4957-b970-a5117f15b023',
+        slug: 'step-7',
+        formDefinition: 'Step 7',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/3f0a2763-74de-4957-b970-a5117f15b023`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-8',
+        formDefinition: 'Step 8',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+        completed: false,
+      },
+    ],
+    ariaMobileIconLabel: 'Progress step indicator toggle icon (mobile)',
+    accessibleToggleStepsLabel: 'Current step in form Formulier: Stap 2',
+  },
+  parameters: {
+    chromatic: {disableSnapshot: true},
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};
diff --git a/src/components/Caption.js b/src/components/Caption.js
@@ -3,9 +3,13 @@ import React from 'react';
 
 import {getBEMClassName} from 'utils';
 
-const Caption = ({children, component = 'caption'}) => {
+const Caption = ({children, id, component = 'caption'}) => {
   const Component = `${component}`;
-  return <Component className={getBEMClassName('caption')}>{children}</Component>;
+  return (
+    <Component id={id} className={getBEMClassName('caption')}>
+      {children}
+    </Component>
+  );
 };
 
 Caption.propTypes = {

diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
@@ -20,7 +20,9 @@ const ProgressIndicator = ({
   const [expanded, setExpanded] = useState(false);
 
   const modifiers = [];
-  if (!expanded) {
+  if (expanded) {
+    modifiers.push('mobile-expanded');
+  } else {
     modifiers.push('mobile-collapsed');
   }
 
@@ -36,15 +38,17 @@ const ProgressIndicator = ({
 
   return (
     <Card blockClassName="progress-indicator" modifiers={modifiers}>
-      <nav>
+      <nav aria-labelledby="proress-indicator-section">
         <MobileButton
           ariaMobileIconLabel={ariaMobileIconLabel}
           accessibleToggleStepsLabel={accessibleToggleStepsLabel}
           formTitle={formTitle}
           expanded={expanded}
           onExpandClick={() => setExpanded(!expanded)}
         />
-        <Caption component="h2">{title}</Caption>
+        <Caption id="proress-indicator-section" component="h2">
+          {title}
+        </Caption>
         <List ordered>
           {steps.map((step, index) => (
             <ProgressIndicatorItem

diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
@@ -26,6 +26,10 @@
     display: flex;
   }
 
+  @include bem.element('body') {
+    flex: 1;
+  }
+
   @include bem.element('debug') {
     margin-block-start: 2em;
   }

diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
@@ -80,6 +80,15 @@
         display: none;
       }
     }
+
+    @include bem.modifier('mobile-expanded') {
+      top: 0;
+      left: 0;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
   }
 }