From b6895ec69d36d26286744f29b720b6682775bca5 Mon Sep 17 00:00:00 2001 From: vasileios <zigras00@gmail.com> Date: Wed, 22 Nov 2023 15:46:02 +0100 Subject: [PATCH] [open-formulieren/open-forms#3450] Fixed scrolling in mobile version,added aria-labelledby to nav --- src/components/App.stories.js | 90 ++++++++++++++++++++ src/components/Caption.js | 8 +- src/components/ProgressIndicator/index.js | 10 ++- src/scss/components/_app.scss | 4 + src/scss/components/_progress-indicator.scss | 9 ++ 5 files changed, 116 insertions(+), 5 deletions(-) diff --git a/src/components/App.stories.js b/src/components/App.stories.js index 5c14ab79d..86219e821 100644 --- 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 index d71fbc406..5ccfe8b15 100644 --- 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 index 773f2dc6b..fac8693f6 100644 --- 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,7 +38,7 @@ const ProgressIndicator = ({ return ( <Card blockClassName="progress-indicator" modifiers={modifiers}> - <nav> + <nav aria-labelledby="proress-indicator-section"> <MobileButton ariaMobileIconLabel={ariaMobileIconLabel} accessibleToggleStepsLabel={accessibleToggleStepsLabel} @@ -44,7 +46,9 @@ const ProgressIndicator = ({ 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 index 8b95eb238..d6c4f74a5 100644 --- 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 index 40b68b3f4..724a7f33f 100644 --- 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; + } } }