feat: add autoFocus of lunatic

InseeFr · Nov 2, 2023 · e9e0a53 · e9e0a53
1 parent bd9a73c
commit e9e0a53
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/queen-v2/src/components/lightOrchestrator/componentDisplayer/component.js b/queen-v2/src/components/lightOrchestrator/componentDisplayer/component.js
@@ -7,6 +7,7 @@ export const ComponentDisplayer = ({ components, readonly, pageTag }) => {
   return (
     <>
       <lunatic.LunaticComponents
+        autoFocusKey={pageTag}
         components={components}
         componentProps={() => ({
           filterDescription: false,
@@ -19,7 +20,7 @@ export const ComponentDisplayer = ({ components, readonly, pageTag }) => {
             {children}
           </div>
         )}
-      />{' '}
+      />
     </>
   );
 };
diff --git a/queen-v2/src/components/lightOrchestrator/lightOrchestrator.style.js b/queen-v2/src/components/lightOrchestrator/lightOrchestrator.style.js
@@ -23,5 +23,9 @@ export const useStyles = makeStyles(() => ({
     display: 'flex',
     flexDirection: 'row',
     height: '100%',
+    // fix css with a new <div/> elements needed for autoFocus
+    '& > div': {
+      display: 'contents',
+    },
   },
 }));
diff --git a/queen-v2/src/components/lightOrchestrator/navigation/component.js b/queen-v2/src/components/lightOrchestrator/navigation/component.js
@@ -10,17 +10,17 @@ import {
 import React, { useCallback, useRef, useState } from 'react';
 import { dependencies, version } from '../../../../package.json';
 
+import { IconButton } from '@material-ui/core';
 import { Apps } from '@material-ui/icons';
 import { ButtonItemMenu } from 'components/designSystem';
 import D from 'i18n';
-import { IconButton } from '@material-ui/core';
-import KeyboardEventHandler from 'react-keyboard-event-handler';
+import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import { useStyles } from './component.style';
 import SequenceNavigation from './sequenceNavigation';
 import StopNavigation from './stopNavigation';
 import SubsequenceNavigation from './subSequenceNavigation';
-import isEqual from 'lodash.isequal';
-import { useStyles } from './component.style';
 
 const Navigation = ({
   className,
@@ -131,8 +131,6 @@ const Navigation = ({
     <>
       <IconButton
         ref={listRefs[0]}
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus
         title={D.mainMenu}
         className={classes.menuIcon}
         onClick={openCloseMenu}