fix: additional entrances click on tab PL-17

City-of-Helsinki · Nov 28, 2024 · dfbe5a8 · dfbe5a8
1 parent 1259021
commit dfbe5a8
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 101 deletions.
diff --git a/src/components/TabLists/TabLists.js b/src/components/TabLists/TabLists.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-prop-types */
 /* eslint-disable react/no-multi-comp */
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -16,14 +17,14 @@ import config from '../../../config';
 import useMobileStatus from '../../utils/isMobile';
 import PaginatedList from '../Lists/PaginatedList';
 
-const TabLists = ({
+function TabLists({
   location,
   data,
-  onTabChange = null,
-  focusClass = null,
-  focusText = null,
-  headerComponents = null,
-}) => {
+  onTabChange,
+  focusClass,
+  focusText,
+  headerComponents,
+}) {
   const isMobile = useMobileStatus();
   const theme = useTheme();
   const navigator = useSelector(selectNavigator);
@@ -154,7 +155,7 @@ const TabLists = ({
   const renderHeader = () => {
     let fullData = [];
 
-    data.forEach((element) => {
+    data.forEach(element => {
       if (element.data && !element.noOrderer) {
         fullData = [...fullData, ...element.data];
       }
@@ -216,16 +217,16 @@ const TabLists = ({
         }
         {
           fullData.length > 0 && (
-            <>
-              <ResultOrderer disabled={disabled} />
-            </>
+            <ResultOrderer disabled={disabled} />
           )
         }
         {
           focusClass
           && focusText
           && (
-            <Typography style={visuallyHidden} className={focusClass} tabIndex={-1}>{focusText}</Typography>
+            <Typography style={visuallyHidden} className={focusClass} tabIndex={-1}>
+              {focusText}
+            </Typography>
           )
         }
         <StyledTabs
@@ -237,62 +238,65 @@ const TabLists = ({
           style={styles}
         >
           {
-              filteredData.map((item, index) => {
-                if (item.data && item.data.length > 0) {
-                  const label = `${item.title} ${item.component ? '' : `(${item.data.length})`}`.trim();
-                  const tabId = `${item.title}-${item.data.length}`;
-                  return (
-                    <StyledTab
-                      id={tabId}
-                      key={tabId}
-                      aria-controls={`tab-content-${index}`}
-                      aria-label={item.ariaLabel ? item.ariaLabel : null}
-                      classes={{
-                        root: tabRootClass,
-                        selected: selectedClass,
-                      }}
-                      label={label}
-                      onClick={item.onClick ? () => item.onClick(index) : null}
-                      focusVisibleClassName={tabFocusClass}
-                    />
-                  );
-                }
+            filteredData.map((item, index) => {
+              if (item.data && item.data.length > 0) {
+                const label = `${item.title} ${item.component ? '' : `(${item.data.length})`}`.trim();
+                const tabId = `${item.title}-${item.data.length}`;
+
                 return (
-                  <Tab
-                    id={`Tab${index}`}
-                    key={`${item.title}`}
+                  <StyledTab
+                    id={tabId}
+                    key={tabId}
+                    ref={item.ref}
                     aria-controls={`tab-content-${index}`}
                     aria-label={item.ariaLabel ? item.ariaLabel : null}
                     classes={{
                       root: tabRootClass,
                       selected: selectedClass,
                     }}
-                    label={`${item.title}`}
+                    label={label}
                     onClick={item.onClick ? () => item.onClick(index) : null}
                     focusVisibleClassName={tabFocusClass}
                   />
                 );
-              })
-            }
+              }
+              return (
+                <Tab
+                  id={`Tab${index}`}
+                  key={`${item.title}`}
+                  ref={item.ref}
+                  aria-controls={`tab-content-${index}`}
+                  aria-label={item.ariaLabel ? item.ariaLabel : null}
+                  classes={{
+                    root: tabRootClass,
+                    selected: selectedClass,
+                  }}
+                  label={`${item.title}`}
+                  onClick={item.onClick ? () => item.onClick(index) : null}
+                  focusVisibleClassName={tabFocusClass}
+                />
+              );
+            })
+          }
         </StyledTabs>
       </>
     );
   };
 
   useEffect(() => {
     calculateHeaderStylings();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
 
-
   useEffect(() => {
     // Change tab if selected tab is changed on url
     const tabFromUrl = getTabfromUrl();
     if (tabFromUrl !== tabIndex) {
       handleTabChange(null, tabFromUrl);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
 
-
   const render = () => (
     <>
       {
@@ -359,7 +363,7 @@ const TabLists = ({
   );
 
   return render();
-};
+}
 
 const StyledTabs = styled(Tabs)(({ theme }) => ({
   position: 'sticky',
@@ -404,4 +408,11 @@ TabLists.propTypes = {
   focusText: PropTypes.string,
 };
 
+TabLists.defaultProps = {
+  onTabChange: null,
+  focusClass: null,
+  focusText: null,
+  headerComponents: null,
+};
+
 export default TabLists;
diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js
@@ -1,6 +1,9 @@
+/* eslint-disable react/forbid-prop-types */
 /* eslint-disable no-underscore-dangle */
 import styled from '@emotion/styled';
-import { Hearing, Mail, OpenInFull, Share } from '@mui/icons-material';
+import {
+  Hearing, Mail, OpenInFull, Share,
+} from '@mui/icons-material';
 import { Button, Typography } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 import Watermark from '@uiw/react-watermark';
@@ -56,7 +59,7 @@ import UnitLinks from './components/UnitLinks';
 import UnitsServicesList from './components/UnitsServicesList';
 import { parseUnitViewUrlParams } from './utils/unitViewUrlParamAndSettingsHandler';
 
-const UnitView = (props) => {
+function UnitView(props) {
   const {
     embed = false,
     match = {},
@@ -87,6 +90,7 @@ const UnitView = (props) => {
   const getLocaleText = useLocaleText();
   const dispatch = useDispatch();
   const history = useHistory();
+  const accessiblityTabRef = useRef();
 
   const getImageAlt = () => `${intl.formatMessage({ id: 'unit.picture' })}${getLocaleText(unit.name)}`;
 
@@ -117,11 +121,12 @@ const UnitView = (props) => {
       dispatch(setMapType(value));
     });
     resetUrlSearchParams();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const initializePTVAccessibilitySentences = () => {
     if (unit) {
-      unit.identifiers.forEach((element) => {
+      unit.identifiers.forEach(element => {
         if (element.namespace === 'ptv') {
           const ptvId = element.value;
           fetchAccessibilitySentences(ptvId);
@@ -135,7 +140,7 @@ const UnitView = (props) => {
     const unitId = params.unit;
     // If no selected unit data, or selected unit data is old, fetch new data
     if (!stateUnit || !checkCorrectUnit(stateUnit) || !stateUnit.complete) {
-      fetchSelectedUnit(unitId, (unit) => {
+      fetchSelectedUnit(unitId, unit => {
         setUnit(unit);
         if (unit?.keywords?.fi?.some(keyword => keyword.toLowerCase() === 'kuuluvuuskartta')) {
           fetchHearingMaps(unitId);
@@ -214,18 +219,21 @@ const UnitView = (props) => {
         map.setView(viewPosition?.current?.center, viewPosition?.current?.zoom);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => { // If unit changes without the component unmounting, update data
     if (unit) {
       intializeUnitData();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [match.params.unit]);
 
   useEffect(() => {
     if (config.usePtvAccessibilityApi) {
       initializePTVAccessibilitySentences();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [unit]);
 
   if (embed) {
@@ -311,7 +319,7 @@ const UnitView = (props) => {
 
   const renderDetailTab = () => {
     if (!unit || !unit.complete) {
-      return <></>;
+      return null;
     }
     const contractText = UnitHelper.getContractText(unit, intl, getLocaleText);
 
@@ -347,7 +355,11 @@ const UnitView = (props) => {
           </Container>
 
           {/* View Components */}
-          <ContactInfo unit={unit} userLocation={userLocation} />
+          <ContactInfo
+            unit={unit}
+            userLocation={userLocation}
+            accessiblityTabRef={accessiblityTabRef}
+          />
           <SocialMediaLinks unit={unit} />
           <UnitDataList
             listLength={3}
@@ -409,7 +421,7 @@ const UnitView = (props) => {
 
   const renderServiceTab = () => {
     if (!unit || !unit.complete) {
-      return <></>;
+      return null;
     }
 
     return (
@@ -464,7 +476,7 @@ const UnitView = (props) => {
         color="primary"
         aria-label={intl.formatMessage({ id: 'map.button.expand.aria' })}
         icon={<StyledMapIcon />}
-        onClick={(e) => {
+        onClick={e => {
           e.preventDefault();
           if (navigator) {
             navigator.openMap();
@@ -481,7 +493,6 @@ const UnitView = (props) => {
     </StyledUnitLocationContainer>
   );
 
-
   const render = () => {
     const title = unit && unit.name ? getLocaleText(unit.name) : '';
     const onLinkOpenClick = () => {
@@ -515,10 +526,9 @@ const UnitView = (props) => {
           titleComponent="h3"
           shareLink={elem}
         />
-        {unit?.location?.coordinates && 
-          <RouteBar unit={unit} userLocation={userLocation} />
-        }
-      </> 
+        {unit?.location?.coordinates
+          && <RouteBar unit={unit} userLocation={userLocation} />}
+      </>
     );
 
     if (unitFetching) {
@@ -551,6 +561,7 @@ const UnitView = (props) => {
           data: null,
           itemsPerPage: null,
           title: intl.formatMessage({ id: 'accessibility' }),
+          ref: accessiblityTabRef,
         },
         {
           id: 'services',
@@ -584,7 +595,7 @@ const UnitView = (props) => {
                     : renderPicture()
                 }
               </>
-          )}
+            )}
           />
         </div>
       );
@@ -603,7 +614,7 @@ const UnitView = (props) => {
   };
 
   return render();
-};
+}
 
 export default UnitView;