Fix/navigation main content (#1843)

* fix: do not focus on main content when first loading the page

* change focus to main on task submit

* remove focus-visible from main-content

src/components/wrappers/Presentation.module.css

@@ -21,3 +21,7 @@
 .modalBody {
   padding: var(--modal-padding-y) var(--modal-padding-x);
 }
+
+.modal:focus-visible {
+  outline: none;
+}

src/features/formData/submit/submitFormDataSagas.ts

@@ -11,6 +11,7 @@ import { staticUseLanguageFromState } from 'src/hooks/useLanguage';
 import { makeGetAllowAnonymousSelector } from 'src/selectors/getAllowAnonymous';
 import { getCurrentDataTypeForApplication, getCurrentTaskDataElementId, isStatelessApp } from 'src/utils/appMetadata';
 import { convertDataBindingToModel, convertModelToDataBinding, filterOutInvalidData } from 'src/utils/databindings';
+import { focusMainContent } from 'src/utils/formLayout';
 import { ResolvedNodesSelector } from 'src/utils/layout/hierarchy';
 import { httpPost } from 'src/utils/network/networking';
 import { httpGet, httpPut } from 'src/utils/network/sharedNetworking';
@@ -52,6 +53,7 @@ export function* submitFormSaga(): SagaIterator {
     yield call(putFormData, {});
     yield call(submitComplete, state, resolvedNodes);
     yield put(FormDataActions.submitFulfilled());
+    focusMainContent();
   } catch (error) {
     window.logError('Submit form data failed:\n', error);
     yield put(FormDataActions.submitRejected({ error }));

src/features/layout/fetch/fetchFormLayoutSagas.test.ts

@@ -103,6 +103,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page1',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();
@@ -129,6 +130,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'FormLayout',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();
@@ -179,6 +181,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page2',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();
@@ -211,6 +214,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page1',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();
@@ -237,6 +241,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page1',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();
@@ -263,6 +268,7 @@ describe('fetchFormLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page1',
             skipPageCaching: true,
+            skipFocusMainContent: true,
           }),
         )
         .run();

src/features/layout/fetch/fetchFormLayoutSagas.ts

@@ -126,6 +126,7 @@ export function* fetchLayoutSaga(): SagaIterator {
       FormLayoutActions.updateCurrentView({
         newView: firstLayoutKey,
         skipPageCaching: true,
+        skipFocusMainContent: true,
       }),
     );
   } catch (error) {

src/features/layout/formLayoutSlice.ts

@@ -24,6 +24,7 @@ import {
 } from 'src/features/layout/update/updateFormLayoutSagas';
 import { OptionsActions } from 'src/features/options/optionsSlice';
 import { createSagaSlice } from 'src/redux/sagaSlice';
+import { focusMainContent } from 'src/utils/formLayout';
 import type * as LayoutTypes from 'src/features/layout/formLayoutTypes';
 import type { ILayouts } from 'src/layout/layout';
 import type { ActionsFromSlice, MkActionType } from 'src/redux/sagaSlice';
@@ -169,7 +170,9 @@ export const formLayoutSlice = () => {
           takeEvery: (action) => {
             if (!action.payload.focusComponentId) {
               window.scrollTo({ top: 0 });
-              document.getElementById('main-content')?.focus({ preventScroll: true });
+              if (action.payload.skipFocusMainContent !== true) {
+                focusMainContent();
+              }
             }
           },
           reducer: (state, action) => {

src/features/layout/formLayoutTypes.ts

@@ -38,6 +38,7 @@ export interface IUpdateCurrentView {
   returnToView?: string;
   runValidations?: TriggersPageValidation;
   skipPageCaching?: boolean;
+  skipFocusMainContent?: boolean;
   focusComponentId?: string;
   keepScrollPos?: IKeepComponentScrollPos;
   allowNavigationToHidden?: boolean;
@@ -47,6 +48,7 @@ export interface IUpdateCurrentViewFulfilled {
   newView: string;
   returnToView?: string;
   focusComponentId?: string;
+  skipFocusMainContent?: boolean;
 }
 
 export interface IUpdateCurrentViewRejected extends IFormLayoutActionRejected {

src/features/layout/update/updateFormLayoutSagas.ts

@@ -53,6 +53,7 @@ export function* updateCurrentViewSaga({
     keepScrollPos,
     focusComponentId,
     allowNavigationToHidden,
+    skipFocusMainContent,
   },
 }: PayloadAction<IUpdateCurrentView>): SagaIterator {
   try {
@@ -102,6 +103,7 @@ export function* updateCurrentViewSaga({
           newView,
           returnToView,
           focusComponentId,
+          skipFocusMainContent,
         }),
       );
     } else {

src/utils/formLayout.ts

@@ -408,3 +408,7 @@ export function getRepeatingGroupFilteredIndices(formData: IFormData, filter?: I
   }
   return null;
 }
+
+export function focusMainContent() {
+  document.getElementById('main-content')?.focus({ preventScroll: true });
+}